import UbaidiChat from './UbaidiChat';
import React, { useState, useEffect, useRef } from 'react';
import AppDownloadBanner from './AppDownloadBanner';
import { Product, SiteSettings } from '../types';
import { getColorScheme } from '../lib/themeColors';
import {
  ShoppingBag, Star, Truck, RefreshCw, ShieldCheck,
  Clock, Gift, Zap, ArrowRight, ChevronRight, Eye,
  Instagram, Heart, Sparkles, TrendingUp, Package
} from 'lucide-react';

interface HomePageProps {
  settings: SiteSettings;
  featuredProducts: Product[];
  isProductsLoaded: boolean;
  navigateTo: (view: string) => void;
  setDirectCheckoutProduct: (data: { product: Product }) => void;
  onAddToCart?: (product: Product) => void;
  onSelectProduct: (product: Product) => void;
}

const FEATURED_CATEGORIES = [
  { name: 'Dresses',    image: 'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=400&h=500&fit=crop', emoji: '👗' },
  { name: 'Tops',       image: 'https://images.unsplash.com/photo-1434389674359-2d8e7b2e7b1a?w=400&h=500&fit=crop', emoji: '👕' },
  { name: 'Bottoms',    image: 'https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=400&h=500&fit=crop', emoji: '👖' },
  { name: 'Outerwear',  image: 'https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=400&h=500&fit=crop', emoji: '🧥' },
  { name: 'Footwear',   image: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=500&fit=crop', emoji: '👟' },
  { name: 'Bags',       image: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=500&fit=crop', emoji: '👜' },
  { name: 'Jewelry',    image: 'https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=500&fit=crop', emoji: '💍' },
  { name: 'Activewear', image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=400&h=500&fit=crop', emoji: '🏃' },
];

const TESTIMONIALS = [
  { id: 1, name: 'Sarah Johnson', location: 'New York, USA',    image: 'https://randomuser.me/api/portraits/women/44.jpg', text: 'Absolutely love the quality! The fabric is premium and fits are perfect. Will definitely order again!', rating: 5 },
  { id: 2, name: 'Michael Chen',  location: 'Toronto, Canada',  image: 'https://randomuser.me/api/portraits/men/32.jpg',   text: 'Great service and fast shipping. The jacket exceeded all my expectations. Highly recommended!', rating: 5 },
  { id: 3, name: 'Emily Davis',   location: 'London, UK',       image: 'https://randomuser.me/api/portraits/women/68.jpg', text: 'Trendy and affordable pieces! This is my go-to fashion destination now. Love everything!', rating: 5 },
  { id: 4, name: 'Aisha Rahman',  location: 'Dhaka, BD',        image: 'https://randomuser.me/api/portraits/women/25.jpg', text: 'Best online fashion store! The quality is amazing and delivery was super fast. 5 stars!', rating: 5 },
];

const INSTAGRAM_FEED = [
  'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=400&h=400&fit=crop',
  'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&h=400&fit=crop',
  'https://images.unsplash.com/photo-1445205170230-053b83016050?w=400&h=400&fit=crop',
  'https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=400&h=400&fit=crop',
  'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400&h=400&fit=crop',
  'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=400&h=400&fit=crop',
];

const DEMO_PRODUCTS: Product[] = [
  { id: '1',  name: 'Elegant Summer Dress',   price: 2500, image: 'https://images.unsplash.com/photo-1572804013309-82a89b4fbc11?w=400&h=500&fit=crop', category: 'Dresses',     description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '2',  name: 'Classic Denim Jacket',   price: 3200, image: 'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=400&h=500&fit=crop', category: 'Outerwear',   description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '3',  name: 'Cotton Basics T-Shirt',  price: 800,  image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=500&fit=crop', category: 'Tops',        description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '4',  name: 'High-Waist Jeans',       price: 2100, image: 'https://images.unsplash.com/photo-1541099649105-f69ad21f3246?w=400&h=500&fit=crop', category: 'Bottoms',     description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '5',  name: 'Floral Maxi Skirt',      price: 1800, image: 'https://images.unsplash.com/photo-1583496661160-c5bb7af6e771?w=400&h=500&fit=crop', category: 'Bottoms',     description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '6',  name: 'Leather Crossbody Bag',  price: 4500, image: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=400&h=500&fit=crop', category: 'Accessories', description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '7',  name: 'Comfortable Sneakers',   price: 3800, image: 'https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=400&h=500&fit=crop', category: 'Shoes',       description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '8',  name: 'Cozy Knit Sweater',      price: 2200, image: 'https://images.unsplash.com/photo-1434389673669-e08b4cac3105?w=400&h=500&fit=crop', category: 'Tops',        description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '9',  name: 'Formal Office Blazer',   price: 4800, image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=400&h=500&fit=crop', category: 'Outerwear',   description: '', gallery: [], nameBangla: '', highlight: '' },
  { id: '10', name: 'Silk Party Blouse',      price: 1500, image: 'https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?w=400&h=500&fit=crop', category: 'Tops',        description: '', gallery: [], nameBangla: '', highlight: '' },
];

// ─── Stars ───────────────────────────────────────
const Stars = ({ count = 5, size = 11 }: { count?: number; size?: number }) => (
  <div style={{ display: 'flex', gap: 1 }}>
    {[1,2,3,4,5].map(i => (
      <span key={i} style={{ color: i <= count ? '#F59E0B' : '#E5E7EB', fontSize: size }}>★</span>
    ))}
  </div>
);

// ─── Wishlist Heart ───────────────────────────────
const WishHeart = ({ productId }: { productId: string }) => {
  const [liked, setLiked] = useState(false);
  return (
    <button
      onClick={(e) => { e.stopPropagation(); setLiked(l => !l); }}
      style={{
        width: 32, height: 32, borderRadius: '50%',
        background: liked ? '#FEE2E2' : 'rgba(255,255,255,0.9)',
        border: 'none', cursor: 'pointer', display: 'flex',
        alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
        transition: 'all .2s', backdropFilter: 'blur(8px)',
      }}
    >
      <Heart size={14} fill={liked ? '#EF4444' : 'none'} color={liked ? '#EF4444' : '#64748B'} />
    </button>
  );
};

// ─── Product Card ─────────────────────────────────
interface HP05CardProps {
  product: Product;
  isNew?: boolean;
  isOnSale?: boolean;
  onCart: () => void;
  onBuy: () => void;
  onSelect: () => void;
}
const ProductCard: React.FC<HP05CardProps> = ({
  product, isNew, isOnSale, onCart, onBuy, onSelect
}) => {
  const [hovered, setHovered] = useState(false);
  const salePrice = isOnSale ? Math.round(product.price * 0.7) : product.price;
  const discount = isOnSale ? 30 : 0;

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: '#fff', borderRadius: 20, overflow: 'hidden',
        border: '1px solid #F1F5F9',
        boxShadow: hovered ? '0 20px 60px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.04)',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all .35s cubic-bezier(.4,0,.2,1)',
        display: 'flex', flexDirection: 'column',
      }}
    >
      {/* Image */}
      <div
        onClick={onSelect}
        style={{ position: 'relative', aspectRatio: '3/4', overflow: 'hidden', background: '#F8FAFC', cursor: 'pointer' }}
      >
        {isNew && (
          <span style={{ position: 'absolute', top: 10, left: 10, zIndex: 10, background: '#1A1A1A', color: '#fff', fontSize: 9, fontWeight: 900, padding: '3px 8px', borderRadius: 4, letterSpacing: '0.1em', textTransform: 'uppercase' as const }}>NEW</span>
        )}
        {isOnSale && (
          <span style={{ position: 'absolute', top: 10, right: 10, zIndex: 10, background: 'linear-gradient(135deg,#EF4444,#DC2626)', color: '#fff', fontSize: 9, fontWeight: 900, padding: '3px 8px', borderRadius: 4 }}>-{discount}%</span>
        )}
        <div style={{ position: 'absolute', top: isNew ? 38 : 10, right: 10, zIndex: 10 }}>
          <WishHeart productId={product.id} />
        </div>
        <img
          src={product.image} alt={product.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', transform: hovered ? 'scale(1.08)' : 'scale(1)', transition: 'transform .6s cubic-bezier(.4,0,.2,1)' }}
          loading="lazy"
        />
        {/* Quick view overlay */}
        <div style={{
          position: 'absolute', bottom: 0, insetInline: 0,
          background: 'rgba(15,23,42,0.85)', backdropFilter: 'blur(8px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: '12px 0',
          transform: hovered ? 'translateY(0)' : 'translateY(100%)',
          transition: 'transform .3s cubic-bezier(.4,0,.2,1)',
        }}>
          <Eye size={13} color="#ffffff" />
          <span style={{ color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>Quick View</span>
        </div>
      </div>

      {/* Info */}
      <div style={{ padding: '14px 14px 14px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <Stars count={5} size={10} />
        <p
          onClick={onSelect}
          style={{ fontSize: 13, fontWeight: 600, color: '#1E293B', margin: '6px 0 4px', lineHeight: 1.35, cursor: 'pointer', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' as const }}
        >
          {product.name}
        </p>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 12, marginTop: 2 }}>
          <span style={{ fontSize: 16, fontWeight: 900, color: '#1A1A1A' }}>৳{salePrice.toLocaleString()}</span>
          {isOnSale && <span style={{ fontSize: 11, color: '#94A3B8', textDecoration: 'line-through' }}>৳{product.price.toLocaleString()}</span>}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 'auto' }}>
          <button
            onClick={(e) => { e.stopPropagation(); onCart(); }}
            style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              background: '#1A1A1A', color: '#fff', fontSize: 11, fontWeight: 700,
              padding: '10px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
              transition: 'background .15s',
            }}
            onMouseEnter={e => (e.currentTarget.style.background = '#333')}
            onMouseLeave={e => (e.currentTarget.style.background = '#1A1A1A')}
          >
            <ShoppingBag size={11} strokeWidth={2.5} /> Cart
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onBuy(); }}
            style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              background: '#F8FAFC', color: '#1A1A1A', fontSize: 11, fontWeight: 700,
              padding: '10px 0', borderRadius: 10, border: '1.5px solid #E2E8F0', cursor: 'pointer',
              transition: 'all .15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = '#1A1A1A'; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#F8FAFC'; e.currentTarget.style.color = '#1A1A1A'; }}
          >
            <Zap size={11} strokeWidth={2.5} /> কিনুন
          </button>
        </div>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════
//  MAIN COMPONENT
// ════════════════════════════════════════════════
const HomePage05: React.FC<HomePageProps> = ({
  settings, featuredProducts, isProductsLoaded, navigateTo,
  setDirectCheckoutProduct, onAddToCart, onSelectProduct
}) => {
  const [activeTab, setActiveTab] = useState('featured');
  const [tickerPaused, setTickerPaused] = useState(false);
  const [heroLoaded, setHeroLoaded] = useState(false);

  useEffect(() => { setTimeout(() => setHeroLoaded(true), 100); }, []);

  let homeConfig: import('../types').HomePageConfig | null = null;
  if (settings.homePageJson) {
    try { homeConfig = JSON.parse(settings.homePageJson); } catch {}
  }

  const heroImage    = homeConfig?.theme05?.heroImage    || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600&h=900&fit=crop';
  const heroTitle    = homeConfig?.theme05?.heroTitle    || 'New Summer Collection';
  const heroSubtitle = homeConfig?.theme05?.heroSubtitle || 'Discover the latest trends in fashion.';
  const promoImage   = homeConfig?.theme05?.promoImage   || 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1920&h=500&fit=crop';
  const promoTagline = homeConfig?.theme05?.promoTagline || 'Limited Time Offer';
  const promoTitle   = homeConfig?.theme05?.promoTitle   || 'Summer Sale';
  const promoSubtitle= homeConfig?.theme05?.promoSubtitle|| 'Up to 50% off on selected items';

  const displayProducts = featuredProducts?.length > 0 ? featuredProducts : DEMO_PRODUCTS;

  let displayCategories = [...FEATURED_CATEGORIES];
  if (settings.categoriesJson) {
    try {
      const parsed = JSON.parse(settings.categoriesJson);
      if (Array.isArray(parsed) && parsed.length > 0) {
        displayCategories = [
          ...displayCategories,
          ...parsed.map((c: any) => ({ name: c.name, image: c.image || FEATURED_CATEGORIES[0].image, emoji: '🛍' }))
        ];
      }
    } catch {}
  }

  const schemeIdx = homeConfig?.theme05?.colorScheme;
  const cs = schemeIdx !== undefined ? getColorScheme(schemeIdx) : null;
  const accent = cs?.primary || '#1A1A1A';

  const adminTestimonials = homeConfig?.theme05?.testimonials;
  const testimonials = adminTestimonials?.length ? adminTestimonials : TESTIMONIALS;

  const adminIgImages = homeConfig?.theme05?.instagramImages;
  const igImages = adminIgImages?.length ? adminIgImages : INSTAGRAM_FEED;
  const igHandle = homeConfig?.theme05?.instagramHandle || '@shophyfast';

  const getTabProducts = () => {
    const TAB_CONFIG: Record<string, string[] | undefined> = {
      featured:    homeConfig?.theme05?.featuredIds,
      bestsellers: homeConfig?.theme05?.bestSellersIds,
      newarrivals: homeConfig?.theme05?.newArrivalsIds,
      onsale:      homeConfig?.theme05?.onSaleIds,
    };
    const ids = TAB_CONFIG[activeTab];
    if (ids?.length) {
      const filtered = ids.map((id: string) => displayProducts.find(p => p.id === id)).filter(Boolean) as Product[];
      return filtered.length > 0 ? filtered : displayProducts.slice(0, 8);
    }
    return displayProducts.slice(0, 8);
  };

  const addCart = (p: Product): void => { if (onAddToCart) onAddToCart(p); else setDirectCheckoutProduct({ product: p }); };
  const buyNow  = (p: Product): void => { setDirectCheckoutProduct({ product: p }); };

  const TICKER_ITEMS = ['✦ Free Shipping on orders over ৳1000', '✦ New Summer Collection is Live!', '✦ Up to 50% off on selected items', '✦ Easy 30-Day Returns', '✦ 24/7 Customer Support'];

  return (
    <div style={{ background: '#fff', fontFamily: "'Inter','Poppins',sans-serif", color: '#1A1A1A' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
        .hp05-fade-in { animation: hp05FadeIn .7s ease forwards; }
        @keyframes hp05FadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        .hp05-ticker { animation: hp05Tick 30s linear infinite; }
        @keyframes hp05Tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        .hp05-ticker-paused { animation-play-state:paused; }
        .no-scrollbar::-webkit-scrollbar { display:none; }
        .no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
      `}</style>

      {cs && <style dangerouslySetInnerHTML={{ __html: `.hp05-accent{color:${cs.primary}!important}.hp05-accent-bg{background:${cs.primary}!important}` }} />}

      {/* ── Coupon Bar ─────────────────────────── */}
      {((settings.marketingCoupons?.filter(c => c.showOnHome)?.length) || 0) > 0 && (
        <div style={{ background: '#1A1A1A', overflow: 'hidden' }}>
          <div style={{ display: 'flex', gap: 32, padding: '10px 20px', flexWrap: 'wrap', justifyContent: 'center' }}>
            {settings.marketingCoupons!.filter(c => c.showOnHome).map(coupon => (
              <div key={coupon.id} style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#fff', fontSize: 12, fontWeight: 700 }}>
                <Gift size={13} style={{ color: '#FBD38D', animation: 'pulse 2s infinite' }} />
                <span>{coupon.discountDesc} · Code:</span>
                <span style={{ background: 'rgba(255,255,255,.15)', border: '1px solid rgba(255,255,255,.25)', padding: '2px 8px', borderRadius: 4, fontFamily: 'monospace', letterSpacing: '0.1em' }}>{coupon.code}</span>
                <button onClick={() => navigator.clipboard.writeText(coupon.code)}
                  style={{ background: '#fff', color: '#1A1A1A', fontSize: 10, fontWeight: 900, padding: '2px 8px', borderRadius: 99, border: 'none', cursor: 'pointer' }}>
                  Copy
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Announcement Ticker ───────────────── */}
      <div
        style={{ background: `${accent}`, overflow: 'hidden', borderBottom: '1px solid rgba(255,255,255,.1)' }}
        onMouseEnter={() => setTickerPaused(true)}
        onMouseLeave={() => setTickerPaused(false)}
      >
        <div className={`hp05-ticker ${tickerPaused ? 'hp05-ticker-paused' : ''}`}
          style={{ display: 'flex', gap: 60, padding: '9px 0', whiteSpace: 'nowrap' as const }}>
          {[...TICKER_ITEMS, ...TICKER_ITEMS].map((item, i) => (
            <span key={i} style={{ fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: '0.05em', flexShrink: 0 }}>{item}</span>
          ))}
        </div>
      </div>

      {/* ══════════════════════════════════════════
          MOBILE (md:hidden)
      ══════════════════════════════════════════ */}
      <div className="md:hidden">

        {/* Hero — cinematic full-bleed */}
        <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '9/14' }}>
          <img src={heroImage} alt="Fashion Hero"
            style={{ width: '100%', height: '100%', objectFit: 'cover', transform: heroLoaded ? 'scale(1.04)' : 'scale(1.1)', transition: 'transform 1.2s ease', opacity: heroLoaded ? 1 : 0 }}
            onLoad={() => setHeroLoaded(true)} />
          {/* Gradient overlays */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%)' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(0,0,0,.2) 0%,transparent 60%)' }} />

          {/* Hero text */}
          <div style={{ position: 'absolute', bottom: 0, insetInline: 0, padding: '28px 20px 32px' }} className="hp05-fade-in">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'rgba(255,255,255,.15)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,.3)', borderRadius: 99, padding: '4px 12px', marginBottom: 14 }}>
              <Sparkles size={10} color="#FBD38D" />
              <span style={{ fontSize: 10, fontWeight: 700, color: '#fff', letterSpacing: '0.15em', textTransform: 'uppercase' as const }}>New Arrival 2025</span>
            </div>
            <h1 style={{ fontSize: 30, fontWeight: 300, color: '#fff', lineHeight: 1.15, marginBottom: 10, fontFamily: "'Playfair Display', serif", fontStyle: 'italic' }}>
              {heroTitle}
            </h1>
            <p style={{ color: 'rgba(255,255,255,.75)', fontSize: 13, marginBottom: 20, lineHeight: 1.6 }}>{heroSubtitle}</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button onClick={() => navigateTo('shop')}
                style={{ background: '#fff', color: '#1A1A1A', fontSize: 12, fontWeight: 800, padding: '13px 22px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, letterSpacing: '0.05em', textTransform: 'uppercase' as const }}>
                Shop Now <ArrowRight size={12} />
              </button>
              <button onClick={() => navigateTo('shop')}
                style={{ background: 'rgba(255,255,255,.15)', color: '#fff', fontSize: 12, fontWeight: 700, padding: '13px 18px', border: '1px solid rgba(255,255,255,.4)', cursor: 'pointer', backdropFilter: 'blur(8px)' }}>
                View All
              </button>
            </div>
          </div>

          {/* Floating stats badge */}
          <div style={{ position: 'absolute', top: 16, right: 16, background: 'rgba(255,255,255,.12)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.25)', borderRadius: 14, padding: '10px 14px', textAlign: 'center' }}>
            <div style={{ fontSize: 16, fontWeight: 900, color: '#fff', lineHeight: 1 }}>4.9★</div>
            <div style={{ fontSize: 9, color: 'rgba(255,255,255,.7)', fontWeight: 600, marginTop: 2 }}>10K+ Reviews</div>
          </div>
        </div>

        {/* Benefits strip — horizontal scroll */}
        <div style={{ background: '#FAFAFA', borderBottom: '1px solid #F1F5F9', overflowX: 'auto' }} className="no-scrollbar">
          <div style={{ display: 'flex', minWidth: 'max-content' }}>
            {[
              { icon: Truck, label: 'Free Shipping', sub: 'Over ৳1000', color: '#4F46E5' },
              { icon: RefreshCw, label: 'Easy Returns', sub: '30 days', color: '#10B981' },
              { icon: ShieldCheck, label: 'Secure Pay', sub: '100% safe', color: '#F59E0B' },
              { icon: Clock, label: '24/7 Support', sub: 'Always here', color: '#EC4899' },
            ].map(({ icon: Icon, label, sub, color }) => (
              <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderRight: '1px solid #F1F5F9', flexShrink: 0 }}>
                <div style={{ width: 34, height: 34, borderRadius: 10, background: `${color}18`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon size={16} color={color} />
                </div>
                <div>
                  <p style={{ fontSize: 11, fontWeight: 800, color: '#1E293B', lineHeight: 1 }}>{label}</p>
                  <p style={{ fontSize: 10, color: '#94A3B8', marginTop: 2 }}>{sub}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Category Bubbles */}
        <div style={{ background: '#fff', padding: '20px 0 16px', borderBottom: '1px solid #F1F5F9' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', marginBottom: 12 }}>
            <h2 style={{ fontSize: 16, fontWeight: 900, color: '#1A1A1A' }}>Shop by Category</h2>
            <button onClick={() => navigateTo('shop')} style={{ display: 'flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 700, color: accent, background: 'none', border: 'none', cursor: 'pointer' }}>
              সব <ChevronRight size={12} />
            </button>
          </div>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 16px' }} className="no-scrollbar">
            {displayCategories.map((cat, i) => (
              <button key={i} onClick={() => navigateTo('shop')}
                style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
                <div style={{ width: 68, height: 68, borderRadius: '50%', overflow: 'hidden', border: '2px solid #F1F5F9', boxShadow: '0 4px 12px rgba(0,0,0,.08)' }}>
                  <img src={cat.image} alt={cat.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
                </div>
                <span style={{ fontSize: 10, fontWeight: 600, color: '#475569', maxWidth: 68, textAlign: 'center', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' as const, overflow: 'hidden' }}>{cat.name}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Tab Products */}
        <div style={{ background: '#fff', padding: '20px 14px', borderBottom: '1px solid #F1F5F9' }}>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginBottom: 16, paddingBottom: 2 }} className="no-scrollbar">
            {[
              { key: 'featured', label: '⭐ Featured' },
              { key: 'bestsellers', label: '🔥 Best Sellers' },
              { key: 'newarrivals', label: '✨ New' },
              { key: 'onsale', label: '🏷 Sale' },
            ].map(tab => (
              <button key={tab.key} onClick={() => setActiveTab(tab.key)}
                style={{
                  flexShrink: 0, padding: '8px 16px', borderRadius: 99, fontSize: 12, fontWeight: 700,
                  border: 'none', cursor: 'pointer', transition: 'all .2s',
                  background: activeTab === tab.key ? accent : '#F8FAFC',
                  color: activeTab === tab.key ? '#fff' : '#64748B',
                  boxShadow: activeTab === tab.key ? `0 4px 12px ${accent}44` : 'none',
                }}>
                {tab.label}
              </button>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
            {getTabProducts().slice(0, 6).map((p, idx) => (
              <ProductCard key={p.id} product={p}
                isNew={activeTab === 'newarrivals' || idx < 2}
                isOnSale={activeTab === 'onsale'}
                onCart={(): void => addCart(p)} onBuy={(): void => buyNow(p)} onSelect={(): void => onSelectProduct(p)}
              />
            ))}
          </div>

          <button onClick={() => navigateTo('shop')}
            style={{ width: '100%', marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, fontWeight: 800, padding: '14px 0', borderRadius: 14, border: `2px solid ${accent}`, color: accent, background: 'none', cursor: 'pointer', transition: 'all .2s' }}>
            সব পণ্য দেখুন <ArrowRight size={14} />
          </button>
        </div>

        {/* Promo Banner */}
        <div style={{ position: 'relative', overflow: 'hidden', height: 240, cursor: 'pointer' }} onClick={() => navigateTo('shop')}>
          <img src={promoImage} alt="Sale" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg,rgba(0,0,0,.7),rgba(0,0,0,.4))', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 24px' }}>
            <span style={{ fontSize: 10, fontWeight: 800, color: 'rgba(255,255,255,.8)', background: 'rgba(255,255,255,.15)', border: '1px solid rgba(255,255,255,.3)', borderRadius: 99, padding: '4px 14px', letterSpacing: '0.15em', textTransform: 'uppercase' as const, marginBottom: 10 }}>{promoTagline}</span>
            <h2 style={{ fontSize: 32, fontWeight: 900, color: '#fff', lineHeight: 1.1, marginBottom: 6, fontFamily: "'Playfair Display',serif" }}>{promoTitle}</h2>
            <p style={{ color: 'rgba(255,255,255,.75)', fontSize: 13, marginBottom: 16 }}>{promoSubtitle}</p>
            <span style={{ background: '#fff', color: '#1A1A1A', fontSize: 12, fontWeight: 800, padding: '10px 22px', borderRadius: 99, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              Shop Sale <ArrowRight size={12} />
            </span>
          </div>
        </div>

        {/* Testimonials */}
        <div style={{ background: '#FAFAFA', padding: '24px 14px', borderBottom: '1px solid #F1F5F9' }}>
          <h2 style={{ fontSize: 16, fontWeight: 900, marginBottom: 4 }}>Customer Reviews</h2>
          <div style={{ display: 'flex', gap: 1, marginBottom: 12 }}>{[1,2,3,4,5].map(s => <span key={s} style={{ color: '#F59E0B', fontSize: 12 }}>★</span>)}<span style={{ fontSize: 11, color: '#64748B', marginLeft: 6, fontWeight: 600 }}>4.9 · 10K+ Reviews</span></div>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto' }} className="no-scrollbar">
            {testimonials.map((t: any, i: number) => (
              <div key={i} style={{ flexShrink: 0, width: 260, background: '#fff', borderRadius: 18, padding: 16, border: '1px solid #F1F5F9', boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  {t.image
                    ? <img src={t.image} alt={t.name} style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover' }} />
                    : <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#1A1A1A', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 900 }}>{t.name?.charAt(0)}</div>}
                  <div>
                    <p style={{ fontSize: 12, fontWeight: 800, color: '#1E293B' }}>{t.name}</p>
                    <p style={{ fontSize: 10, color: '#94A3B8' }}>{t.location}</p>
                  </div>
                </div>
                <Stars count={t.rating || 5} size={11} />
                <p style={{ fontSize: 12, color: '#475569', lineHeight: 1.6, marginTop: 8 }}>"{t.text}"</p>
              </div>
            ))}
          </div>
        </div>

        {/* Instagram Grid */}
        <div style={{ background: '#fff', padding: '20px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <h2 style={{ fontSize: 16, fontWeight: 900 }}>Instagram</h2>
              <p style={{ fontSize: 11, color: '#94A3B8' }}>{igHandle}</p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 700, color: '#E4405F' }}>
              <Instagram size={14} /> Follow
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 }}>
            {igImages.slice(0, 6).map((img: string, i: number) => (
              <div key={i} style={{ aspectRatio: '1', borderRadius: 12, overflow: 'hidden', background: '#F1F5F9' }}>
                <img src={img} alt={`IG ${i+1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
              </div>
            ))}
          </div>
        </div>

        {/* Newsletter */}
        <div style={{ background: '#1A1A1A', padding: '32px 20px', textAlign: 'center' }}>
          <Sparkles size={20} color="#FBD38D" style={{ margin: '0 auto 12px' }} />
          <h2 style={{ fontSize: 20, fontWeight: 800, color: '#fff', marginBottom: 6 }}>Stay in the Loop</h2>
          <p style={{ color: '#94A3B8', fontSize: 13, marginBottom: 20, lineHeight: 1.6 }}>Exclusive offers, new arrivals & style tips.</p>
          <div style={{ display: 'flex', gap: 10 }}>
            <input type="email" placeholder="Your email address"
              style={{ flex: 1, padding: '12px 16px', borderRadius: 12, border: '1px solid rgba(255,255,255,.1)', background: 'rgba(255,255,255,.07)', color: '#fff', fontSize: 13, outline: 'none', fontFamily: 'inherit' }} />
            <button style={{ background: '#fff', color: '#1A1A1A', fontSize: 12, fontWeight: 800, padding: '12px 18px', borderRadius: 12, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' as const }}>
              Subscribe
            </button>
          </div>
          <p style={{ color: '#64748B', fontSize: 11, marginTop: 12 }}>No spam. Unsubscribe anytime.</p>
        </div>
        <div style={{ height: 16 }} />
      </div>

      {/* ══════════════════════════════════════════
          DESKTOP (hidden md:block)
      ══════════════════════════════════════════ */}
      <div className="hidden md:block">

        {/* ─── HERO — Full screen cinematic ──── */}
        <div style={{ position: 'relative', width: '100%', height: '100vh', minHeight: 640, overflow: 'hidden' }}>
          <img src={heroImage} alt="Fashion Hero"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: heroLoaded ? 'scale(1.03)' : 'scale(1.08)', transition: 'transform 1.4s ease', opacity: heroLoaded ? 1 : 0 }}
            onLoad={() => setHeroLoaded(true)} />

          {/* Multi-layer gradient */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 50%, transparent 100%)' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%)' }} />

          {/* Content */}
          <div style={{ position: 'relative', zIndex: 10, height: '100%', maxWidth: 1440, margin: '0 auto', padding: '0 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ maxWidth: 620 }} className="hp05-fade-in">
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,.1)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.25)', borderRadius: 99, padding: '6px 18px', marginBottom: 24 }}>
                <Sparkles size={12} color="#FBD38D" />
                <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: '0.2em', textTransform: 'uppercase' as const }}>New Arrival 2025</span>
              </div>

              <h1 style={{ fontSize: 'clamp(48px,6vw,80px)', fontWeight: 300, color: '#fff', lineHeight: 1.05, marginBottom: 20, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', letterSpacing: '-1px' }}>
                {heroTitle}
              </h1>
              <p style={{ fontSize: 18, color: 'rgba(255,255,255,.8)', marginBottom: 36, maxWidth: 480, lineHeight: 1.7, fontWeight: 300 }}>
                {heroSubtitle}
              </p>

              <div style={{ display: 'flex', gap: 14 }}>
                <button onClick={() => navigateTo('shop')}
                  style={{ background: '#fff', color: '#1A1A1A', fontSize: 13, fontWeight: 800, padding: '16px 36px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, letterSpacing: '0.08em', textTransform: 'uppercase' as const, transition: 'all .25s' }}
                  onMouseEnter={e => { e.currentTarget.style.background = '#F1F5F9'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = '#fff'; }}>
                  Shop Collection <ArrowRight size={14} />
                </button>
                <button onClick={() => navigateTo('shop')}
                  style={{ background: 'transparent', color: '#fff', fontSize: 13, fontWeight: 700, padding: '16px 32px', border: '1.5px solid rgba(255,255,255,.5)', cursor: 'pointer', letterSpacing: '0.05em', backdropFilter: 'blur(8px)', transition: 'border-color .2s' }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = '#fff'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,.5)'; }}>
                  Explore Lookbook
                </button>
              </div>

              {/* Social proof */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 36 }}>
                <div style={{ display: 'flex' }}>
                  {['#4F46E5','#10B981','#F59E0B','#EC4899'].map((c, i) => (
                    <div key={i} style={{ width: 30, height: 30, borderRadius: '50%', border: '2px solid rgba(255,255,255,.4)', marginLeft: i === 0 ? 0 : -8, background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: '#fff', fontWeight: 700 }}>
                      {['S','M','E','A'][i]}
                    </div>
                  ))}
                </div>
                <div>
                  <div style={{ display: 'flex', gap: 2 }}>{[1,2,3,4,5].map(s => <span key={s} style={{ color: '#FBD38D', fontSize: 12 }}>★</span>)}</div>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', fontWeight: 500 }}>Trusted by 10,000+ fashion lovers</span>
                </div>
              </div>
            </div>
          </div>

          {/* Scroll indicator */}
          <div style={{ position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 10, color: 'rgba(255,255,255,.5)', letterSpacing: '0.15em', textTransform: 'uppercase' as const }}>Scroll</span>
            <div style={{ width: 1, height: 40, background: 'linear-gradient(to bottom, rgba(255,255,255,.5), transparent)' }} />
          </div>
        </div>

        {/* ─── Benefits Bar ────────────────────── */}
        <div style={{ background: '#fff', borderBottom: '1px solid #F1F5F9', boxShadow: '0 4px 20px rgba(0,0,0,.04)' }}>
          <div style={{ maxWidth: 1440, margin: '0 auto', padding: '24px 64px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32 }}>
            {[
              { icon: Truck, label: 'Free Shipping', desc: 'On orders over ৳1000', color: '#4F46E5' },
              { icon: RefreshCw, label: 'Easy Returns', desc: '30 day return policy', color: '#10B981' },
              { icon: ShieldCheck, label: 'Secure Payment', desc: '100% secure transactions', color: '#F59E0B' },
              { icon: Clock, label: '24/7 Support', desc: 'Dedicated customer service', color: '#EC4899' },
            ].map((b, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: `${b.color}18`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <b.icon size={22} color={b.color} />
                </div>
                <div>
                  <h4 style={{ fontSize: 14, fontWeight: 700, color: '#1E293B', marginBottom: 2 }}>{b.label}</h4>
                  <p style={{ fontSize: 12, color: '#94A3B8' }}>{b.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ─── Categories — Editorial Grid ──── */}
        <div style={{ background: '#FAFAFA', padding: '80px 64px' }}>
          <div style={{ maxWidth: 1440, margin: '0 auto' }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48 }}>
              <div>
                <p style={{ fontSize: 11, fontWeight: 700, color: accent, textTransform: 'uppercase' as const, letterSpacing: '0.2em', marginBottom: 8 }}>Curated Collections</p>
                <h2 style={{ fontSize: 'clamp(28px,3vw,42px)', fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#1A1A1A', lineHeight: 1.2 }}>
                  Shop by Category
                </h2>
              </div>
              <button onClick={() => navigateTo('shop')}
                style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: accent, background: 'none', border: 'none', cursor: 'pointer', letterSpacing: '0.05em' }}>
                View All <ArrowRight size={14} />
              </button>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8,1fr)', gap: 16 }}>
              {displayCategories.slice(0, 8).map((cat, i) => {
                const isBig = i === 0 || i === 4;
                return (
                  <div key={i}
                    style={{ gridColumn: isBig ? 'span 2' : 'span 1', cursor: 'pointer', position: 'relative' }}
                    onClick={() => navigateTo('shop')}>
                    <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', aspectRatio: isBig ? '2/3' : '3/4', background: '#F1F5F9' }}
                      onMouseEnter={e => { (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1.1)'; (e.currentTarget.querySelector('.cat-label') as HTMLElement).style.padding = '16px 0 20px'; }}
                      onMouseLeave={e => { (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1)'; (e.currentTarget.querySelector('.cat-label') as HTMLElement).style.padding = '12px 0 16px'; }}>
                      <img src={cat.image} alt={cat.name}
                        style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .6s ease' }} loading="lazy" />
                      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%)' }} />
                      <div className="cat-label" style={{ position: 'absolute', bottom: 0, insetInline: 0, padding: '12px 0 16px', textAlign: 'center', transition: 'padding .3s ease' }}>
                        <span style={{ fontSize: isBig ? 14 : 12, fontWeight: 700, color: '#fff', letterSpacing: '0.05em' }}>{cat.name}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* ─── Product Tabs Section ────────────── */}
        <div style={{ background: '#fff', padding: '80px 64px' }}>
          <div style={{ maxWidth: 1440, margin: '0 auto' }}>
            {/* Header */}
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
              <div>
                <p style={{ fontSize: 11, fontWeight: 700, color: accent, textTransform: 'uppercase' as const, letterSpacing: '0.2em', marginBottom: 8 }}>Handpicked For You</p>
                <h2 style={{ fontSize: 'clamp(28px,3vw,42px)', fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#1A1A1A' }}>
                  Our Products
                </h2>
              </div>
              {/* Tab Pills */}
              <div style={{ display: 'flex', gap: 6, background: '#F8FAFC', borderRadius: 14, padding: 4, border: '1px solid #F1F5F9' }}>
                {[
                  { key: 'featured', label: 'Featured' },
                  { key: 'bestsellers', label: '🔥 Best Sellers' },
                  { key: 'newarrivals', label: '✨ New' },
                  { key: 'onsale', label: '🏷 Sale' },
                ].map(tab => (
                  <button key={tab.key} onClick={() => setActiveTab(tab.key)}
                    style={{
                      padding: '8px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', transition: 'all .2s',
                      background: activeTab === tab.key ? accent : 'transparent',
                      color: activeTab === tab.key ? '#fff' : '#64748B',
                      boxShadow: activeTab === tab.key ? `0 4px 14px ${accent}44` : 'none',
                    }}>
                    {tab.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Product grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 20 }}>
              {getTabProducts().slice(0, 10).map((p, idx) => (
                <ProductCard key={p.id} product={p}
                  isNew={activeTab === 'newarrivals' || idx < 2}
                  isOnSale={activeTab === 'onsale'}
                  onCart={(): void => addCart(p)} onBuy={(): void => buyNow(p)} onSelect={(): void => onSelectProduct(p)}
                />
              ))}
            </div>

            <div style={{ textAlign: 'center', marginTop: 48 }}>
              <button onClick={() => navigateTo('shop')}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 40px',
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' as const,
                  border: `2px solid ${accent}`, color: accent, background: 'none', borderRadius: 99,
                  cursor: 'pointer', transition: 'all .25s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = accent; e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = accent; }}>
                View All Products <ArrowRight size={14} />
              </button>
            </div>
          </div>
        </div>

        {/* ─── Promo Banner — Split ────────────── */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: 480 }}>
          {/* Left — image */}
          <div style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer' }} onClick={() => navigateTo('shop')}
            onMouseEnter={e => (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1.06)'}
            onMouseLeave={e => (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1)'}>
            <img src={promoImage} alt="Promo"
              style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .8s ease' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.25)' }} />
          </div>
          {/* Right — copy */}
          <div style={{ background: '#1A1A1A', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', padding: '60px 64px' }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,.5)', letterSpacing: '0.2em', textTransform: 'uppercase' as const, marginBottom: 16 }}>{promoTagline}</span>
            <h2 style={{ fontSize: 'clamp(36px,4vw,56px)', fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#fff', lineHeight: 1.1, marginBottom: 12 }}>
              {promoTitle}
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,.6)', marginBottom: 40, lineHeight: 1.7 }}>{promoSubtitle}</p>
            <button onClick={() => navigateTo('shop')}
              style={{ background: '#fff', color: '#1A1A1A', fontSize: 13, fontWeight: 800, padding: '16px 40px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, letterSpacing: '0.08em', textTransform: 'uppercase' as const, transition: 'background .2s' }}
              onMouseEnter={e => (e.currentTarget.style.background = '#F1F5F9')}
              onMouseLeave={e => (e.currentTarget.style.background = '#fff')}>
              Shop Sale <ArrowRight size={14} />
            </button>
          </div>
        </div>

        {/* ─── Testimonials ─────────────────────── */}
        <div style={{ background: '#FAFAFA', padding: '80px 64px' }}>
          <div style={{ maxWidth: 1440, margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: 52 }}>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 2, marginBottom: 12 }}>
                {[1,2,3,4,5].map(s => <span key={s} style={{ color: '#F59E0B', fontSize: 20 }}>★</span>)}
              </div>
              <p style={{ fontSize: 11, fontWeight: 700, color: accent, textTransform: 'uppercase' as const, letterSpacing: '0.2em', marginBottom: 10 }}>Loved By Thousands</p>
              <h2 style={{ fontSize: 'clamp(28px,3vw,40px)', fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#1A1A1A' }}>
                What Customers Say
              </h2>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
              {testimonials.map((t: any, i: number) => (
                <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 24, border: '1px solid #F1F5F9', boxShadow: '0 2px 12px rgba(0,0,0,.04)', transition: 'all .25s' }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,.1)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,.04)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <Stars count={t.rating || 5} size={13} />
                  <p style={{ fontSize: 14, color: '#475569', lineHeight: 1.7, margin: '14px 0', fontStyle: 'italic' }}>"{t.text}"</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: '1px solid #F1F5F9' }}>
                    {t.image
                      ? <img src={t.image} alt={t.name} style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover' }} />
                      : <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#1A1A1A', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 900 }}>{(t.name||'U')[0]}</div>}
                    <div>
                      <p style={{ fontSize: 13, fontWeight: 700, color: '#1E293B' }}>{t.name}</p>
                      <p style={{ fontSize: 11, color: '#94A3B8' }}>{t.location}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ─── Instagram Mosaic ─────────────────── */}
        <div style={{ background: '#fff', padding: '80px 64px' }}>
          <div style={{ maxWidth: 1440, margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: 48 }}>
              <p style={{ fontSize: 11, fontWeight: 700, color: '#E4405F', textTransform: 'uppercase' as const, letterSpacing: '0.2em', marginBottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <Instagram size={14} /> {igHandle}
              </p>
              <h2 style={{ fontSize: 'clamp(28px,3vw,40px)', fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#1A1A1A' }}>
                Follow Our Story
              </h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 10 }}>
              {igImages.map((img: string, i: number) => (
                <div key={i} style={{ aspectRatio: '1', borderRadius: 16, overflow: 'hidden', cursor: 'pointer', position: 'relative' }}
                  onMouseEnter={e => { (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1.1)'; (e.currentTarget.querySelector('.ig-overlay') as HTMLElement).style.opacity = '1'; }}
                  onMouseLeave={e => { (e.currentTarget.querySelector('img') as HTMLImageElement).style.transform = 'scale(1)'; (e.currentTarget.querySelector('.ig-overlay') as HTMLElement).style.opacity = '0'; }}>
                  <img src={img} alt={`IG ${i+1}`} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s ease' }} loading="lazy" />
                  <div className="ig-overlay" style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0, transition: 'opacity .3s' }}>
                    <Instagram size={24} color="#fff" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ─── Newsletter ──────────────────────── */}
        <div style={{ background: '#1A1A1A', padding: '80px 64px' }}>
          <div style={{ maxWidth: 600, margin: '0 auto', textAlign: 'center' }}>
            <Sparkles size={28} color="#FBD38D" style={{ margin: '0 auto 16px' }} />
            <h2 style={{ fontSize: 36, fontWeight: 300, fontFamily: "'Playfair Display',serif", fontStyle: 'italic', color: '#fff', marginBottom: 12 }}>Stay in the Loop</h2>
            <p style={{ color: '#64748B', marginBottom: 32, lineHeight: 1.7 }}>Subscribe to get exclusive offers, new arrivals, and style tips — curated just for you.</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <input type="email" placeholder="Enter your email address"
                style={{ flex: 1, padding: '16px 20px', borderRadius: 14, border: '1px solid rgba(255,255,255,.1)', background: 'rgba(255,255,255,.06)', color: '#fff', fontSize: 14, outline: 'none', fontFamily: 'inherit' }} />
              <button style={{ background: '#fff', color: '#1A1A1A', fontSize: 13, fontWeight: 800, padding: '16px 28px', borderRadius: 14, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' as const, transition: 'background .2s' }}
                onMouseEnter={e => (e.currentTarget.style.background = '#F1F5F9')}
                onMouseLeave={e => (e.currentTarget.style.background = '#fff')}>
                Subscribe
              </button>
            </div>
            <p style={{ color: '#475569', fontSize: 12, marginTop: 14 }}>✦ No spam. Unsubscribe anytime. ✦</p>
          </div>
        </div>

        <AppDownloadBanner settings={settings} bgColor="#1A1A1A" />
      </div>
    </div>
  );
};

export default HomePage05;