import Link from "next/link";

export default function HomePage() {
  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Jost:wght@200;300;400;500&display=swap');

        .font-display { font-family: 'Cormorant Garamond', serif; }
        .font-body    { font-family: 'Jost', sans-serif; }

        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(24px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        @keyframes scaleIn {
          from { opacity: 0; transform: scale(0.96); }
          to   { opacity: 1; transform: scale(1); }
        }
        @keyframes lineGrow {
          from { width: 0; }
          to   { width: 4rem; }
        }

        .anim-1 { animation: fadeUp 0.9s ease 0.1s both; }
        .anim-2 { animation: fadeUp 0.9s ease 0.3s both; }
        .anim-3 { animation: fadeUp 0.9s ease 0.5s both; }
        .anim-4 { animation: fadeUp 0.9s ease 0.7s both; }
        .anim-5 { animation: fadeUp 0.9s ease 0.9s both; }
        .anim-fade { animation: fadeIn 1.2s ease 0.2s both; }
        .anim-scale { animation: scaleIn 1s ease 0.1s both; }

        .hero-bg {
          background: linear-gradient(135deg, #1a0f0a 0%, #2C1810 40%, #3d2218 70%, #1a0f0a 100%);
        }
        .gold-gradient {
          background: linear-gradient(135deg, #C9A84C, #e8c96a, #C9A84C);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .card-hover {
          transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .card-hover:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }
        .btn-gold {
          background: linear-gradient(135deg, #C9A84C, #b8962e);
          transition: all 0.3s ease;
        }
        .btn-gold:hover {
          background: linear-gradient(135deg, #b8962e, #a07820);
          transform: translateY(-1px);
          box-shadow: 0 8px 24px rgba(201,168,76,0.4);
        }
        .btn-outline-gold {
          border: 1px solid #C9A84C;
          color: #C9A84C;
          transition: all 0.3s ease;
        }
        .btn-outline-gold:hover {
          background: #C9A84C;
          color: white;
        }
        .texture-overlay {
          background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .divider-ornament::before,
        .divider-ornament::after {
          content: '';
          display: inline-block;
          width: 60px;
          height: 1px;
          background: linear-gradient(to right, transparent, #C9A84C);
          vertical-align: middle;
          margin: 0 16px;
        }
        .divider-ornament::after {
          background: linear-gradient(to left, transparent, #C9A84C);
        }
        .collection-card:hover .collection-overlay {
          opacity: 1;
        }
        .collection-overlay {
          opacity: 0;
          transition: opacity 0.4s ease;
        }
      `}</style>

      <div className="font-body">
        {/* ── HERO ─────────────────────────────────────────────── */}
        <section className="hero-bg texture-overlay relative flex min-h-[92vh] items-center overflow-hidden">
          {/* Decorative circles */}
          <div className="anim-fade absolute right-20 top-20 h-64 w-64 rounded-full border border-[#C9A84C]/10" />
          <div className="anim-fade absolute right-32 top-32 h-40 w-40 rounded-full border border-[#C9A84C]/10" />
          <div className="anim-fade absolute bottom-20 left-10 h-96 w-96 rounded-full border border-[#C9A84C]/5" />

          <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-16 px-6 py-24 lg:grid-cols-2">
            {/* Left */}
            <div className="space-y-8">
              <div className="anim-1">
                <span className="text-xs font-light uppercase tracking-[0.4em] text-[#C9A84C]">
                  The Groom's Destination
                </span>
              </div>

              <h1 className="font-display anim-2 text-6xl font-light leading-none text-white md:text-7xl lg:text-8xl">
                Dressed
                <br />
                <em className="gold-gradient font-semibold not-italic">
                  to Wed
                </em>
              </h1>

              <p className="anim-3 max-w-md text-sm font-light leading-relaxed tracking-wide text-gray-400">
                Where tradition meets elegance. Curated wedding ensembles for
                the modern groom — from the first fitting to the last dance.
              </p>

              <div className="anim-4 flex items-center gap-4">
                <Link href="/products">
                  <button className="btn-gold px-8 py-4 text-xs font-medium uppercase tracking-[0.25em] text-white">
                    Explore Collection
                  </button>
                </Link>
                <Link href="/store-locator">
                  <button className="btn-outline-gold px-8 py-4 text-xs font-medium uppercase tracking-[0.25em]">
                    Find a Store
                  </button>
                </Link>
              </div>

              {/* Stats */}
              <div className="anim-5 flex items-center gap-10 pt-4">
                {[
                  { num: "500+", label: "Designs" },
                  { num: "50+", label: "Stores" },
                  { num: "25+", label: "Years" },
                ].map((s) => (
                  <div key={s.label} className="text-center">
                    <div className="font-display text-3xl font-light text-[#C9A84C]">
                      {s.num}
                    </div>
                    <div className="mt-1 text-xs uppercase tracking-widest text-gray-500">
                      {s.label}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — placeholder image area */}
            <div className="anim-scale relative hidden lg:block">
              <div className="relative mx-auto aspect-[3/4] w-full max-w-md">
                <div className="absolute inset-0 rounded-sm border border-[#C9A84C]/20" />
                <div className="absolute inset-4 flex items-center justify-center rounded-sm bg-[#C9A84C]/5">
                  <div className="space-y-3 text-center">
                    <div className="mx-auto h-px w-16 bg-[#C9A84C]" />
                    <p className="text-xs uppercase tracking-[0.3em] text-[#C9A84C]/60">
                      Hero Image
                    </p>
                    <div className="mx-auto h-px w-16 bg-[#C9A84C]" />
                  </div>
                </div>
                {/* Corner ornaments */}
                <div className="absolute -left-3 -top-3 h-6 w-6 border-l border-t border-[#C9A84C]" />
                <div className="absolute -right-3 -top-3 h-6 w-6 border-r border-t border-[#C9A84C]" />
                <div className="absolute -bottom-3 -left-3 h-6 w-6 border-b border-l border-[#C9A84C]" />
                <div className="absolute -bottom-3 -right-3 h-6 w-6 border-b border-r border-[#C9A84C]" />
              </div>
            </div>
          </div>
        </section>

        {/* ── MARQUEE STRIP ────────────────────────────────────── */}
        <div className="overflow-hidden bg-[#C9A84C] py-3">
          <div className="flex animate-[marquee_20s_linear_infinite] gap-12 whitespace-nowrap">
            {Array(6)
              .fill(0)
              .map((_, i) => (
                <span
                  key={i}
                  className="flex items-center gap-12 text-xs uppercase tracking-[0.3em] text-white"
                >
                  Sherwani <span className="text-white/40">✦</span> Bandhgala{" "}
                  <span className="text-white/40">✦</span> Indo Western{" "}
                  <span className="text-white/40">✦</span> Kurta Sets{" "}
                  <span className="text-white/40">✦</span> Nehru Jacket
                </span>
              ))}
          </div>
          <style>{`
            @keyframes marquee {
              from { transform: translateX(0); }
              to { transform: translateX(-50%); }
            }
          `}</style>
        </div>

        {/* ── COLLECTIONS ──────────────────────────────────────── */}
        <section className="bg-[#FAF7F2] px-6 py-24">
          <div className="mx-auto max-w-7xl">
            {/* Section Header */}
            <div className="mb-16 space-y-4 text-center">
              <p className="text-xs uppercase tracking-[0.4em] text-[#C9A84C]">
                Curated For You
              </p>
              <h2 className="font-display text-5xl font-light text-[#2C1810]">
                Our Collections
              </h2>
              <div className="divider-ornament text-lg text-[#C9A84C]">✦</div>
            </div>

            {/* Grid */}
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              {[
                {
                  title: "Sherwani",
                  subtitle: "Royal Heritage",
                  desc: "Timeless grandeur for the big day",
                  href: "/products?category=sherwani",
                },
                {
                  title: "Bandhgala",
                  subtitle: "Modern Classic",
                  desc: "Sophisticated cuts for the refined groom",
                  href: "/products?category=bandhgala",
                },
                {
                  title: "Indo Western",
                  subtitle: "Fusion Style",
                  desc: "Where tradition meets contemporary",
                  href: "/products?category=indo-western",
                },
              ].map((col, i) => (
                <Link key={col.title} href={col.href}>
                  <div className="collection-card card-hover group relative cursor-pointer">
                    {/* Image placeholder */}
                    <div
                      className={`relative flex aspect-[3/4] items-center justify-center overflow-hidden ${
                        i === 0
                          ? "bg-[#2C1810]"
                          : i === 1
                            ? "bg-[#1a3a2a]"
                            : "bg-[#1a1a3a]"
                      }`}
                    >
                      <div className="z-10 space-y-2 text-center">
                        <div className="mx-auto h-px w-10 bg-[#C9A84C]" />
                        <p className="text-xs uppercase tracking-[0.3em] text-[#C9A84C]/60">
                          Image
                        </p>
                        <div className="mx-auto h-px w-10 bg-[#C9A84C]" />
                      </div>
                      {/* Overlay */}
                      <div className="collection-overlay absolute inset-0 flex items-end bg-black/40 p-6">
                        <span className="border-b border-white pb-1 text-xs uppercase tracking-[0.2em] text-white">
                          Shop Now
                        </span>
                      </div>
                    </div>
                    <div className="pb-2 pt-4">
                      <p className="text-[10px] uppercase tracking-[0.3em] text-[#C9A84C]">
                        {col.subtitle}
                      </p>
                      <h3 className="font-display mt-1 text-2xl font-light text-[#2C1810]">
                        {col.title}
                      </h3>
                      <p className="mt-1 text-xs tracking-wide text-gray-500">
                        {col.desc}
                      </p>
                    </div>
                  </div>
                </Link>
              ))}
            </div>

            <div className="mt-12 text-center">
              <Link href="/products">
                <button className="btn-outline-gold px-10 py-3.5 text-xs font-medium uppercase tracking-[0.25em] text-[#C9A84C]">
                  View All Collections
                </button>
              </Link>
            </div>
          </div>
        </section>

        {/* ── WHY US ───────────────────────────────────────────── */}
        <section className="bg-white px-6 py-24">
          <div className="mx-auto max-w-7xl">
            <div className="mb-16 space-y-4 text-center">
              <p className="text-xs uppercase tracking-[0.4em] text-[#C9A84C]">
                The Dulhe Saheb Promise
              </p>
              <h2 className="font-display text-5xl font-light text-[#2C1810]">
                Why Choose Us
              </h2>
              <div className="divider-ornament text-lg text-[#C9A84C]">✦</div>
            </div>

            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
              {[
                {
                  icon: "✦",
                  title: "Master Craftsmen",
                  desc: "Every piece handcrafted by artisans with decades of expertise in traditional Indian weaves.",
                },
                {
                  icon: "◈",
                  title: "Premium Fabrics",
                  desc: "Sourced from the finest mills — silk, brocade, velvet, and more for unmatched comfort.",
                },
                {
                  icon: "⬡",
                  title: "Perfect Fit",
                  desc: "Made-to-measure tailoring ensures you look and feel your absolute best on your wedding day.",
                },
                {
                  icon: "✿",
                  title: "Pan India Stores",
                  desc: "50+ stores across India with dedicated style consultants ready to guide your look.",
                },
              ].map((item) => (
                <div
                  key={item.title}
                  className="group space-y-4 p-6 text-center"
                >
                  <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full border border-[#C9A84C]/30 transition-all duration-300 group-hover:border-[#C9A84C] group-hover:bg-[#C9A84C]/5">
                    <span className="text-xl text-[#C9A84C]">{item.icon}</span>
                  </div>
                  <h3 className="font-display text-xl font-medium text-[#2C1810]">
                    {item.title}
                  </h3>
                  <p className="text-xs leading-relaxed tracking-wide text-gray-500">
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── FEATURED PRODUCTS ────────────────────────────────── */}
        <section className="bg-[#FAF7F2] px-6 py-24">
          <div className="mx-auto max-w-7xl">
            <div className="mb-16 space-y-4 text-center">
              <p className="text-xs uppercase tracking-[0.4em] text-[#C9A84C]">
                Handpicked
              </p>
              <h2 className="font-display text-5xl font-light text-[#2C1810]">
                Featured Pieces
              </h2>
              <div className="divider-ornament text-lg text-[#C9A84C]">✦</div>
            </div>

            <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
              {[
                { name: "Royal Sherwani", price: "₹24,999", tag: "Bestseller" },
                { name: "Bandhgala Suit", price: "₹18,499", tag: "New" },
                { name: "Indo Western Set", price: "₹15,999", tag: "" },
                { name: "Kurta Pajama", price: "₹8,999", tag: "New" },
              ].map((product, i) => (
                <div
                  key={product.name}
                  className="card-hover group cursor-pointer"
                >
                  <div className="relative aspect-[3/4] overflow-hidden bg-[#e8e0d5]">
                    {/* Image placeholder */}
                    <div className="flex h-full w-full items-center justify-center">
                      <div className="space-y-2 text-center">
                        <div className="mx-auto h-px w-8 bg-[#C9A84C]" />
                        <p className="text-[10px] uppercase tracking-widest text-[#C9A84C]/40">
                          Image
                        </p>
                        <div className="mx-auto h-px w-8 bg-[#C9A84C]" />
                      </div>
                    </div>
                    {product.tag && (
                      <span className="absolute left-3 top-3 bg-[#C9A84C] px-2 py-1 text-[10px] uppercase tracking-widest text-white">
                        {product.tag}
                      </span>
                    )}
                    <div className="absolute inset-0 flex items-end justify-center bg-black/0 pb-4 opacity-0 transition-all duration-300 group-hover:bg-black/10 group-hover:opacity-100">
                      <button className="bg-white px-6 py-2 text-[10px] font-medium uppercase tracking-widest text-[#2C1810]">
                        Quick View
                      </button>
                    </div>
                  </div>
                  <div className="space-y-1 pt-3">
                    <p className="text-[10px] uppercase tracking-[0.3em] text-[#C9A84C]">
                      Dulhe Saheb
                    </p>
                    <h4 className="font-display text-lg font-light text-[#2C1810]">
                      {product.name}
                    </h4>

                    <p className="text-sm font-light text-gray-600">
                      {product.price}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-12 text-center">
              <Link href="/products">
                <button className="btn-gold px-10 py-3.5 text-xs font-medium uppercase tracking-[0.25em] text-white">
                  Shop All Products
                </button>
              </Link>
            </div>
          </div>
        </section>

        {/* ── TESTIMONIALS ─────────────────────────────────────── */}
        <section className="texture-overlay bg-[#2C1810] px-6 py-24">
          <div className="mx-auto max-w-5xl">
            <div className="mb-16 space-y-4 text-center">
              <p className="text-xs uppercase tracking-[0.4em] text-[#C9A84C]">
                Love Stories
              </p>
              <h2 className="font-display text-5xl font-light text-white">
                What Grooms Say
              </h2>
              <div className="divider-ornament text-lg text-[#C9A84C]">✦</div>
            </div>

            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              {[
                {
                  name: "Rahul Sharma",
                  city: "Delhi",
                  text: "The sherwani was absolutely stunning. The craftsmanship and attention to detail was beyond my expectations. I felt like a king on my wedding day.",
                },
                {
                  name: "Arjun Mehta",
                  city: "Mumbai",
                  text: "From the fitting to the final delivery, the experience was seamless. My family couldn't stop complimenting the outfit. Truly a masterpiece.",
                },
                {
                  name: "Vikram Singh",
                  city: "Jaipur",
                  text: "The bandhgala suit they crafted for me was perfect. The fabric quality is outstanding and the fit was impeccable. Highly recommend.",
                },
              ].map((t) => (
                <div
                  key={t.name}
                  className="space-y-4 border border-white/10 bg-white/5 p-6"
                >
                  <div className="font-display text-2xl text-[#C9A84C]">"</div>
                  <p className="text-sm font-light leading-relaxed text-gray-300">
                    {t.text}
                  </p>
                  <div className="border-t border-white/10 pt-2">
                    <p className="font-display text-sm font-medium text-white">
                      {t.name}
                    </p>
                    <p className="text-xs tracking-wide text-gray-500">
                      {t.city}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── STORE LOCATOR BANNER ─────────────────────────────── */}
        <section className="bg-[#FAF7F2] px-6 py-20">
          <div className="mx-auto max-w-4xl space-y-6 text-center">
            <p className="text-xs uppercase tracking-[0.4em] text-[#C9A84C]">
              Visit Us
            </p>
            <h2 className="font-display text-5xl font-light text-[#2C1810]">
              Find Your Nearest Store
            </h2>
            <p className="mx-auto max-w-xl text-sm leading-relaxed tracking-wide text-gray-500">
              Walk in and experience the Dulhe Saheb difference. Our style
              consultants are ready to help you find the perfect ensemble.
            </p>
            <div className="divider-ornament text-lg text-[#C9A84C]">✦</div>
            <Link href="/store-locator">
              <button className="btn-gold px-10 py-4 text-xs font-medium uppercase tracking-[0.25em] text-white">
                Locate a Store
              </button>
            </Link>
          </div>
        </section>
      </div>
    </>
  );
}
