import Link from "next/link";
import { HeroCarousel } from "@/components/home/HeroCarousel";
import { VisionStory } from "@/components/home/VisionStory";
import { BrandMarquee } from "@/components/marketing/BrandMarquee";
import { HomeWorlds } from "@/components/home/HomeWorlds";
import { HomeFeatured } from "@/components/home/HomeFeatured";
import { HomeClubSpotlight } from "@/components/home/HomeClubSpotlight";
import { HomeAccessories } from "@/components/home/HomeAccessories";
import { fetchStoreProducts } from "@/lib/medusa";
import { Truck, RefreshCw, ShieldCheck, Headphones } from "lucide-react";

const trust = [
  { icon: Truck, title: "Envíos rápidos", text: "A todo Colombia", href: "/shop" },
  {
    icon: RefreshCw,
    title: "Cambios fáciles",
    text: "Hasta 30 días",
    href: "/cambios-y-devoluciones",
  },
  { icon: ShieldCheck, title: "Pagos seguros", text: "Compra 100% protegida" },
  { icon: Headphones, title: "Atención personalizada", text: "Estamos para ayudarte" },
];

export default async function HomePage() {
  const products = await fetchStoreProducts();

  return (
    <>
      <HeroCarousel />
      <BrandMarquee
        size="md"
        phrases={[
          "Para la cancha. Para después. Para ti.",
          "Club 1976",
          "Clásico. Femenino. Atemporal.",
          "Classic is always in style",
          "Sporty Elegance",
        ]}
      />
      <VisionStory />
      <HomeWorlds />
      <HomeFeatured products={products} />
      <HomeClubSpotlight />
      <HomeAccessories products={products} />

      <section className="bg-ot-cream border-t border-black/5">
        <div className="ot-container py-10 grid grid-cols-2 lg:grid-cols-4 gap-6">
          {trust.map(({ icon: Icon, title, text, href }) => {
            const inner = (
              <>
                <Icon className="text-ot-gold mt-0.5 shrink-0" size={22} />
                <div>
                  <p className="font-medium tracking-wide text-sm uppercase">
                    {title}
                  </p>
                  <p className="text-sm text-ot-muted mt-0.5">{text}</p>
                </div>
              </>
            );
            return href ? (
              <Link
                key={title}
                href={href}
                className="flex items-start gap-3 hover:opacity-80 transition"
              >
                {inner}
              </Link>
            ) : (
              <div key={title} className="flex items-start gap-3">
                {inner}
              </div>
            );
          })}
        </div>
      </section>
    </>
  );
}