import { ArrowRight, CalendarDays, CheckCircle2 } from "lucide-react";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { siteConfig } from "@/config/site";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

type HomePageProps = {
  params: Promise<{ locale: string }>;
};

export default async function HomePage({ params }: HomePageProps) {
  const { locale } = await params;
  setRequestLocale(locale);

  const t = await getTranslations("HomePage");

  const facts = [
    t("facts.guests", { count: siteConfig.maxGuests }),
    t("facts.bedrooms", { count: siteConfig.bedrooms }),
    t("facts.beds", { count: siteConfig.beds }),
    t("facts.baths", { count: siteConfig.baths }),
  ];

  return (
    <div className="limestone-surface">
      <section className="mx-auto grid min-h-[calc(100vh-3.5rem)] w-full max-w-7xl items-center gap-12 px-4 py-10 sm:px-6 lg:grid-cols-[1fr_0.86fr] lg:px-8">
        <div className="flex flex-col gap-10">
          <div className="flex flex-col gap-4">
            <Badge variant="outline" className="w-fit bg-background">
              {t("eyebrow")}
            </Badge>
            <h1 className="max-w-4xl text-5xl font-semibold leading-[0.94] tracking-tight text-balance-pretty sm:text-6xl lg:text-7xl">
              {t("title")}
            </h1>
            <p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
              {t("description")}
            </p>
          </div>

          <div className="flex flex-col gap-4 border-y py-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="grid gap-2 sm:grid-cols-3">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
                  {t("bookingBar.checkIn")}
                </p>
                <p className="font-medium">{t("bookingBar.addDate")}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
                  {t("bookingBar.checkOut")}
                </p>
                <p className="font-medium">{t("bookingBar.addDate")}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
                  {t("bookingBar.guests")}
                </p>
                <p className="font-medium">{t("bookingBar.guestCount")}</p>
              </div>
            </div>
            <Link
              href="/availability-booking"
              className={cn(buttonVariants({ size: "lg" }), "sm:self-stretch")}
            >
              <CalendarDays data-icon="inline-start" />
              {t("bookingBar.action")}
            </Link>
          </div>
        </div>

        <div className="relative min-h-[430px] overflow-hidden border bg-card">
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{
              backgroundImage:
                "url('/media/generated/minimal-paros-light-api.webp')",
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background/80" />
          <div className="absolute bottom-8 left-8 right-8 flex flex-col gap-5 border bg-background/92 p-5 backdrop-blur">
            <p className="text-xs font-medium uppercase tracking-[0.18em] text-primary">
              {t("mediaPanel.eyebrow")}
            </p>
            <p className="text-3xl font-semibold leading-tight tracking-tight">
              {t("mediaPanel.title")}
            </p>
            <p className="text-sm leading-6 text-muted-foreground">
              {t("mediaPanel.body")}
            </p>
          </div>
        </div>
      </section>

      <section className="border-y bg-card">
        <div className="mx-auto grid max-w-7xl gap-4 px-4 py-6 sm:grid-cols-4 sm:px-6 lg:px-8">
          {facts.map((fact) => (
            <div key={fact} className="flex items-center gap-2 text-sm">
              <CheckCircle2 className="text-primary" />
              <span>{fact}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-12 px-4 py-20 sm:px-6 lg:grid-cols-[0.8fr_1.2fr] lg:px-8">
        <div className="flex flex-col gap-4">
          <p className="text-sm font-medium uppercase tracking-[0.18em] text-primary">
            {t("story.eyebrow")}
          </p>
          <h2 className="text-4xl font-semibold leading-tight tracking-tight text-balance-pretty">
            {t("story.title")}
          </h2>
        </div>
        <div className="grid gap-8 md:grid-cols-2">
          {[0, 1, 2, 3].map((index) => (
            <article key={index} className="flex flex-col gap-3">
              <p className="text-2xl font-semibold tracking-tight">
                {t(`story.items.${index}.title`)}
              </p>
              <p className="text-sm leading-6 text-muted-foreground">
                {t(`story.items.${index}.body`)}
              </p>
            </article>
          ))}
        </div>
      </section>

      <section className="bg-primary text-primary-foreground">
        <div className="mx-auto flex max-w-7xl flex-col gap-8 px-4 py-16 sm:px-6 lg:flex-row lg:items-end lg:justify-between lg:px-8">
          <div className="flex max-w-3xl flex-col gap-4">
            <p className="text-sm font-medium uppercase tracking-[0.18em] opacity-80">
              {t("finalCta.eyebrow")}
            </p>
            <h2 className="text-4xl font-semibold leading-tight tracking-tight text-balance-pretty">
              {t("finalCta.title")}
            </h2>
          </div>
          <Link
            href="/availability-booking"
            className={cn(buttonVariants({ variant: "secondary", size: "lg" }))}
          >
            {t("finalCta.action")}
            <ArrowRight data-icon="inline-end" />
          </Link>
        </div>
      </section>

      <Separator />
    </div>
  );
}