import { Body, Heading } from "@equilab/ui-curated";
import React, { ReactNode } from "react";
import styled, { keyframes } from "styled-components";
import LightImage from "./light.png";
import LightImageDesktop from "./light-desktop.png";
import Logo from "./logo";
import ItemIcon from "./star.svg";
import SnejanaAvatar from "./snejana.png";
import AndreaAvatar from "./andrea.png";
import Initiatives from "./initiatives";
import Footer from "../footer/footer";

const flickerAnimation = keyframes`
	0%, 19.999%, 24%, 62.999%, 64%, 64.999%, 70%, 100% {
    color: #303632;
	}

	20%, 23.999%, 63%, 63.999%, 65%, 69.999% {
		color: white;
    text-shadow: 0px 0px 8px #ffffff;
	}
`;

const Flicker = styled.span<{ delay: number }>`
  animation: ${flickerAnimation} 5s linear infinite;
  animation-delay: ${(props) => props.delay}s;
`;

const MainPageContainer = styled.div`
  display: flex;
  flex-direction: column;

  & .section {
    padding-left: 32px;
    padding-right: 32px;
    ${({ theme }) => theme.breakpoints.up("m")} {
      padding-left: 20%;
      padding-right: 20%;
    }
  }
`;

const Welcome = styled.div`
  background: #2e3330;
  background-image: url(${LightImage.src});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  ${({ theme }) => theme.breakpoints.up("m")} {
    background-image: url(${LightImageDesktop.src});
    background-size: 1200px 834px;
    background-position-x: -70px;
    background-position-y: -130px;
    background-repeat: no-repeat;
  }
  & .light {
    height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  & .logo {
    margin-top: 50px;
  }
  & .heading {
    margin-top: 40px;
    margin-bottom: 80px;
  }
  & .body {
    color: ${({ theme }) => theme.pallete.text.secondary};
    ${({ theme }) => theme.breakpoints.up("m")} {
      width: 50%;
    }
  }
  & .welcome {
    text-shadow: 0px 0px 8px #ffffff;
    margin: 64px 0px;
    ${({ theme }) => theme.breakpoints.up("m")} {
      margin-bottom: 88px;
    }
  }
`;

const WhoIsInvovled = styled.div`
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #c0c1e4 0%, #707cb9 48.44%, #2e3330 100%);
  gap: 52px;
  padding-top: 40px;
  padding-bottom: 60px;
  ${({ theme }) => theme.breakpoints.up("m")} {
    flex-direction: row;
    gap: 50px;
    padding-top: 40px;
    padding-bottom: 80px;
  }
  & .listItem {
    display: flex;
    padding: 12px 0px;
    align-items: center;
    margin-left: 6px;
  }
  & .listItemIcon {
    background-image: url(${ItemIcon});
    width: 15px;
    height: 15px;
    background-position: center;
    margin-right: 20px;
  }
  & .involvedItem {
    ${({ theme }) => theme.breakpoints.up("m")} {
      flex-basis: 50%;
    }
  }
  & .whoIsInvovledHeader {
    margin-bottom: 22px;
    ${({ theme }) => theme.breakpoints.up("m")} {
      margin-bottom: 36px;
    }
  }
`;

const Council = styled.div`
  display: flex;
  flex-direction: column;
  background-color: #2e3330;
  padding-bottom: 64px;

  ${({ theme }) => theme.breakpoints.up("m")} {
    padding-bottom: 88px;
  }

  & .councilName {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  & .councilDescription {
    color: ${({ theme }) => theme.pallete.text.secondary};
  }
  & .councilPerson:not(:last-child) {
    margin-bottom: 32px;
  }
  & .councilPerson {
    ${({ theme }) => theme.breakpoints.up("m")} {
      flex-basis: 50%;
    }
  }
  & .councilSectionHeader {
    margin-bottom: 32px;
    ${({ theme }) => theme.breakpoints.up("m")} {
      margin-bottom: 48px;
    }
  }

  & .councilList {
    display: flex;
    flex-direction: column;
    ${({ theme }) => theme.breakpoints.up("m")} {
      flex-direction: row;
      gap: 50px;
    }
  }
`;

const CouncilAvatar = styled.div<{ url: string }>(({ url }) => ({
  backgroundImage: `url(${url})`,
  width: "80px",
  height: "80px",
  backgroundPosition: "center",
  backgroundSize: "contain",
  marginRight: "8px",
}));

const ListItem: React.FC<{ children?: ReactNode }> = ({ children }) => {
  return (
    <div className="listItem">
      <div className="listItemIcon" />
      <Body className="listItemText">{children}</Body>
    </div>
  );
};

const CouncilPerson: React.FC<{
  name: string;
  url: string;
  children: ReactNode;
}> = ({ name, url, children }) => {
  return (
    <div className="councilPerson">
      <div className="councilName">
        <CouncilAvatar url={url} />
        <Body>{name}</Body>
      </div>
      <Body className="councilDescription">{children}</Body>
    </div>
  );
};

const MainPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
  return (
    <MainPageContainer>
      <Welcome className="section">
        <div className="light">
          <div className="logo">
            <Logo />
          </div>
          <Heading size="m" as="div" className="heading">
            We are facilitating the integration of the digitally-born art with
            traditional art forms and vice versa{" "}
          </Heading>
        </div>
        <Body className="body">
          LUMINOUS is a non-for-profit Art Foundation aimed at researching,
          producing, and sharing knowledge around cutting-edge digital forms of
          contemporary art
        </Body>
        <Heading size="m" className="welcome" as="div">
          Wel<Flicker delay={0.2}>c</Flicker>ome to creating a c
          <Flicker delay={0.5}>u</Flicker>ltural prog
          <Flicker delay={0.2}>r</Flicker>am for{" "}
          <Flicker delay={0.2}>a</Flicker> wider community in{" "}
          <Flicker delay={0.5}>t</Flicker>he physical, blockchain, and m
          <Flicker delay={0.5}>e</Flicker>
          taverse worl<Flicker delay={0.2}>d</Flicker>s
        </Heading>
      </Welcome>
      <WhoIsInvovled className="section">
        <div className="involvedItem">
          <Heading className="whoIsInvovledHeader" as="div">
            Who is involved
          </Heading>
          <ListItem>Contemporary art museum professionals</ListItem>
          <ListItem>Digital and fine art artists </ListItem>
          <ListItem>Crypto and NFT natives</ListItem>
          <ListItem>Metaverse explorers</ListItem>
          <ListItem>Curators</ListItem>
        </div>
        <div className="involvedItem">
          <Heading className="whoIsInvovledHeader" as="div">
            What they do
          </Heading>
          <ListItem>Grow a knowledge base </ListItem>
          <ListItem>Research</ListItem>
          <ListItem>Collect</ListItem>
          <ListItem>Curate</ListItem>
          <ListItem>Write</ListItem>
        </div>
      </WhoIsInvovled>
      <Council className="section">
        <Heading className="councilSectionHeader">Council</Heading>
        <div className="councilList">
          <CouncilPerson url={SnejanaAvatar.src} name="Snejana Krasteva">
            Chief curator at Luminous Art Foundation, and Senior Curator at
            Garage Museum of Contemporary Art. She grew up between Bulgaria and
            Morocco, and relocated to China in 2000 where she received a BA in
            Chinese Language from Nanjing University. In China, she run the
            gallery Beijing Tokyo Art Projects + TOKYO GALLERY before joining
            the Ullens Center for Contemporary Art in Beijing. In 2009 she moved
            to London to pursue her education and received an MFA in Curating
            from Goldsmiths College. From 2011 to 2013, she was a curator at Art
            on the Underground in London where she realized a series of art
            projects in the public realm.
          </CouncilPerson>
          <CouncilPerson url={AndreaAvatar.src} name="Andrea Misiano">
            Art advisor at Luminous Art Foundation, curator and anthropologist.
            He has worked at Garage Museum of Contemporary Art since 2009 where
            he has been involved in putting together an large number of shows,
            including those of Marina Abramovich, William Kentridge, 100 Years
            of Performance, New York Minute and many more. His latest projects
            include We Treasure Our Lucid Dreams: The Other East and Esoteric
            Knowledge in Russian Art 1905–1969 (the show received The Art
            Newspaper Prize “Exhibition of the year”) and Spirit Labor:
            Difficulty, Duration, and Affect, both at Garage. In 2019 Misiano
            initiated the NFT art group Instigators, where he developed art
            projects with numerous artists, art fairs, and foundations. He has
            taken part in a number of science conferences and contributed to
            many publications.
          </CouncilPerson>
        </div>
      </Council>
      <Initiatives className="section" />
      <Footer />
    </MainPageContainer>
  );
};

export default MainPage;
