import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Headset, RefreshCcw, ShieldCheck, Truck } from "lucide-react";
import { HomeHero } from "@/components/home-hero";
import { CategoryRow } from "@/components/category-row";
import { FeaturedTabs } from "@/components/featured-tabs";
import { CampaignBanner } from "@/components/campaign-banner";
import { BrandMarquee } from "@/components/brand-marquee";
import { Testimonials } from "@/components/testimonials";
import { Reveal } from "@/components/reveal";
import { getBrands, getCategories, getHomeCollections } from "@/lib/queries";
import { getAllDesignComponents, DEFAULT_COMPONENTS } from "@/lib/pet5";

export const dynamic = "force-dynamic";

const benefits = [
  {
    icon: Truck,
    title: "Aynı Gün Kargo",
    text: "Saat 16:00'a kadar verilen siparişler aynı gün yola çıkar.",
  },
  {
    icon: ShieldCheck,
    title: "Orijinal Ürün Garantisi",
    text: "Tüm ürünler resmi distribütörden, faturalı ve garantilidir.",
  },
  {
    icon: RefreshCcw,
    title: "14 Gün Kolay İade",
    text: "Patili dostun beğenmezse koşulsuz iade edebilirsin.",
  },
  {
    icon: Headset,
    title: "7/24 Pati Desteği",
    text: "Uzman ekibimiz mama seçiminden bakıma her konuda yanında.",
  },
];

export default async function HomePage() {
  const [categories, brands, collections, allComps] = await Promise.all([
    getCategories(),
    getBrands(),
    getHomeCollections(),
    getAllDesignComponents(),
  ]);

  const benefitsComp = allComps["home.benefits"] || DEFAULT_COMPONENTS["home.benefits"];
  const categoriesComp = allComps["home.categories"] || DEFAULT_COMPONENTS["home.categories"];
  const featuredComp = allComps["home.featured-tabs"] || DEFAULT_COMPONENTS["home.featured-tabs"];
  const campaignComp = allComps["home.campaign"] || DEFAULT_COMPONENTS["home.campaign"];
  const brandsComp = allComps["home.brands"] || DEFAULT_COMPONENTS["home.brands"];
  const testimonialsComp = allComps["home.testimonials"] || DEFAULT_COMPONENTS["home.testimonials"];

  return (
    <>
      <HomeHero />

      {categoriesComp.visible !== false && (
        <div data-pet5-id="home.categories">
          <CategoryRow categories={categories} />
        </div>
      )}

      {/* Güven şeridi */}
      {benefitsComp.visible !== false && (
        <section
          data-pet5-id="home.benefits"
          className="bg-white pb-14"
          style={{
            backgroundColor: benefitsComp.properties?.backgroundColor || "#ffffff",
          }}
        >
          <div className="mx-auto grid max-w-7xl gap-4 px-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-4">
            {benefits.map(({ icon: Icon, title, text }, i) => (
              <Reveal key={title} delay={i * 70}>
                <div className="flex h-full items-start gap-3.5 rounded-3xl border border-sand-dark/70 bg-cream/70 p-5 transition-all hover:-translate-y-1 hover:bg-white hover:shadow-lg hover:shadow-brand-500/10">
                  <span className="grid size-12 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-md shadow-brand-500/30">
                    <Icon className="size-6" aria-hidden />
                  </span>
                  <div>
                    <h3 className="font-display text-base font-extrabold text-ink">{title}</h3>
                    <p className="mt-1 text-xs font-semibold leading-relaxed text-mocha">{text}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {featuredComp.visible !== false && (
        <div data-pet5-id="home.featured-tabs">
          <FeaturedTabs collections={collections} />
        </div>
      )}

      {/* İkili promosyon kartları */}
      <section className="bg-white py-14">
        <div className="mx-auto grid max-w-7xl gap-5 px-4 sm:px-6 lg:grid-cols-2">
          <Reveal>
            <Link
              href="/urunler?kategori=kedi"
              className="group relative flex h-64 items-center overflow-hidden rounded-[2rem] bg-gradient-to-br from-[#FFD9B8] to-[#FFB26B] shadow-lg transition-all hover:-translate-y-1 hover:shadow-xl"
            >
              <div className="relative z-10 max-w-[55%] p-8">
                <span className="rounded-full bg-white/70 px-3 py-1 text-[11px] font-extrabold uppercase tracking-wider text-brand-800">
                  Kedi Dünyası
                </span>
                <h3 className="mt-3 font-display text-3xl font-extrabold leading-tight text-ink">
                  Kısır Kedi Mamalarında %25&apos;e Varan İndirim
                </h3>
                <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-extrabold text-ink underline decoration-brand-600 decoration-2 underline-offset-4 transition-colors group-hover:text-brand-800">
                  Hemen Keşfet
                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
                </span>
              </div>
              <div className="absolute -right-6 bottom-0 h-full w-[46%]">
                <Image
                  src="/images/products/kedi-kuru.png"
                  alt="Kedi mamaları"
                  fill
                  sizes="(max-width: 1024px) 50vw, 300px"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                  style={{ maskImage: "linear-gradient(to left, black 70%, transparent)", WebkitMaskImage: "linear-gradient(to left, black 70%, transparent)" }}
                />
              </div>
            </Link>
          </Reveal>

          <Reveal delay={90}>
            <Link
              href="/urunler?kategori=kopek"
              className="group relative flex h-64 items-center overflow-hidden rounded-[2rem] bg-gradient-to-br from-ink to-[#5a3a26] shadow-lg transition-all hover:-translate-y-1 hover:shadow-xl"
            >
              <div className="relative z-10 max-w-[55%] p-8">
                <span className="rounded-full bg-brand-500 px-3 py-1 text-[11px] font-extrabold uppercase tracking-wider text-white">
                  Köpek Dünyası
                </span>
                <h3 className="mt-3 font-display text-3xl font-extrabold leading-tight text-white">
                  Ödül ve Oyuncaklarda 2. Ürün %50 İndirimli
                </h3>
                <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-extrabold text-white underline decoration-brand-400 decoration-2 underline-offset-4 transition-colors group-hover:text-brand-200">
                  Hemen Keşfet
                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
                </span>
              </div>
              <div className="absolute -right-6 bottom-0 h-full w-[46%]">
                <Image
                  src="/images/products/odul.png"
                  alt="Köpek ödülleri"
                  fill
                  sizes="(max-width: 1024px) 50vw, 300px"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                  style={{ maskImage: "linear-gradient(to left, black 70%, transparent)", WebkitMaskImage: "linear-gradient(to left, black 70%, transparent)" }}
                />
              </div>
            </Link>
          </Reveal>
        </div>
      </section>

      {campaignComp.visible !== false && (
        <div data-pet5-id="home.campaign">
          <CampaignBanner />
        </div>
      )}

      {brandsComp.visible !== false && (
        <div data-pet5-id="home.brands">
          <BrandMarquee brands={brands} />
        </div>
      )}

      {testimonialsComp.visible !== false && (
        <div data-pet5-id="home.testimonials">
          <Testimonials />
        </div>
      )}
    </>
  );
}