import { useRouter } from "next/router";
import Image from "next/image";
import Layout from "../components/layout";
import pexels1 from "../../public/pexels1.jpg";
import CardLeft from "../components/cardLeft";
import Item from "../components/item";
import img1 from "../../public/img1.png";
import img2 from "../../public/img2.jpg";
import img3 from "../../public/img3.jpg";
import feder from "../../public/feder.png";
import ministerio from "../../public/ministerio.png";
import horizontal_playa from "../../public/playa_canteras_canarias.jpg";

import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Carrusel from "../components/carrusel";
import CarruselProjects from "../components/carruselProjects";

const features = [
  { title: "index.features.card1.title", text: "index.features.card1.text"},
  { title: "index.features.card2.title", text: "index.features.card2.text"},
  { title: "index.features.card3.title", text: "index.features.card3.text"},
  { title: "index.features.card4.title", text: "index.features.card4.text"},
  { title: "index.features.card5.title", text: "index.features.card5.text"},
  { title: "index.features.card6.title", text: "index.features.card6.text"},
  { title: "index.features.card7.title", text: "index.features.card7.text"},
  { title: "index.features.card8.title", text: "index.features.card8.text"},
];

const researchlines = [
  {
    title: "index.researchlines.card1.title",
    text: ["index.researchlines.card1.content.p1", "index.researchlines.card1.content.p2"],
  },
  {
    title: "index.researchlines.card2.title",
    text: ["index.researchlines.card2.content.p1", "index.researchlines.card2.content.p2"],
  },
  {
    title: "index.researchlines.card3.title",
    text: ["index.researchlines.card3.content.p1", "index.researchlines.card3.content.p2"],
  },
  {
    title: "index.researchlines.card4.title",
    text: ["index.researchlines.card4.content.p1", "index.researchlines.card4.content.p2"],
  },
  {
    title: "index.researchlines.card5.title",
    text: ["index.researchlines.card5.content.p1", "index.researchlines.card5.content.p2"],
  },
  {
    title: "index.researchlines.card6.title",
    text: ["index.researchlines.card6.content.p1", "index.researchlines.card6.content.p2"],
  },
];
const images = [ministerio, feder];

export default function Home() {
  const { locale, locales, push } = useRouter();
  const { t: translate } = useTranslation();

  return (
    <>
      <Layout main page="index">

      <div className="w-full flex justify-center py-6">
        <div className="relative w-full max-w-screen-lg h-[300px]">
          <Image
            src={horizontal_playa}
            alt="Playa de Las Canteras"
            fill
            className="object-cover rounded-xl shadow-lg"
          />
        </div>
      </div>

        {/* *** features *** */}

        <div className="py-10">
          <div className="h-24 flex justify-center items-center">
            <p className="font-cooperBold text-4xl">
              {translate("index.features.title")}
            </p>
          </div>
          <div className="layout py-4 grid gap-x-4 lg:gap-x-20 xl:gap-x-12 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
            {features.map((feature, index) => (
              <Item key={index} title={feature.title} text={feature.text} />
            ))}
          </div>
        </div>

        {/* *** TOPICS OF INTEREST *** */}
        <div className="pb-10">
          <div className="relative overflow-hidden h-24 flex justify-center items-center bg-zinc-100">
            <div className="absolute top-0 left-10 w-108 h-108 bg-red-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
            <div className="absolute top-0 right-10 w-108 h-108 bg-zinc-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse animation-delay-2000"></div>
            <p className="font-cooperBold text-4xl">
              {translate("index.topics.title")}
            </p>
          </div>
          <div className="layout">
            <p className="text-center max-w-4xl mx-auto px-4 my-6 text-lg text-zinc-800">
              {translate("index.topics.intro")}
            </p>
            <div className="md:flex md:justify-center my-8">
              <div className="md:mr-6 md:w-1/3 my-10">
                <Image src={img1} alt="img1" className="hidden md:block" />
                <p className="font-oswald text-2xl mt-4 mb-2">
                  {translate("index.topics.card1.title")}
                </p>
                <p className="leading-relaxed">
                  {translate("index.topics.card1.content")}
                </p>
              </div>
              <div className="md:w-1/3 my-10">
                <Image src={img2} alt="img2" className="hidden md:block" />
                <p className="font-oswald text-2xl mt-4 mb-2">
                  {translate("index.topics.card2.title")}
                </p>
                <p className="leading-relaxed">
                  {translate("index.topics.card2.content")}
                </p>
              </div>
              <div className="md:ml-6 md:w-1/3 my-10">
                <Image src={img3} alt="img3" className="hidden md:block" />
                <p className="font-oswald text-2xl mt-4 mb-2">
                  {translate("index.topics.card3.title")}
                </p>
                <p className="leading-relaxed">
                  {translate("index.topics.card3.content")}
                </p>
              </div>
            </div>
          </div>
        </div>
        {/* *** PROYECTS *** */}
        <div className="sm:layout py-10">
          <div className="h-24 flex justify-center items-center">
            <p className="font-cooperBold text-4xl">
              {translate("index.projects.title")}
            </p>
          </div>
          <CarruselProjects />
        </div>

        {/* *** JOIN US *** */}
        <CardLeft
          title="index.join.title"
          subtitle="index.join.subtitle"
          button="index.join.send"
          image={pexels1}
        />

        {/* *** SCIENTIFIC COLLABORATORS *** */}
        <div className="py-20 flex flex-col justify-start items-center">
          <div className="layout text-center">
            <p className="font-cooperBold text-zinc-900 text-4xl">
              {translate("index.scicollab.title")}
            </p>
          </div>
          {/* <Carrusel /> */}
        </div>
        {/* *** EU LOGO *** */}
        {/*<div className="layout bg-zinc-100 py-10">
          <p className="text-center text-xs text-zinc-700">
            {translate("index.last.project")}
          </p>
          <div className="flex justify-center">
            {images.map((image, index) => {
              return (
                <div className="sm:p-4" key={index}>
                  <Image
                    src={image}
                    alt="image"
                    className="my-4 mx-2 opacity-80 grayscale-[30%] max-w-[clamp(6rem,20vmin,20rem)] object-cover"
                  />
                </div>
              );
            })}
          </div>
        </div>*/}
      </Layout>
    </>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale)),
    },
  };
}
