import Link from "next/link";
import type { Metadata } from "next";
import { getHomeContent, listSanityProducts } from "@/lib/sanity/queries";
import { urlForSanityImage } from "@/lib/sanity/client";
import { Hero } from "@/components/store/hero";
import { HomeProductsCarousel } from "@/components/store/home-products-carousel";
import { ReassuranceSection } from "@/components/store/reassurance-section";
import { ExperienceSection } from "@/components/store/experience-section";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";

export const metadata: Metadata = {
  title: "Boutique personnalisable",
  description: "Découvrez des créations personnalisées pour anniversaires, baptêmes et fêtes.",
  alternates: {
    canonical: "/",
  },
};

export default async function Home() {
  const [products, home, siteText] = await Promise.all([listSanityProducts(12), getHomeContent(), getResolvedSiteText()]);
  const selectedCarouselProducts = (home?.featuredProducts || []).filter((product) => {
    return Boolean(product && product._id && product.handle && product.status === "publish" && product.isActive !== false);
  });
  const fallbackProducts = products.filter((product) => Boolean(product && product._id && product.handle));
  const carouselProducts = selectedCarouselProducts.length > 0 ? selectedCarouselProducts : fallbackProducts;

  const heroTitle = home?.heroTitle || text(siteText, "home.heroFallbackTitle");
  const heroSubtitle = home?.heroSubtitle || text(siteText, "home.heroFallbackSubtitle");
  const heroImage = urlForSanityImage(home?.heroImage);

  const features = [
    { title: text(siteText, "home.feature.1.title"), text: text(siteText, "home.feature.1.text") },
    { title: text(siteText, "home.feature.2.title"), text: text(siteText, "home.feature.2.text") },
    { title: text(siteText, "home.feature.3.title"), text: text(siteText, "home.feature.3.text") },
  ];

  return (
    <div className="space-y-16 pb-10 md:space-y-20">
      <Hero title={heroTitle} subtitle={heroSubtitle} imageUrl={heroImage} />

      {home?.reassurance && <ReassuranceSection reassurance={home.reassurance} />}

      <section className="grid gap-4 md:grid-cols-3">
        {features.map((item) => (
          <article
            key={item.title}
            className="reveal-soft rounded-[1.6rem] border border-[var(--accent-3)] bg-[linear-gradient(160deg,#ffffff_0%,#fff3f3_100%)] p-5 shadow-[0_12px_26px_rgba(49,18,18,0.06)]"
          >
            <h3 className="font-serif text-2xl text-[var(--foreground)]">{item.title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">{item.text}</p>
          </article>
        ))}
      </section>

      <section className="space-y-6">
        <div className="flex items-end justify-between gap-4">
          <h2 className="font-serif text-4xl text-[var(--foreground)] md:text-5xl">{text(siteText, "home.favoriteTitle")}</h2>
          <Link href="/boutique" className="text-sm font-semibold text-[var(--accent-3)] hover:text-[var(--accent-2)]">
            {text(siteText, "home.favoriteCta")}
          </Link>
        </div>

        <HomeProductsCarousel products={carouselProducts} />
      </section>

      <ExperienceSection
        primaryButtonText={text(siteText, "home.experiencePrimary")}
        secondaryButtonText={text(siteText, "home.experienceSecondary")}
      />
    </div>
  );
}