import Link from 'next/link';
import { 
  ChevronDown, ArrowRight, ShoppingBag, TrendingUp, Star, 
  Palette, Shirt, Image as ImageIcon, MousePointerClick, Truck,
  Coffee, Package, Gift
} from 'lucide-react';

// Blueprint Category Mapping
const categoryMap: Record<string, string[]> = {
  "Apparel": [
    "T-Shirts", "Premium T-Shirts", "Polo Shirts", "Long Sleeve Shirts", 
    "Hoodies", "Sweatshirts", "Tank Tops", "Crop Tops", "Performance Wear"
  ],
  "Headwear": ["Caps", "Snapbacks", "Beanies"],
  "Accessories": ["Tote Bags", "Backpacks", "Socks", "Phone Cases", "Mouse Pads"],
  "Home & Lifestyle": ["Mugs", "Tumblers", "Water Bottles", "Posters", "Canvas Prints", "Stickers", "Journals"]
};

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white">
      
      {/* Category Navigation Bar (Desktop) */}
      <div className="hidden md:block border-b border-neutral-100 bg-white sticky top-0 z-50 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 pt-4 relative">
            
            <Link 
              href="/shop" 
              className="text-sm font-bold text-neutral-600 hover:text-neutral-900 transition-colors pb-4 -mb-[1px] border-b-2 border-transparent hover:border-neutral-900"
            >
              All Products
            </Link>

            {Object.entries(categoryMap).map(([category, subCategories]) => (
              <div key={category} className="relative group">
                <Link 
                  href={`/shop?category=${encodeURIComponent(category)}`}
                  className="text-sm font-bold text-neutral-600 hover:text-neutral-900 flex items-center gap-1 transition-colors pb-4 -mb-[1px] border-b-2 border-transparent hover:border-neutral-900"
                >
                  {category}
                  <ChevronDown className="w-4 h-4 opacity-50 group-hover:rotate-180 transition-transform duration-200" />
                </Link>

                <div className="absolute left-1/2 -translate-x-1/2 top-full mt-0 w-48 bg-white border border-neutral-100 shadow-xl rounded-b-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 overflow-hidden z-50">
                  <div className="py-2">
                    <Link
                      href={`/shop?category=${encodeURIComponent(category)}`}
                      className="block px-5 py-2.5 text-sm font-bold text-neutral-900 hover:bg-neutral-50"
                    >
                      All {category}
                    </Link>
                    {subCategories.map((sub) => (
                      <Link
                        key={sub}
                        href={`/shop?category=${encodeURIComponent(category)}&sub=${encodeURIComponent(sub)}`}
                        className="block px-5 py-2 text-sm text-neutral-600 hover:text-yellow-600 hover:bg-neutral-50 hover:pl-6 transition-all"
                      >
                        {sub}
                      </Link>
                    ))}
                  </div>
                </div>
              </div>
            ))}

            <Link 
              href="/gifting" 
              className="text-sm font-bold text-neutral-600 hover:text-neutral-900 transition-colors pb-4 -mb-[1px] border-b-2 border-transparent hover:border-neutral-900 flex items-center gap-1"
            >
              Gifting
            </Link>

          </div>
        </div>
      </div>

      {/* Hero Section */}
      <section className="relative bg-neutral-50 pt-16 pb-32 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="text-5xl md:text-7xl font-black text-neutral-900 tracking-tighter mb-6">
              Wear Your <span className="text-yellow-500">WOW</span>.
            </h1>
            <p className="text-lg md:text-xl text-neutral-600 mb-10 leading-relaxed">
              Discover premium print-on-demand apparel, exclusive headwear, and lifestyle accessories designed to make a statement. 
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link 
                href="/shop" 
                className="w-full sm:w-auto px-8 py-4 bg-neutral-900 text-white font-bold rounded-full hover:bg-yellow-500 hover:text-neutral-900 transition-all flex items-center justify-center gap-2 shadow-lg hover:shadow-xl hover:-translate-y-1"
              >
                <ShoppingBag className="w-5 h-5" />
                Shop Now
              </Link>
              
              <Link 
                href="/customizer" 
                className="w-full sm:w-auto px-8 py-4 bg-white text-neutral-900 font-bold rounded-full border border-neutral-200 hover:border-neutral-900 transition-all flex items-center justify-center gap-2"
              >
                <Palette className="w-5 h-5 text-neutral-500" />
                Create Your Own Design
              </Link>
            </div>
          </div>
        </div>

        {/* Decorative Background Elements */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none opacity-30">
           <div className="absolute top-20 left-10 w-64 h-64 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
           <div className="absolute top-20 right-10 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
           <div className="absolute -bottom-8 left-1/2 w-64 h-64 bg-yellow-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div>
        </div>
      </section>

      {/* Popular Categories */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between mb-12">
            <h2 className="text-3xl font-extrabold text-neutral-900 tracking-tight flex items-center gap-3">
              <Star className="w-8 h-8 text-yellow-500 fill-yellow-500" />
              Popular Categories
            </h2>
            <Link href="/shop" className="hidden sm:flex text-neutral-600 hover:text-yellow-600 font-bold items-center gap-1 transition-colors">
              View All <ArrowRight className="w-4 h-4" />
            </Link>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { 
                name: "Premium Tees", 
                cat: "Apparel", 
                link: "/shop?category=Apparel&sub=Premium%20T-Shirts", 
                img: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?q=80&w=600" 
              },
              { 
                name: "Caps & Beanies", 
                cat: "Headwear", 
                link: "/shop?category=Headwear", 
                img: "https://images.unsplash.com/photo-1556306535-0f09a537f0a3?q=80&w=600"
              },
              { 
                name: "Everyday Carry", 
                cat: "Accessories", 
                link: "/shop?category=Accessories", 
                img: "https://images.unsplash.com/photo-1544816155-12df9643f363?q=80&w=600" 
              },
              { 
                name: "Lifestyle Gear", 
                cat: "Home", 
                link: "/shop?category=Home%20%26%20Lifestyle", 
                img: "https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?q=80&w=600"
              },
            ].map((item, idx) => (
              <Link key={idx} href={item.link} className="group relative h-80 rounded-2xl overflow-hidden bg-neutral-100 flex items-end p-6">
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10"></div>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={item.img} alt={item.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                <div className="relative z-20 w-full transform transition-transform duration-300 group-hover:-translate-y-2">
                  <p className="text-yellow-400 font-bold text-sm tracking-wider uppercase mb-1">{item.cat}</p>
                  <h3 className="text-2xl font-black text-white mb-2">{item.name}</h3>
                  <span className="inline-flex items-center text-white/80 text-sm font-semibold group-hover:text-white transition-colors">
                    Shop Category <ArrowRight className="w-4 h-4 ml-1 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
                  </span>
                </div>
              </Link>
            ))}
          </div>
          
          <div className="mt-8 text-center sm:hidden">
            <Link href="/shop" className="inline-flex text-neutral-900 bg-neutral-100 px-6 py-3 rounded-full font-bold items-center gap-2 transition-colors hover:bg-neutral-200">
              View All Categories <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Create Your Own Design Section */}
      <section className="py-24 bg-neutral-900 text-white overflow-hidden relative">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,_var(--tw-gradient-stops))] from-neutral-800 via-neutral-900 to-neutral-900 opacity-50"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-yellow-500 font-bold tracking-widest uppercase text-sm mb-4">Create Your Own Design</h2>
            <h3 className="text-4xl md:text-5xl font-black mb-6 tracking-tight">Bring Your Ideas to Life</h3>
            <p className="text-lg text-neutral-400">
              Upload your logo, artwork, image, or design and we'll print it on premium-quality products.
            </p>
          </div>

          {/* 4-Step Process */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative mb-16">
            <div className="hidden lg:block absolute top-12 left-[12.5%] right-[12.5%] h-0.5 bg-neutral-800 z-0"></div>
            
            {[
              { step: "1", title: "Choose a Product", icon: Shirt },
              { step: "2", title: "Upload Your Design", icon: ImageIcon },
              { step: "3", title: "Customize & Preview", icon: MousePointerClick },
              { step: "4", title: "We Print & Ship", icon: Truck }
            ].map((item, idx) => (
              <div key={idx} className="relative z-10 flex flex-col items-center text-center">
                <div className="w-24 h-24 bg-neutral-800 rounded-full border-4 border-neutral-900 flex items-center justify-center mb-6 relative shadow-xl">
                  <span className="absolute -top-1 -right-1 w-8 h-8 bg-yellow-500 text-neutral-900 font-black rounded-full flex items-center justify-center border-2 border-neutral-900">
                    {item.step}
                  </span>
                  <item.icon className="w-10 h-10 text-white" />
                </div>
                <h4 className="text-xl font-bold text-white">{item.title}</h4>
              </div>
            ))}
          </div>

          <div className="text-center">
            <Link href="/customizer" className="inline-flex px-10 py-5 bg-yellow-500 text-neutral-900 font-black rounded-full hover:bg-yellow-400 transition-all duration-200 items-center gap-3 shadow-lg hover:scale-105">
              <Palette className="w-6 h-6" /> Start Designing
            </Link>
          </div>
        </div>
      </section>

      {/* Shop By Category Section */}
      <section className="py-24 bg-neutral-50 border-b border-neutral-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-black text-neutral-900 tracking-tight">Shop By Category</h2>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
            {[
              { name: "T-Shirts", icon: Shirt, link: "/shop?category=Apparel&sub=T-Shirts" },
              { name: "Hoodies", icon: Shirt, link: "/shop?category=Apparel&sub=Hoodies" },
              { name: "Caps", icon: ShoppingBag, link: "/shop?category=Headwear&sub=Caps" },
              { name: "Socks", icon: Package, link: "/shop?category=Accessories&sub=Socks" },
              { name: "Mugs", icon: Coffee, link: "/shop?category=Home%20%26%20Lifestyle&sub=Mugs" },
              { name: "Accessories", icon: Gift, link: "/shop?category=Accessories" },
            ].map((cat) => (
              <Link key={cat.name} href={cat.link} className="bg-white p-8 rounded-2xl border border-neutral-100 shadow-sm hover:shadow-md hover:border-yellow-500 transition-all flex flex-col items-center justify-center text-center group">
                <cat.icon className="w-10 h-10 text-neutral-400 group-hover:text-yellow-500 transition-colors mb-4" />
                <span className="font-bold text-neutral-900">{cat.name}</span>
              </Link>
            ))}
          </div>
          
          <div className="text-center">
            <Link href="/shop" className="inline-flex px-8 py-4 bg-neutral-900 text-white font-bold rounded-full hover:bg-neutral-800 transition-colors items-center gap-2">
              View All Products <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Row 1: About WowWear & Gifts/Personalized */}
      <section className="pt-24 pb-12 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
            
            {/* Left Side: About WowWear (1/3 Width) */}
            <div className="lg:col-span-1 flex flex-col justify-center">
              <h2 className="text-sm font-bold text-yellow-500 uppercase tracking-widest mb-4">About WowWear</h2>
              <h3 className="text-3xl font-black text-neutral-900 mb-6 tracking-tight">More Than Apparel. It's Your Identity.</h3>
              <p className="text-neutral-600 leading-relaxed mb-8">
                WowWear is a custom apparel and merchandise company dedicated to helping individuals, businesses, teams, and creators turn ideas into wearable products. From custom t-shirts and hoodies to branded merchandise and accessories, we make it easy to create something uniquely yours.
              </p>
              <p className="text-xl font-black text-neutral-900 italic">Wear Your WOW.</p>
            </div>

            {/* Right Side: Gifts & Personalized Products (2/3 Width) */}
            <div className="lg:col-span-2 bg-neutral-50 rounded-3xl p-8 sm:p-12 border border-neutral-100 shadow-sm">
              <h2 className="text-sm font-bold text-yellow-500 uppercase tracking-widest mb-4">Gifts & Personalized Products</h2>
              <h3 className="text-3xl md:text-4xl font-black text-neutral-900 mb-4 tracking-tight">Give a Gift They'll Actually Remember</h3>
              <p className="text-lg text-neutral-600 mb-10">Create meaningful gifts with custom designs, photos, logos, names, and messages.</p>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-10">
                <div className="flex gap-4">
                  <div className="mt-1"><Gift className="w-6 h-6 text-yellow-500 flex-shrink-0" /></div>
                  <div>
                    <h4 className="font-bold text-neutral-900 text-lg">Gift Cards</h4>
                    <p className="text-neutral-600 mt-1">Perfect for birthdays, holidays, graduations, and special occasions.</p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="mt-1"><Palette className="w-6 h-6 text-yellow-500 flex-shrink-0" /></div>
                  <div>
                    <h4 className="font-bold text-neutral-900 text-lg">Personalized Products</h4>
                    <p className="text-neutral-600 mt-1">Create one-of-a-kind gifts with photos, artwork, and custom messages.</p>
                  </div>
                </div>
                <div className="flex gap-4 sm:col-span-2">
                  <div className="mt-1"><Star className="w-6 h-6 text-yellow-500 flex-shrink-0" /></div>
                  <div>
                    <h4 className="font-bold text-neutral-900 text-lg">Perfect for Every Occasion</h4>
                    <p className="text-neutral-600 mt-1">Corporate gifts, family celebrations, events, and more.</p>
                  </div>
                </div>
              </div>

              <div className="flex flex-col sm:flex-row gap-4">
                <Link href="/shop?category=Gift%20Cards" className="px-8 py-4 bg-neutral-900 text-white font-bold rounded-full hover:bg-neutral-800 transition-colors text-center shadow-md">
                  Shop Gift Cards
                </Link>
                <Link href="/customizer" className="px-8 py-4 bg-white border-2 border-neutral-200 text-neutral-900 font-bold rounded-full hover:border-neutral-900 transition-colors text-center">
                  Create a Personalized Gift
                </Link>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Row 2: Why Choose WowWear & Business/Bulk Orders */}
      <section className="pb-24 pt-12 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
            
            {/* Left Side: Why Choose WowWear (2/3 Width) */}
            <div className="lg:col-span-2 bg-neutral-900 text-white rounded-3xl p-8 sm:p-12 shadow-lg relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-yellow-500/10 rounded-full blur-3xl -mr-20 -mt-20"></div>
              
              <h2 className="text-sm font-bold text-yellow-500 uppercase tracking-widest mb-8 relative z-10">Why Choose WowWear</h2>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-10 relative z-10">
                <div>
                  <div className="text-3xl mb-3">🎨</div>
                  <h4 className="font-bold text-white text-lg mb-2">Custom Printing Made Easy</h4>
                  <p className="text-neutral-400 text-sm leading-relaxed">Bring your creativity to life with personalized apparel and merchandise made just for you.</p>
                </div>
                <div>
                  <div className="text-3xl mb-3">🏆</div>
                  <h4 className="font-bold text-white text-lg mb-2">Premium Quality Products</h4>
                  <p className="text-neutral-400 text-sm leading-relaxed">Exceptional products created with attention to detail, quality materials, and professional printing.</p>
                </div>
                <div>
                  <div className="text-3xl mb-3">🇺🇸</div>
                  <h4 className="font-bold text-white text-lg mb-2">Fast U.S. Fulfillment</h4>
                  <p className="text-neutral-400 text-sm leading-relaxed">Reliable production and shipping across the United States.</p>
                </div>
                <div>
                  <div className="text-3xl mb-3">🔒</div>
                  <h4 className="font-bold text-white text-lg mb-2">Secure Ordering & Dedicated Support</h4>
                  <p className="text-neutral-400 text-sm leading-relaxed">Shop with confidence knowing your orders are protected and our team is here to help.</p>
                </div>
              </div>
            </div>

            {/* Right Side: Business & Bulk Orders (1/3 Width) */}
            <div className="lg:col-span-1 flex flex-col justify-center">
              <h2 className="text-sm font-bold text-yellow-500 uppercase tracking-widest mb-4">Business & Bulk Orders</h2>
              <h3 className="text-3xl font-black text-neutral-900 mb-6 tracking-tight">Custom Merchandise for Businesses & Events</h3>
              <p className="text-neutral-600 leading-relaxed mb-8">
                From branded apparel and promotional products to team uniforms and event merchandise, WowWear helps organizations create products that leave a lasting impression.
              </p>
              <Link href="/contact" className="inline-flex px-8 py-4 bg-yellow-500 text-neutral-900 font-bold rounded-full hover:bg-yellow-400 transition-colors w-max shadow-md">
                Request a Quote
              </Link>
            </div>

          </div>
        </div>
      </section>

    </div>
  );
}