'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import ProductCard from '@/components/product/ProductCard';
import { useToastStore } from '@/lib/store';
import type { Product, Category } from '@/lib/types';

interface Props {
  products: Product[];
  categories: Category[];
}

const CATEGORY_COUNTS: Record<string, number> = {
  laptops: 234, phones: 189, tvs: 156, headphones: 312,
  cameras: 98, tablets: 143, speakers: 201, 'smart-home': 175,
};

const CAT_BG_COLORS: Record<string, string> = {
  laptops: 'bg-blue-50', phones: 'bg-green-50', tvs: 'bg-purple-50', headphones: 'bg-orange-50',
  cameras: 'bg-red-50', tablets: 'bg-teal-50', speakers: 'bg-pink-50', 'smart-home': 'bg-yellow-50',
};

export default function HomeClient({ products, categories }: Props) {
  const hotDeals = products.filter(p => (p.original_price ?? 0) > p.price).slice(0, 4);
  const allProducts = products.slice(0, 8);
  const trending = [...products].sort((a, b) => b.reviews_count - a.reviews_count).slice(0, 4);
  const newArrivals = products.filter(p => p.badge === 'New').concat(products.filter(p => p.badge !== 'New')).slice(0, 4);

  const [bestsellersFilter, setBestsellersFilter] = useState('all');
  const filteredBestsellers = bestsellersFilter === 'all'
    ? allProducts
    : products.filter(p => {
        const cat = categories.find(c => c.id === p.category_id);
        return cat?.slug === bestsellersFilter;
      }).slice(0, 8);

  // Countdown timer
  const [timer, setTimer] = useState({ h: '08', m: '45', s: '30' });
  useEffect(() => {
    let totalSecs = 8 * 3600 + 45 * 60 + 30;
    const interval = setInterval(() => {
      if (totalSecs <= 0) return;
      totalSecs--;
      setTimer({
        h: String(Math.floor(totalSecs / 3600)).padStart(2, '0'),
        m: String(Math.floor((totalSecs % 3600) / 60)).padStart(2, '0'),
        s: String(totalSecs % 60).padStart(2, '0'),
      });
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const toast = useToastStore(s => s.show);

  // Hero featured products (specific ones like original: iPhone, Sony, MacBook, Samsung TV)
  const heroProducts = [
    products.find(p => p.slug === 'iphone-15-pro-max') || products[0],
    products.find(p => p.slug === 'sony-wh1000xm5') || products[1],
    products.find(p => p.slug === 'macbook-pro-14-m3') || products[2],
    products.find(p => p.slug === 'samsung-65-qled') || products[3],
  ].filter(Boolean);

  return (
    <>
      {/* ========== HERO SECTION ========== */}
      <section className="hero-gradient hero-pattern relative overflow-hidden">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-20 -right-20 w-96 h-96 bg-blue-400 rounded-full opacity-10 blur-3xl"></div>
          <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-accent rounded-full opacity-5 blur-3xl"></div>
          <div className="absolute bottom-0 right-1/3 w-80 h-80 bg-blue-300 rounded-full opacity-10 blur-3xl"></div>
        </div>
        <div className="max-w-7xl mx-auto px-4 py-12 md:py-20 relative">
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="text-white space-y-5 fade-in-up">
              <div className="inline-flex items-center gap-2 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-full px-4 py-1.5 text-sm text-accent font-semibold">
                🔥 Summer Tech Sale — Up to 40% OFF
              </div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-black leading-tight" style={{ textShadow: '0 2px 12px rgba(0,0,0,0.4)' }}>
                Next-Gen Tech<br /><span className="text-accent">Delivered</span> to<br />Your Door
              </h1>
              <p className="text-lg max-w-md leading-relaxed" style={{ color: 'black' }}>Shop the latest electronics from top brands. Unbeatable prices, fast delivery, and expert support.</p>
              <div className="flex flex-wrap gap-3">
                <Link href="/category" className="btn-accent px-7 py-3.5 rounded-xl font-bold text-base shadow-xl inline-flex items-center gap-2">
                  Shop Now
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
                </Link>
                <a href="#deals" className="glass text-white px-7 py-3.5 rounded-xl font-semibold text-base hover:bg-white hover:bg-opacity-20 transition-colors inline-flex items-center gap-2">
                  Today&apos;s Deals
                </a>
              </div>
              <div className="flex items-center gap-6 pt-2">
                <div className="text-center"><div className="text-2xl font-black text-accent">50K+</div><div className="text-xs text-blue-200">Products</div></div>
                <div className="w-px h-10 bg-white bg-opacity-20"></div>
                <div className="text-center"><div className="text-2xl font-black text-accent">200+</div><div className="text-xs text-blue-200">Brands</div></div>
                <div className="w-px h-10 bg-white bg-opacity-20"></div>
                <div className="text-center"><div className="text-2xl font-black text-accent">2M+</div><div className="text-xs text-blue-200">Customers</div></div>
              </div>
            </div>
            <div className="relative hidden md:block">
              <div className="relative z-10">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-4">
                    {heroProducts.slice(0, 2).map(p => (
                      <Link key={p.id} href={`/products/${p.id}`} className="bg-white bg-opacity-10 rounded-2xl overflow-hidden border border-white border-opacity-20 hover:scale-105 transition-transform duration-300 block">
                        <img src={p.image_url} alt={p.name} className="w-full h-36 object-cover" />
                        <div className="p-3"><p className="text-xs font-semibold" style={{ color: 'black' }}>{p.name.split(' ').slice(0, 3).join(' ')}</p><p className="text-accent text-sm font-bold">${p.price.toFixed(2)}</p></div>
                      </Link>
                    ))}
                  </div>
                  <div className="space-y-4 mt-8">
                    {heroProducts.slice(2, 4).map(p => (
                      <Link key={p.id} href={`/products/${p.id}`} className="bg-white bg-opacity-10 rounded-2xl overflow-hidden border border-white border-opacity-20 hover:scale-105 transition-transform duration-300 block">
                        <img src={p.image_url} alt={p.name} className="w-full h-36 object-cover" />
                        <div className="p-3"><p className="text-xs font-semibold" style={{ color: 'black' }}>{p.name.split(' ').slice(0, 3).join(' ')}</p><p className="text-accent text-sm font-bold">${p.price.toFixed(2)}</p></div>
                      </Link>
                    ))}
                  </div>
                </div>
              </div>
              <div className="absolute -top-4 -right-4 bg-accent text-primary px-3 py-1.5 rounded-full font-black text-sm shadow-xl animate-bounce">40% OFF</div>
              <div className="absolute -bottom-4 left-0 bg-green-500 text-white px-3 py-1.5 rounded-full font-bold text-xs shadow-xl flex items-center gap-1">✓ Free 2-Day Shipping</div>
            </div>
          </div>
        </div>
        {/* Wave bottom */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg viewBox="0 0 1440 40" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 40L1440 40L1440 10C1200 30 960 40 720 35C480 30 240 10 0 20L0 40Z" fill="#f8f9fb"/>
          </svg>
        </div>
      </section>

      {/* ========== PROMO BANNERS STRIP ========== */}
      <section className="py-6 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div className="flex items-center gap-3 bg-white rounded-xl p-3.5 shadow-sm border border-gray-100">
              <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0 text-xl">🚚</div>
              <div><p className="text-xs font-bold text-gray-800">Free Shipping</p><p className="text-xs text-gray-500">On orders $49+</p></div>
            </div>
            <div className="flex items-center gap-3 bg-white rounded-xl p-3.5 shadow-sm border border-gray-100">
              <div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center shrink-0 text-xl">�</div>
              <div><p className="text-xs font-bold text-gray-800">30-Day Returns</p><p className="text-xs text-gray-500">Hassle-free returns</p></div>
            </div>
            <div className="flex items-center gap-3 bg-white rounded-xl p-3.5 shadow-sm border border-gray-100">
              <div className="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center shrink-0 text-xl">🛡️</div>
              <div><p className="text-xs font-bold text-gray-800">2-Year Warranty</p><p className="text-xs text-gray-500">On all products</p></div>
            </div>
            <div className="flex items-center gap-3 bg-white rounded-xl p-3.5 shadow-sm border border-gray-100">
              <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center shrink-0 text-xl">💬</div>
              <div><p className="text-xs font-bold text-gray-800">24/7 Support</p><p className="text-xs text-gray-500">Expert help always</p></div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== SHOP BY CATEGORY ========== */}
      <section className="py-10 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-2xl md:text-3xl font-black text-gray-900">Shop by Category</h2>
              <div className="section-divider w-16 mt-2"></div>
            </div>
            <Link href="/category" className="text-primary font-semibold text-sm hover:text-primary-light flex items-center gap-1">View All <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/></svg></Link>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
            {categories.map(cat => (
              <Link key={cat.id} href={`/category/${cat.slug}`} className="category-card bg-white rounded-2xl p-4 shadow-sm hover:shadow-lg border border-gray-100 text-center group">
                <div className={`w-12 h-12 ${CAT_BG_COLORS[cat.slug] || 'bg-blue-50'} rounded-xl flex items-center justify-center mx-auto mb-3 text-2xl group-hover:bg-primary group-hover:scale-110 transition-all duration-200`}>
                  {cat.icon}
                </div>
                <p className="text-xs font-bold text-gray-800">{cat.name}</p>
                <p className="text-xs text-gray-400 mt-0.5">{CATEGORY_COUNTS[cat.slug] || 0} items</p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ========== FEATURED DEALS BANNER ========== */}
      <section id="deals" className="py-8 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-4">
            <div className="md:col-span-2 relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary to-primary-light shadow-xl min-h-52">
              <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=800&q=60&auto=format&fit=crop" alt="MacBook Deal" className="absolute inset-0 w-full h-full object-cover opacity-25" />
              <div className="relative p-8 h-full flex flex-col justify-between">
                <div>
                  <span className="inline-block bg-accent text-primary text-xs font-black px-3 py-1 rounded-full mb-3">LIMITED TIME OFFER</span>
                  <h3 className="text-white text-3xl font-black leading-tight mb-2">MacBook Pro M3<br />Up to $200 OFF</h3>
                  <p className="text-blue-200 text-sm">Pro performance for professional creators. Free accessories included.</p>
                </div>
                <div className="flex items-center gap-4 mt-6">
                  <Link href="/category/laptops" className="btn-accent px-6 py-2.5 rounded-xl font-bold text-sm">Shop Now</Link>
                  <div className="text-white text-sm">Starting at <span className="font-black text-accent text-lg">$1,999</span></div>
                </div>
              </div>
            </div>
            <div className="space-y-4">
              <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-purple-700 to-purple-900 shadow-lg min-h-24">
                <img src="https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&q=60&auto=format&fit=crop" alt="iPhone" className="absolute inset-0 w-full h-full object-cover opacity-25" />
                <div className="relative p-5">
                  <span className="text-purple-200 text-xs font-bold">NEW ARRIVAL</span>
                  <h3 className="text-white font-black text-lg">iPhone 15 Series</h3>
                  <p className="text-purple-200 text-xs mb-3">Titanium design. A17 Pro chip.</p>
                  <Link href="/category/phones" className="inline-block bg-white text-purple-900 text-xs font-bold px-4 py-1.5 rounded-lg">Explore</Link>
                </div>
              </div>
              <div className="relative overflow-hidden rounded-2xl shadow-lg min-h-24" style={{ background: 'linear-gradient(135deg, #FF6B6B, #FF8E53)' }}>
                <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=60&auto=format&fit=crop" alt="Headphones" className="absolute inset-0 w-full h-full object-cover opacity-25" />
                <div className="relative p-5">
                  <span className="text-red-100 text-xs font-bold">FLASH SALE</span>
                  <h3 className="text-white font-black text-lg">Sony Headphones</h3>
                  <p className="text-red-100 text-xs mb-3">Save up to 25% today only!</p>
                  <Link href="/category/headphones" className="inline-block bg-white text-red-700 text-xs font-bold px-4 py-1.5 rounded-lg">Grab Deal</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== HOT DEALS COUNTDOWN ========== */}
      <section className="py-10 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center text-xl">🔥</div>
              <div>
                <h2 className="text-2xl font-black text-gray-900">Hot Deals</h2>
                <p className="text-sm text-gray-500">Flash deals ending soon</p>
              </div>
              <div className="hidden md:flex items-center gap-2 ml-4 bg-gray-900 rounded-xl px-4 py-2">
                <span className="text-gray-400 text-sm">Ends in:</span>
                <span className="timer-box text-white text-sm">{timer.h}</span>
                <span className="text-white font-bold">:</span>
                <span className="timer-box text-white text-sm">{timer.m}</span>
                <span className="text-white font-bold">:</span>
                <span className="timer-box text-white text-sm">{timer.s}</span>
              </div>
            </div>
            <Link href="/category" className="text-primary font-semibold text-sm hover:text-primary-light flex items-center gap-1">View All <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/></svg></Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {hotDeals.map(p => <ProductCard key={p.id} product={p} />)}
          </div>
        </div>
      </section>

      {/* ========== WIDE PROMO BANNER ========== */}
      <section className="py-6 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="relative overflow-hidden rounded-2xl shadow-xl" style={{ background: 'linear-gradient(135deg, #0f2d6e 0%, #1565c0 50%, #1976d2 100%)' }}>
            <div className="absolute inset-0">
              <img src="https://images.unsplash.com/photo-1498049794561-7780e7231661?w=1200&q=60&auto=format&fit=crop" alt="Electronics" className="w-full h-full object-cover opacity-15" />
              <div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 70% 50%, rgba(255,215,0,0.15) 0%, transparent 60%)' }}></div>
            </div>
            <div className="relative grid md:grid-cols-2 items-center px-8 py-10 gap-6">
              <div className="text-white">
                <span className="bg-accent text-primary text-xs font-black px-3 py-1 rounded-full mb-3 inline-block">EXCLUSIVE MEMBERS DEAL</span>
                <h2 className="text-3xl md:text-4xl font-black leading-tight mb-3">Join SceneKey+<br />Save <span className="text-accent">Extra 15%</span></h2>
                <p className="text-blue-100 mb-5">Members get exclusive deals, early access to sales, free expedited shipping & more.</p>
                <div className="flex gap-3">
                  <Link href="/login" className="btn-accent px-6 py-3 rounded-xl font-bold text-sm">Join Free Today</Link>
                  <span className="text-white border border-white border-opacity-30 px-6 py-3 rounded-xl font-semibold text-sm hover:bg-white hover:bg-opacity-10 transition-colors cursor-pointer">Learn More</span>
                </div>
              </div>
              <div className="hidden md:grid grid-cols-3 gap-3">
                {[
                  { emoji: '🚚', text: 'Free Express Shipping' },
                  { emoji: '💰', text: '15% Off Sitewide' },
                  { emoji: '⚡', text: 'Early Access Sales' },
                  { emoji: '🎁', text: 'Birthday Rewards' },
                  { emoji: '💬', text: 'Priority Support' },
                  { emoji: '🔖', text: 'Exclusive Coupons' },
                ].map((b, i) => (
                  <div key={i} className="bg-white bg-opacity-10 rounded-xl p-4 text-center border border-white border-opacity-10">
                    <div className="text-3xl mb-1">{b.emoji}</div>
                    <p className="text-white text-xs font-semibold">{b.text}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== BEST SELLERS ========== */}
      <section className="py-10 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-2xl md:text-3xl font-black text-gray-900">Best Sellers</h2>
              <div className="section-divider w-16 mt-2"></div>
            </div>
            <Link href="/category" className="text-primary font-semibold text-sm hover:text-primary-light flex items-center gap-1">View All <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/></svg></Link>
          </div>
          {/* Category Filter Pills */}
          <div className="flex gap-2 mb-6 overflow-x-auto category-scroll pb-2">
            {[
              { label: 'All', value: 'all' },
              { label: 'Laptops', value: 'laptops' },
              { label: 'Phones', value: 'phones' },
              { label: 'TVs', value: 'tvs' },
              { label: 'Audio', value: 'headphones' },
              { label: 'Cameras', value: 'cameras' },
            ].map(pill => (
              <button key={pill.value} onClick={() => setBestsellersFilter(pill.value)}
                className={`shrink-0 px-4 py-2 rounded-full text-sm font-semibold transition-colors ${bestsellersFilter === pill.value ? 'bg-primary text-white' : 'bg-white text-gray-700 hover:bg-primary hover:text-white border border-gray-200'}`}>
                {pill.label}
              </button>
            ))}
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {filteredBestsellers.map(p => <ProductCard key={p.id} product={p} />)}
          </div>
        </div>
      </section>

      {/* ========== LARGE CATEGORY VISUAL BANNERS ========== */}
      <section className="py-8 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-4">
            {[
              { slug: 'cameras', img: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=600&q=80&auto=format&fit=crop', sub: 'Capture Every Moment', title: 'Cameras & Lenses' },
              { slug: 'tablets', img: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=600&q=80&auto=format&fit=crop', sub: 'Work & Play Anywhere', title: 'Tablets & iPads' },
              { slug: 'smart-home', img: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80&auto=format&fit=crop', sub: 'Automate Your Life', title: 'Smart Home' },
            ].map(b => (
              <Link key={b.slug} href={`/category/${b.slug}`} className="relative overflow-hidden rounded-2xl shadow-lg group h-56 block">
                <img src={b.img} alt={b.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-70"></div>
                <div className="absolute bottom-4 left-4">
                  <p className="text-white text-xs font-semibold opacity-80 mb-1">{b.sub}</p>
                  <h3 className="text-white text-xl font-black">{b.title}</h3>
                  <span className="inline-block mt-2 text-xs text-white bg-white bg-opacity-20 px-3 py-1 rounded-full">Shop Now →</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ========== TRENDING NOW ========== */}
      <section className="py-10 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-2xl md:text-3xl font-black text-gray-900">Trending Now ⚡</h2>
              <div className="section-divider w-16 mt-2"></div>
            </div>
            <Link href="/category" className="text-primary font-semibold text-sm hover:text-primary-light flex items-center gap-1">View All <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/></svg></Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {trending.map(p => <ProductCard key={p.id} product={p} />)}
          </div>
        </div>
      </section>

      {/* ========== BRAND LOGOS ========== */}
      <section className="py-10 bg-white border-y border-gray-100">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-center text-lg font-bold text-gray-500 uppercase tracking-widest mb-8">Top Brands We Carry</h2>
          <div className="overflow-hidden">
            <div className="marquee-track flex items-center gap-16">
              <div className="flex items-center gap-16 shrink-0">
                {['APPLE', 'SONY', 'SAMSUNG', 'DELL', 'LG', 'BOSE', 'GOOGLE', 'MICROSOFT'].map(b => (
                  <div key={b} className="text-3xl font-black text-gray-300 hover:text-primary transition-colors cursor-pointer">{b}</div>
                ))}
              </div>
              <div className="flex items-center gap-16 shrink-0">
                {['APPLE', 'SONY', 'SAMSUNG', 'DELL', 'LG', 'BOSE', 'GOOGLE', 'MICROSOFT'].map(b => (
                  <div key={b + '2'} className="text-3xl font-black text-gray-300 hover:text-primary transition-colors cursor-pointer">{b}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== NEW ARRIVALS ========== */}
      <section className="py-10 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-2xl md:text-3xl font-black text-gray-900">New Arrivals 🆕</h2>
              <div className="section-divider w-16 mt-2"></div>
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {newArrivals.map(p => <ProductCard key={p.id} product={p} />)}
          </div>
        </div>
      </section>

      {/* ========== NEWSLETTER ========== */}
      <section className="py-14 bg-gradient-to-br from-primary to-primary-light">
        <div className="max-w-2xl mx-auto px-4 text-center">
          <div className="text-5xl mb-4">✉️</div>
          <h2 className="text-3xl font-black text-white mb-3">Get Exclusive Deals in Your Inbox</h2>
          <p className="text-blue-100 mb-8">Subscribe to our newsletter and be the first to know about sales, new products, and tech tips.</p>
          <form className="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto" onSubmit={e => { e.preventDefault(); toast('🎉 Successfully subscribed! Check your inbox.', 'success'); (e.target as HTMLFormElement).reset(); }}>
            <input type="email" placeholder="Enter your email address" required className="flex-1 px-5 py-3.5 rounded-xl text-gray-800 focus:outline-none shadow-lg text-sm" />
            <button type="submit" className="btn-accent px-7 py-3.5 rounded-xl font-bold text-sm shrink-0 shadow-lg">Subscribe Now</button>
          </form>
          <p className="text-blue-200 text-xs mt-3">No spam, unsubscribe any time. By subscribing you agree to our <a href="#" className="underline hover:text-white">Privacy Policy</a>.</p>
        </div>
      </section>
    </>
  );
}