import React from "react";

import { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png";
import logo2x from "../assets/logo_2x.png";
import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link";
import { Card } from "../components/card";

const data = [
  {
    id: Math.random().toString(),
    title: "Рик Санчез",
    subTitle: "Главный герой",
    body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
    image: "rick",
    link: "https://en.wikipedia.org/wiki/Rick_Sanchez",
  },
  {
    id: Math.random().toString(),
    title: "Морти Смит",
    subTitle: "Внук Рика",
    body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
    image: "morty",
    link: "https://en.wikipedia.org/wiki/morty",
  },
  {
    id: Math.random().toString(),
    title: "Бет Смит",
    subTitle: "Мать Морти",
    body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
    image: "beth",
    link: "https://en.wikipedia.org/wiki/beth",
  },
  {
    id: Math.random().toString(),
    title: "Джерри Смит",
    subTitle: "Отец Морти",
    body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
    image: "jerry",
    link: "https://en.wikipedia.org/wiki/beth",
  },
  {
    id: Math.random().toString(),
    body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
  },
];

export const LandingPage = () => {
  return (
    <>
      <header id="header">
        <img
          className="logo"
          height="44px"
          width="227"
          src={logo4x}
          alt="Логотип. Надпись Рик и Морти"
          srcSet={`
            ${logo} 220w,
            ${logo2x} 445w,
            ${logo4x} 880w,
          `}
          sizes="
          (max-width: 240px) 100px,
          (min-width: 320px) 440px,
          (min-width: 520px) 880px
        "
        />
        <NavPanel />
      </header>

      <main className="main">
        <header className="card card-main">
          <div className="card-text">
            <h1 className="h1">
              Персонажи из <br />
              <span className="brand-text">огурчиковой вселенной</span>
            </h1>

            <p className="p card--text__p">
              На этой странице представлены персонажи из сериала “
              <Link href="#">Rick and Morty</Link>
              ”. Этот популярный анимационный сериал, созданный Джастином
              Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
              Санчеза, гениального и эксцентричного ученого, и его внука Морти
              Смита.
            </p>
          </div>
          <img className="card--img" src={cucumber} alt="" />
        </header>
        {data.map((item, index) => (
          <Card
            directionReverse={index % 2 === 0}
            key={item.id}
            title={item.title}
            image={item.image}
            link={item.link}
            subTitle={item.subTitle}
          >
            {item.body}
          </Card>
        ))}
      </main>

      <footer className="page-footer"></footer>
    </>
  );
};