import React from "react";

import data from '../__stubs__/landing-data.json'
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";
import { Header1 } from "../components/common";

import {
  BrandText,
  Logo,
  Main,
  MainCardImg,
  MainCardText,
  MainCardTextP,
  MainCardWrapper,
  PageFooter,
  PageHeader,
} from "./style";

export const LandingPage = () => {
  return (
    <>
      <PageHeader>
        <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 currentNavElement={'Home'} />
      </PageHeader>

      <Main>
        <MainCardWrapper as="header">
          <MainCardText>
            <Header1>
              Персонажи из <br />
              <BrandText>огурчиковой вселенной</BrandText>
            </Header1>

            <MainCardTextP>
              На этой странице представлены персонажи из сериала “
              <Link href="#">Rick and Morty</Link>
              ”. Этот популярный анимационный сериал, созданный Джастином
              Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
              Санчеза, гениального и эксцентричного ученого, и его внука Морти
              Смита.
            </MainCardTextP>
          </MainCardText>
          <MainCardImg src={cucumber} alt="" />
        </MainCardWrapper>
        {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>

      <PageFooter></PageFooter>
    </>
  );
};