export default function LightClosetsHomepage() {
  const categories = [
    {
      title: 'Luxury Formals',
      image:
        'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Ready To Wear',
      image:
        'https://images.unsplash.com/photo-1496747611176-843222e1e57c?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Unstitched',
      image:
        'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Eid Collection',
      image:
        'https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1200&auto=format&fit=crop',
    },
  ];

  const products = [
    {
      title: 'Emerald Luxury Suit',
      price: '£89',
      image:
        'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Pastel Embroidered Dress',
      price: '£74',
      image:
        'https://images.unsplash.com/photo-1495385794356-15371f348c31?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Classic Eid Collection',
      price: '£99',
      image:
        'https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?q=80&w=1200&auto=format&fit=crop',
    },
  ];

  return (
    <div className="bg-white text-neutral-900 min-h-screen">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white border-b border-neutral-200">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-semibold tracking-wide">Light Closets</h1>

          <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
            <a href="#" className="hover:text-neutral-500">Home</a>
            <a href="#" className="hover:text-neutral-500">New Arrivals</a>
            <a href="#" className="hover:text-neutral-500">Luxury</a>
            <a href="#" className="hover:text-neutral-500">Ready To Wear</a>
            <a href="#" className="hover:text-neutral-500">Contact</a>
          </nav>

          <div className="flex items-center gap-4 text-sm">
            <button>Search</button>
            <button>Cart (0)</button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative h-[80vh] overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?q=80&w=1800&auto=format&fit=crop"
          alt="Fashion Hero"
          className="absolute inset-0 w-full h-full object-cover"
        />

        <div className="absolute inset-0 bg-black/40" />

        <div className="relative z-10 h-full flex items-center justify-center text-center px-6">
          <div className="max-w-3xl text-white">
            <p className="uppercase tracking-[6px] text-sm mb-4">
              Luxury Pakistani Fashion
            </p>

            <h2 className="text-5xl md:text-7xl font-light leading-tight mb-6">
              Eid Collection 2026
            </h2>

            <p className="text-lg md:text-xl text-neutral-200 mb-8">
              Discover premium eastern wear designed for elegance, comfort,
              and timeless style.
            </p>

            <button className="bg-white text-black px-8 py-4 rounded-full font-medium hover:scale-105 transition-transform">
              Shop Collection
            </button>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="max-w-7xl mx-auto px-4 py-20">
        <div className="flex items-center justify-between mb-10">
          <div>
            <p className="uppercase text-sm tracking-[4px] text-neutral-500 mb-2">
              Categories
            </p>
            <h3 className="text-4xl font-light">Shop By Collection</h3>
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {categories.map((item, index) => (
            <div
              key={index}
              className="group relative overflow-hidden rounded-3xl h-[420px]"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-full object-cover group-hover:scale-110 transition duration-700"
              />

              <div className="absolute inset-0 bg-black/30" />

              <div className="absolute bottom-6 left-6 text-white">
                <h4 className="text-2xl font-medium mb-2">{item.title}</h4>
                <button className="text-sm underline underline-offset-4">
                  Explore
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Featured Products */}
      <section className="bg-neutral-50 py-20">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-12">
            <p className="uppercase text-sm tracking-[4px] text-neutral-500 mb-3">
              Featured Products
            </p>
            <h3 className="text-4xl font-light">Trending This Week</h3>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {products.map((product, index) => (
              <div
                key={index}
                className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition duration-300"
              >
                <div className="overflow-hidden">
                  <img
                    src={product.image}
                    alt={product.title}
                    className="w-full h-[420px] object-cover hover:scale-105 transition duration-700"
                  />
                </div>

                <div className="p-6">
                  <h4 className="text-xl font-medium mb-2">{product.title}</h4>
                  <p className="text-neutral-500 mb-5">{product.price}</p>

                  <button className="w-full border border-black py-3 rounded-full hover:bg-black hover:text-white transition">
                    Add To Cart
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand Section */}
      <section className="max-w-7xl mx-auto px-4 py-24 grid lg:grid-cols-2 gap-16 items-center">
        <div>
          <img
            src="https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1600&auto=format&fit=crop"
            alt="Brand Story"
            className="rounded-3xl w-full h-[650px] object-cover"
          />
        </div>

        <div>
          <p className="uppercase tracking-[4px] text-sm text-neutral-500 mb-4">
            About Brand
          </p>

          <h3 className="text-5xl font-light leading-tight mb-8">
            Designed For Modern Eastern Fashion
          </h3>

          <p className="text-lg text-neutral-600 leading-8 mb-6">
            Light Closets combines luxury Pakistani fashion with modern ecommerce
            experience. From festive wear to elegant everyday collections, we
            deliver timeless eastern outfits for women across the UK and beyond.
          </p>

          <button className="bg-black text-white px-8 py-4 rounded-full hover:opacity-90 transition">
            Learn More
          </button>
        </div>
      </section>

      {/* Newsletter */}
      <section className="bg-black text-white py-20">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <p className="uppercase tracking-[4px] text-sm text-neutral-400 mb-4">
            Join Community
          </p>

          <h3 className="text-4xl md:text-5xl font-light mb-6">
            Get Exclusive Launch Offers
          </h3>

          <div className="flex flex-col sm:flex-row gap-4 mt-8">
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-6 py-4 rounded-full text-black outline-none"
            />

            <button className="bg-white text-black px-8 py-4 rounded-full font-medium hover:scale-105 transition-transform">
              Subscribe
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-neutral-200 py-10">
        <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
          <div>
            <h4 className="text-2xl font-semibold">Light Closets</h4>
            <p className="text-neutral-500 mt-2 text-sm">
              Luxury Eastern Wear for Modern Women
            </p>
          </div>

          <div className="flex gap-6 text-sm text-neutral-600">
            <a href="#">Instagram</a>
            <a href="#">TikTok</a>
            <a href="#">Pinterest</a>
            <a href="#">WhatsApp</a>
          </div>
        </div>
      </footer>
    </div>
  );
}