import type { NextPage } from "next";
import Link from "next/link";
import { HeroSvg, LogoSvg } from "~/components/svgs";
import { useTranslation } from "~/providers/I18nProvider";
import { CodiceBox } from "~/components/codiceRicerca";
import { AccordionComp } from "~/components/accordionComp";
import { ArrowRight, Telescope } from "lucide-react";
import type { LangDict } from "~/i18n/locales";
import { PricingChoice } from "~/components/prezzi";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";

const Home: NextPage = () => {
  const { t } = useTranslation();

  return (
    <div className="mx-5 mt-0 mb-12 sm:mt-[2rem]">
      <main className="mx-auto mb-10 max-w-7xl space-y-5 lg:mb-20">
        <div className="flex flex-col items-center justify-center lg:flex-row lg:justify-around">
          <div className="xs:mt-5 -mt-2 flex h-[19rem] max-w-full items-center justify-center min-[22rem]:h-[23rem] min-[25rem]:h-[26rem]">
            <div className="flex scale-50 items-center justify-center drop-shadow-xl min-[20rem]:scale-[0.6] min-[22rem]:scale-[0.7] min-[25rem]:scale-[0.8] sm:scale-100 md:max-h-96">
              <HeroSvg />
            </div>
          </div>

          <TrovaCasaCTA testi={t} />
        </div>
      </main>
      <div className="w-full space-y-10 md:space-y-20">
        <FrequentSearches />

        <AccordionComp
          texts={t.index.accordion_minifaq}
          className="mb-4 max-w-4xl py-4 md:py-8"
        />

        <PricingChoice />
      </div>
    </div>
  );
};

export default Home;

const TrovaCasaCTA = (props: { testi: LangDict }) => {
  const { testi } = props;
  return (
    <div className="z-10 flex flex-col justify-center text-center sm:p-6 lg:max-w-lg">
      <h1 className="text-[2.5rem] leading-none font-bold min-[26rem]:text-5xl sm:text-6xl">
        {testi.index.titolo_1}
        <span className="text-red-500"> {testi.index.titolo_2}</span>{" "}
        {testi.index.titolo_3}
      </h1>
      <LogoSvg className="[&>text]:fill-primary [&>text]:stroke-primary h-[3rem] w-auto sm:h-[4rem] md:h-[5rem] [&>g]:fill-red-500" />
      <br />

      <div className="flex flex-col space-y-4 lg:justify-start">
        <Link
          href="/annunci"
          className="flex h-14 items-center justify-center gap-2 rounded-md bg-red-500 px-8 py-3 text-lg font-semibold text-white"
        >
          {testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
        </Link>

        <div className="relative mx-auto flex w-full gap-2">
          <CodiceBox
            key={"codiceBox"}
            className="rounded-md placeholder:text-center"
          />
        </div>
      </div>
    </div>
  );
};

const FrequentSearches = () => {
  const { locale } = useTranslation();
  return (
    <Card className="mx-auto mb-4 max-w-4xl gap-4 bg-sky-300">
      <CardHeader>
        <CardTitle className="text-center text-xl font-bold">
          {locale == "en" ? "Frequent Searches" : "Ricerche frequenti"}
        </CardTitle>
      </CardHeader>
      <CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-0 sm:px-4">
        <Link href="/annunci?comune=Bassano+del+Grappa">
          <Button className="flex items-center gap-2 text-lg">
            Affitti Bassano del Grappa
            <ArrowRight />
          </Button>
        </Link>

        <Link href="/annunci?tipo=Transitorio">
          <Button className="flex items-center gap-2 text-lg">
            Affitti Transitori
            <ArrowRight />
          </Button>
        </Link>
        <Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
          <Button className="flex items-center gap-2 text-lg">
            Affitti Transitori Bassano
            <ArrowRight />
          </Button>
        </Link>
        <Link href="/annunci?tipo=Stabile">
          <Button className="flex items-center gap-2 text-lg">
            Affitti Stabili
            <ArrowRight />
          </Button>
        </Link>
        <Link href="/annunci?comune=Marostica">
          <Button className="flex items-center gap-2 text-lg">
            Affitti Marostica
            <ArrowRight />
          </Button>
        </Link>
      </CardContent>
    </Card>
  );
};