'use client';

import React, { useState } from 'react';
import Link from 'next/link';

interface Product {
  id: string;
  name: string;
  category: string;
  tierRequirement: 'Silver' | 'Gold' | 'Black' | 'All';
  memberPrice: number;
  retailPrice: number;
  badge: string;
  status: 'In Stock' | 'Limited Run' | 'Vault Reserved';
  remaining?: number;
  sizes: string[];
  color: string;
  accentColor: string;
  description: string;
}

const PRODUCTS: Product[] = [
  {
    id: 'prod-1',
    name: 'Heavyweight Cashmere Trench',
    category: 'Outerwear',
    tierRequirement: 'Black',
    memberPrice: 480,
    retailPrice: 650,
    badge: 'Black Tier Only',
    status: 'Limited Run',
    remaining: 12,
    sizes: ['46', '48', '50', '52'],
    color: '#1c1917',
    accentColor: '#d97706',
    description: 'Double-faced Italian virgin cashmere woven with structured lapel and horn button details.',
  },
  {
    id: 'prod-2',
    name: 'Titanium Chronograph 01',
    category: 'Timepieces',
    tierRequirement: 'Gold',
    memberPrice: 340,
    retailPrice: 490,
    badge: 'Early Access',
    status: 'Limited Run',
    remaining: 8,
    sizes: ['40mm'],
    color: '#27272a',
    accentColor: '#06b6d4',
    description: 'Grade 5 satin-brushed titanium case with high-beat meca-quartz movement and sapphire crystal.',
  },
  {
    id: 'prod-3',
    name: 'Japanese Kuroki Selvedge Denim',
    category: 'Trousers',
    tierRequirement: 'Silver',
    memberPrice: 195,
    retailPrice: 280,
    badge: 'Member Exclusive',
    status: 'In Stock',
    sizes: ['30', '32', '34', '36'],
    color: '#0f172a',
    accentColor: '#3b82f6',
    description: '14.5oz shuttle-loom raw denim from Okayama with custom copper rivets and chainstitched hem.',
  },
  {
    id: 'prod-4',
    name: 'Architectural Monolith Vessel',
    category: 'Living',
    tierRequirement: 'All',
    memberPrice: 110,
    retailPrice: 165,
    badge: 'Private Vault',
    status: 'In Stock',
    sizes: ['Medium', 'Large'],
    color: '#18181b',
    accentColor: '#a1a1aa',
    description: 'Hand-thrown porous volcanic stoneware treated with matte charcoal slip finish.',
  },
  {
    id: 'prod-5',
    name: 'Full-Grain Calfskin Weekender',
    category: 'Leather Goods',
    tierRequirement: 'Black',
    memberPrice: 520,
    retailPrice: 750,
    badge: 'Black Tier Only',
    status: 'Vault Reserved',
    remaining: 5,
    sizes: ['45L'],
    color: '#292524',
    accentColor: '#d97706',
    description: 'Semi-vegetable tanned Tuscan calfskin with brushed palladium hardware and micro-suede lining.',
  },
  {
    id: 'prod-6',
    name: 'Nebula Scent Diffuser Block',
    category: 'Fragrance',
    tierRequirement: 'Gold',
    memberPrice: 85,
    retailPrice: 125,
    badge: 'Restocked',
    status: 'In Stock',
    sizes: ['One Size'],
    color: '#1e1b4b',
    accentColor: '#818cf8',
    description: 'Milled solid aluminum capsule paired with cold-pressed Hinoki and smoked cedar extract oils.',
  },
];

export default function MembershipHubPage() {
  const [activeTab, setActiveTab] = useState<'all' | 'drops' | 'vault' | 'early'>('all');
  const [selectedSizes, setSelectedSizes] = useState<Record<string, string>>({
    'prod-1': '48',
    'prod-2': '40mm',
    'prod-3': '32',
    'prod-4': 'Medium',
    'prod-5': '45L',
    'prod-6': 'One Size',
  });
  const [cart, setCart] = useState<{ id: string; name: string; price: number; size: string }[]>([]);
  const [wishlist, setWishlist] = useState<string[]>(['prod-1']);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3500);
  };

  const addToCart = (product: Product) => {
    const size = selectedSizes[product.id] || product.sizes[0];
    setCart((prev) => [...prev, { id: product.id, name: product.name, price: product.memberPrice, size }]);
    showToast(`Added "${product.name}" (${size}) to your member cart.`);
  };

  const toggleWishlist = (id: string) => {
    setWishlist((prev) => {
      const exists = prev.includes(id);
      if (exists) {
        showToast('Removed from saved wishlist.');
        return prev.filter((item) => item !== id);
      } else {
        showToast('Added to your private member wishlist.');
        return [...prev, id];
      }
    });
  };

  const filteredProducts = PRODUCTS.filter((item) => {
    if (activeTab === 'drops') return item.badge.includes('Only') || item.badge.includes('Exclusive');
    if (activeTab === 'vault') return item.badge.includes('Vault');
    if (activeTab === 'early') return item.badge.includes('Early');
    return true;
  });

  const cartTotal = cart.reduce((acc, curr) => acc + curr.price, 0);

  return (
    <div className="min-h-screen bg-[#07090e] text-neutral-100 flex flex-col font-sans selection:bg-amber-500/20 selection:text-amber-200">
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-neutral-900/90 border border-neutral-700 text-neutral-200 px-5 py-3.5 rounded-xl shadow-2xl backdrop-blur-xl animate-bounce">
          <span className="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_8px_#34d399]" />
          <span className="text-sm font-medium">{toastMessage}</span>
        </div>
      )}

      {/* Screen Switcher Bar */}
      <div className="w-full bg-neutral-950 border-b border-neutral-800 px-4 py-1.5 text-[11px] font-mono flex items-center justify-between">
        <div className="max-w-7xl mx-auto w-full flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-neutral-500">STITCH SCREEN:</span>
            <Link
              href="/"
              className="px-2.5 py-0.5 rounded bg-neutral-900 hover:bg-neutral-800 text-neutral-400 hover:text-neutral-200 transition-colors"
            >
              1. Home Dashboard (Web)
            </Link>
            <span className="px-2.5 py-0.5 rounded bg-amber-500/20 text-amber-300 font-bold border border-amber-500/30">
              2. Membership Hub (Active)
            </span>
          </div>
          <span className="text-neutral-500 hidden sm:inline">Screen ID: 4b7b1991510543fcbabfa3047909d7ad</span>
        </div>
      </div>

      {/* Top Banner */}
      <div className="w-full bg-neutral-900/90 border-b border-neutral-800/80 px-4 py-2 text-xs font-medium text-neutral-400 flex items-center justify-between tracking-wide">
        <div className="max-w-7xl mx-auto w-full flex flex-wrap items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
            <span className="text-neutral-300">BLACK TIER EXCLUSIVE:</span>
            <span>Private Winter Capsule Unlocked &bull; Complimentary Courier Included</span>
          </div>
          <div className="flex items-center gap-4 text-neutral-400">
            <span>Concierge: 24/7 Priority</span>
            <span className="text-neutral-700">|</span>
            <span className="text-amber-300/80 font-mono">Member ID: #QKZ-8829</span>
          </div>
        </div>
      </div>

      {/* Main Navigation */}
      <header className="sticky top-0 z-40 w-full bg-[#07090e]/85 backdrop-blur-md border-b border-neutral-800/70">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-18 flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-gradient-to-tr from-neutral-800 via-neutral-700 to-amber-400/80 p-[1px] flex items-center justify-center">
              <div className="w-full h-full bg-neutral-950 rounded-[7px] flex items-center justify-center font-mono font-bold text-amber-300 text-sm">
                Q
              </div>
            </div>
            <div>
              <span className="text-base font-semibold tracking-wider uppercase text-neutral-100">Quickzee</span>
              <span className="text-xs font-mono text-amber-400/90 ml-2 tracking-widest uppercase">Privé</span>
            </div>
          </Link>

          {/* Navigation links */}
          <nav className="hidden md:flex items-center gap-8 text-xs font-medium uppercase tracking-wider text-neutral-400">
            <Link href="/" className="hover:text-neutral-200 transition-colors">
              Home Dashboard
            </Link>
            <Link href="/hub" className="text-neutral-100 font-semibold border-b-2 border-amber-400 pb-1">
              Membership Hub
            </Link>
            <a href="#catalog" className="hover:text-neutral-200 transition-colors">
              Private Drops
            </a>
            <a href="#perks" className="hover:text-neutral-200 transition-colors">
              Privileges
            </a>
          </nav>

          {/* User & Actions */}
          <div className="flex items-center gap-4">
            <div className="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-900 border border-amber-500/30 text-amber-300 text-xs font-mono">
              <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
              <span>BLACK TIER</span>
            </div>

            <button
              onClick={() => showToast(`You have ${wishlist.length} item(s) in your saved wishlist.`)}
              className="relative p-2 rounded-lg text-neutral-400 hover:text-neutral-100 hover:bg-neutral-900 transition-colors"
              aria-label="Wishlist"
            >
              <svg className="w-5 h-5" fill={wishlist.length > 0 ? '#d97706' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              {wishlist.length > 0 && (
                <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-amber-400" />
              )}
            </button>

            <button
              onClick={() => setIsCartOpen(true)}
              className="relative flex items-center gap-2 px-3.5 py-1.5 rounded-lg bg-neutral-900 hover:bg-neutral-800 border border-neutral-700/80 text-neutral-200 text-xs font-medium transition-all"
            >
              <svg className="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
              </svg>
              <span>Bag ({cart.length})</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Hub Body */}
      <main id="hub" className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
        {/* Welcome & Member Status Hero Card */}
        <section className="relative overflow-hidden rounded-2xl border border-neutral-800 bg-gradient-to-b from-neutral-900/70 via-neutral-950 to-neutral-950 p-6 md:p-8">
          <div className="absolute top-0 right-0 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
          <div className="absolute bottom-0 left-1/3 w-80 h-80 bg-indigo-500/5 rounded-full blur-3xl pointer-events-none" />

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center relative z-10">
            {/* Member Greeting & Balance */}
            <div className="lg:col-span-2 space-y-4">
              <div className="flex items-center gap-3">
                <span className="px-2.5 py-0.5 rounded-full bg-neutral-800 text-neutral-300 text-xs font-mono uppercase tracking-wider border border-neutral-700">
                  Private Member Workspace
                </span>
                <span className="text-xs text-neutral-500 font-mono">Member Since 2023</span>
              </div>

              <div>
                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-light tracking-tight text-neutral-100">
                  Welcome back, <span className="font-semibold text-neutral-50">Julian Vance</span>
                </h1>
                <p className="mt-1 text-sm text-neutral-400 max-w-xl">
                  You are currently active in the <strong className="text-neutral-200">Black Tier</strong> with 20% privilege discount on all archival drops and priority 24h reservations.
                </p>
              </div>

              {/* Points & Milestone Progress */}
              <div className="pt-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="p-4 rounded-xl bg-neutral-950/80 border border-neutral-800/80">
                  <div className="text-xs font-mono text-neutral-400 uppercase tracking-wider">Available Rewards Balance</div>
                  <div className="mt-2 flex items-baseline gap-2">
                    <span className="text-3xl font-mono font-bold text-amber-300">4,850</span>
                    <span className="text-xs text-neutral-400">pts ($48.50 Credit)</span>
                  </div>
                  <button
                    onClick={() => showToast('Voucher of $40 applied to your member account.')}
                    className="mt-3 text-xs text-amber-400/90 hover:text-amber-300 font-medium flex items-center gap-1.5 transition-colors"
                  >
                    <span>Redeem Voucher</span>
                    <span>&rarr;</span>
                  </button>
                </div>

                <div className="p-4 rounded-xl bg-neutral-950/80 border border-neutral-800/80 flex flex-col justify-between">
                  <div>
                    <div className="flex justify-between items-center text-xs font-mono">
                      <span className="text-neutral-400 uppercase">Tier Progress: Level 3</span>
                      <span className="text-neutral-200 font-semibold">94%</span>
                    </div>
                    <div className="w-full bg-neutral-800 h-1.5 rounded-full mt-2.5 overflow-hidden">
                      <div className="bg-gradient-to-r from-neutral-600 via-amber-400 to-amber-300 h-full w-[94%]" />
                    </div>
                  </div>
                  <div className="mt-3 flex justify-between items-center text-xs text-neutral-400">
                    <span>Next: Platinum Atelier</span>
                    <span className="font-mono text-neutral-300">150 pts needed</span>
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-wrap gap-3 pt-2">
                <button
                  onClick={() => showToast('Concierge window connected. Representative online.')}
                  className="px-4 py-2 rounded-lg bg-neutral-100 hover:bg-neutral-200 text-neutral-950 text-xs font-medium tracking-wide transition-all shadow-lg"
                >
                  Contact Private Concierge
                </button>
                <button
                  onClick={() => showToast('Digital Apple/Google Wallet Pass generated.')}
                  className="px-4 py-2 rounded-lg bg-neutral-900 hover:bg-neutral-800 border border-neutral-700 text-neutral-200 text-xs font-medium transition-all"
                >
                  Add Digital Pass to Wallet
                </button>
              </div>
            </div>

            {/* Digital Membership Pass Card */}
            <div className="flex justify-center">
              <div className="w-full max-w-sm rounded-2xl p-6 bg-gradient-to-br from-neutral-800 via-neutral-900 to-neutral-950 border border-neutral-700/80 shadow-2xl relative overflow-hidden group hover:border-amber-500/40 transition-all duration-300">
                <div className="absolute -top-12 -right-12 w-36 h-36 bg-amber-400/10 rounded-full blur-2xl group-hover:bg-amber-400/20 transition-all" />

                <div className="flex justify-between items-start">
                  <div>
                    <span className="text-[10px] font-mono tracking-widest text-neutral-400 uppercase">Digital Privilege Pass</span>
                    <div className="text-lg font-light tracking-wider text-neutral-100 mt-0.5">QUICKZEE PRIVÉ</div>
                  </div>
                  <div className="px-2 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-300 font-mono text-[10px] font-semibold">
                    BLACK
                  </div>
                </div>

                <div className="my-6 flex items-center justify-between">
                  <div className="w-10 h-7 rounded bg-gradient-to-tr from-amber-600/60 to-amber-300/80 border border-amber-400/40 flex items-center justify-center">
                    <div className="w-6 h-4 border-t border-b border-amber-900/40 opacity-70" />
                  </div>
                  <svg className="w-6 h-6 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
                  </svg>
                </div>

                <div className="space-y-1">
                  <div className="text-[11px] font-mono tracking-widest text-neutral-300">
                    8829 &bull; 4019 &bull; 9283 &bull; 2026
                  </div>
                  <div className="flex justify-between text-[10px] text-neutral-400 font-mono pt-1">
                    <span>JULIAN VANCE</span>
                    <span>EXP 12/28</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Member Perks Quick Strip */}
        <section id="perks" className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="p-4 rounded-xl bg-neutral-900/40 border border-neutral-800 flex items-start gap-3">
            <div className="p-2 rounded-lg bg-neutral-800/80 text-amber-300">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <div className="text-xs font-semibold text-neutral-200">20% Tier Discount</div>
              <div className="text-[11px] text-neutral-400 mt-0.5">Applied automatically at checkout</div>
            </div>
          </div>

          <div className="p-4 rounded-xl bg-neutral-900/40 border border-neutral-800 flex items-start gap-3">
            <div className="p-2 rounded-lg bg-neutral-800/80 text-amber-300">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <div className="text-xs font-semibold text-neutral-200">24h Early Access</div>
              <div className="text-[11px] text-neutral-400 mt-0.5">Reserve drops before public launch</div>
            </div>
          </div>

          <div className="p-4 rounded-xl bg-neutral-900/40 border border-neutral-800 flex items-start gap-3">
            <div className="p-2 rounded-lg bg-neutral-800/80 text-amber-300">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
            </div>
            <div>
              <div className="text-xs font-semibold text-neutral-200">White-Glove Shipping</div>
              <div className="text-[11px] text-neutral-400 mt-0.5">Express courier &amp; complimentary returns</div>
            </div>
          </div>

          <div className="p-4 rounded-xl bg-neutral-900/40 border border-neutral-800 flex items-start gap-3">
            <div className="p-2 rounded-lg bg-neutral-800/80 text-amber-300">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </div>
            <div>
              <div className="text-xs font-semibold text-neutral-200">Private Atelier Access</div>
              <div className="text-[11px] text-neutral-400 mt-0.5">Virtual styling &amp; bespoke fittings</div>
            </div>
          </div>
        </section>

        {/* Member E-Commerce Catalog Section */}
        <section id="catalog" className="space-y-6">
          <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-neutral-800 pb-4">
            <div>
              <div className="text-xs font-mono uppercase tracking-wider text-amber-400/90">Curated For You</div>
              <h2 className="text-xl sm:text-2xl font-light text-neutral-100 mt-1">
                Member-Exclusive Drops &amp; Private Vault
              </h2>
            </div>

            <div className="flex items-center gap-1.5 p-1 rounded-xl bg-neutral-900 border border-neutral-800 self-start sm:self-auto">
              <button
                onClick={() => setActiveTab('all')}
                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                  activeTab === 'all'
                    ? 'bg-neutral-800 text-neutral-100 shadow'
                    : 'text-neutral-400 hover:text-neutral-200'
                }`}
              >
                All Pieces ({PRODUCTS.length})
              </button>
              <button
                onClick={() => setActiveTab('drops')}
                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                  activeTab === 'drops'
                    ? 'bg-neutral-800 text-neutral-100 shadow'
                    : 'text-neutral-400 hover:text-neutral-200'
                }`}
              >
                Tier Drops
              </button>
              <button
                onClick={() => setActiveTab('early')}
                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                  activeTab === 'early'
                    ? 'bg-neutral-800 text-neutral-100 shadow'
                    : 'text-neutral-400 hover:text-neutral-200'
                }`}
              >
                Early Access
              </button>
              <button
                onClick={() => setActiveTab('vault')}
                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                  activeTab === 'vault'
                    ? 'bg-neutral-800 text-neutral-100 shadow'
                    : 'text-neutral-400 hover:text-neutral-200'
                }`}
              >
                The Vault
              </button>
            </div>
          </div>

          {/* Product Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredProducts.map((product) => {
              const isWishlisted = wishlist.includes(product.id);
              const selectedSize = selectedSizes[product.id] || product.sizes[0];

              return (
                <div
                  key={product.id}
                  className="rounded-2xl border border-neutral-800/90 bg-neutral-900/30 hover:bg-neutral-900/60 hover:border-neutral-700 transition-all duration-300 flex flex-col justify-between overflow-hidden group"
                >
                  <div
                    className="relative h-56 w-full flex items-center justify-center p-6 overflow-hidden border-b border-neutral-800/60"
                    style={{ backgroundColor: product.color }}
                  >
                    <div className="absolute inset-0 bg-radial from-transparent to-neutral-950/60" />

                    <div className="relative z-10 w-28 h-28 rounded-2xl border border-neutral-700/60 bg-neutral-900/80 backdrop-blur-md flex flex-col items-center justify-center p-3 shadow-2xl group-hover:scale-105 transition-transform duration-300">
                      <span className="text-xs font-mono font-bold tracking-widest text-neutral-400 uppercase">
                        {product.category}
                      </span>
                      <div
                        className="w-12 h-1 rounded-full mt-2"
                        style={{ backgroundColor: product.accentColor }}
                      />
                      <span className="text-[10px] text-neutral-500 font-mono mt-3">QKZ-ART-{product.id.slice(-1)}</span>
                    </div>

                    <div className="absolute top-3 left-3 z-20 flex flex-col gap-1.5">
                      <span className="px-2.5 py-1 rounded-md text-[10px] font-mono tracking-wider uppercase font-semibold bg-neutral-950/80 border border-neutral-700 text-neutral-200 backdrop-blur-sm">
                        {product.badge}
                      </span>
                      {product.remaining && (
                        <span className="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-500/10 text-amber-300 border border-amber-500/20">
                          {product.remaining} Left
                        </span>
                      )}
                    </div>

                    <button
                      onClick={() => toggleWishlist(product.id)}
                      className="absolute top-3 right-3 z-20 p-2 rounded-full bg-neutral-950/60 hover:bg-neutral-900 text-neutral-300 hover:text-amber-300 border border-neutral-700/80 backdrop-blur-sm transition-colors"
                      aria-label="Wishlist"
                    >
                      <svg
                        className="w-4 h-4"
                        fill={isWishlisted ? '#d97706' : 'none'}
                        stroke={isWishlisted ? '#d97706' : 'currentColor'}
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                    </button>
                  </div>

                  <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
                    <div>
                      <div className="flex justify-between items-start">
                        <h3 className="text-base font-medium text-neutral-100 group-hover:text-amber-200 transition-colors">
                          {product.name}
                        </h3>
                      </div>
                      <p className="text-xs text-neutral-400 mt-1 line-clamp-2">
                        {product.description}
                      </p>
                    </div>

                    {product.sizes.length > 1 && (
                      <div>
                        <div className="text-[10px] font-mono uppercase text-neutral-500 mb-1.5">Select Size / Fit</div>
                        <div className="flex flex-wrap gap-1.5">
                          {product.sizes.map((s) => (
                            <button
                              key={s}
                              onClick={() =>
                                setSelectedSizes((prev) => ({ ...prev, [product.id]: s }))
                              }
                              className={`px-2.5 py-1 rounded text-xs font-mono transition-all ${
                                selectedSize === s
                                  ? 'bg-neutral-100 text-neutral-950 font-bold'
                                  : 'bg-neutral-800/80 text-neutral-400 hover:text-neutral-200 border border-neutral-700/60'
                              }`}
                            >
                              {s}
                            </button>
                          ))}
                        </div>
                      </div>
                    )}

                    <div className="pt-2 border-t border-neutral-800/80 flex items-center justify-between">
                      <div>
                        <div className="flex items-baseline gap-2">
                          <span className="text-lg font-mono font-bold text-neutral-100">
                            ${product.memberPrice}
                          </span>
                          <span className="text-xs font-mono text-neutral-500 line-through">
                            ${product.retailPrice}
                          </span>
                        </div>
                        <span className="text-[10px] font-mono text-emerald-400">
                          Save ${(product.retailPrice - product.memberPrice)} (Member Priv.)
                        </span>
                      </div>

                      <button
                        onClick={() => addToCart(product)}
                        className="px-3.5 py-2 rounded-lg bg-neutral-100 hover:bg-neutral-200 text-neutral-950 text-xs font-semibold tracking-wide transition-all shadow hover:shadow-lg flex items-center gap-1.5"
                      >
                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                        </svg>
                        <span>Reserve</span>
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* Member Order Tracker */}
        <section className="rounded-2xl border border-neutral-800 bg-neutral-900/30 p-6 space-y-4">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div>
              <span className="text-xs font-mono uppercase tracking-wider text-neutral-400">Active Courier Delivery</span>
              <h3 className="text-base font-medium text-neutral-200 mt-0.5">Order #QKZ-9402 &bull; Express Vault Shipment</h3>
            </div>
            <span className="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-mono">
              In Transit &bull; Expected Today by 4:30 PM
            </span>
          </div>

          <div className="grid grid-cols-4 gap-2 pt-2">
            <div className="space-y-1">
              <div className="h-1 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]" />
              <div className="text-[11px] font-medium text-neutral-200">Confirmed</div>
              <div className="text-[10px] text-neutral-500">10:14 AM</div>
            </div>
            <div className="space-y-1">
              <div className="h-1 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]" />
              <div className="text-[11px] font-medium text-neutral-200">Dispatched</div>
              <div className="text-[10px] text-neutral-500">Milano Atelier</div>
            </div>
            <div className="space-y-1">
              <div className="h-1 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]" />
              <div className="text-[11px] font-medium text-neutral-200">Out with Courier</div>
              <div className="text-[10px] text-emerald-400 font-mono">In Route</div>
            </div>
            <div className="space-y-1">
              <div className="h-1 rounded-full bg-neutral-800" />
              <div className="text-[11px] font-medium text-neutral-500">Delivered</div>
              <div className="text-[10px] text-neutral-600">Pending Signature</div>
            </div>
          </div>
        </section>
      </main>

      {/* Cart Slide-Over Drawer */}
      {isCartOpen && (
        <div className="fixed inset-0 z-50 overflow-hidden">
          <div
            className="absolute inset-0 bg-neutral-950/80 backdrop-blur-sm transition-opacity"
            onClick={() => setIsCartOpen(false)}
          />

          <div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
            <div className="w-screen max-w-md bg-neutral-900 border-l border-neutral-800 p-6 flex flex-col justify-between shadow-2xl">
              <div>
                <div className="flex items-center justify-between border-b border-neutral-800 pb-4">
                  <div>
                    <h2 className="text-lg font-light text-neutral-100">Member Bag</h2>
                    <span className="text-xs text-neutral-400 font-mono">Tier: Black (20% Savings applied)</span>
                  </div>
                  <button
                    onClick={() => setIsCartOpen(false)}
                    className="p-2 text-neutral-400 hover:text-neutral-100 transition-colors"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>

                <div className="mt-6 space-y-4 max-h-[55vh] overflow-y-auto pr-1">
                  {cart.length === 0 ? (
                    <div className="text-center py-12 text-neutral-500 text-sm">
                      Your member bag is currently empty.
                    </div>
                  ) : (
                    cart.map((item, idx) => (
                      <div
                        key={`${item.id}-${idx}`}
                        className="flex items-center justify-between p-3 rounded-xl bg-neutral-950/60 border border-neutral-800"
                      >
                        <div>
                          <div className="text-xs font-medium text-neutral-200">{item.name}</div>
                          <div className="text-[10px] text-neutral-400 font-mono mt-0.5">Size: {item.size}</div>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="text-xs font-mono font-bold text-neutral-100">${item.price}</span>
                          <button
                            onClick={() => setCart((prev) => prev.filter((_, i) => i !== idx))}
                            className="text-neutral-500 hover:text-red-400 text-xs"
                          >
                            &times;
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>

              <div className="border-t border-neutral-800 pt-4 space-y-3">
                <div className="flex justify-between text-xs text-neutral-400 font-mono">
                  <span>Shipping:</span>
                  <span className="text-emerald-400">Complimentary (Member)</span>
                </div>
                <div className="flex justify-between text-sm font-semibold text-neutral-100 font-mono">
                  <span>Total Amount:</span>
                  <span>${cartTotal}</span>
                </div>
                <button
                  disabled={cart.length === 0}
                  onClick={() => {
                    setCart([]);
                    setIsCartOpen(false);
                    showToast('Member order confirmed! Check email for receipt & courier tracking.');
                  }}
                  className="w-full py-3 rounded-xl bg-gradient-to-r from-amber-400 to-amber-300 hover:from-amber-300 hover:to-amber-200 disabled:opacity-40 text-neutral-950 font-semibold text-xs tracking-wider uppercase transition-all shadow-lg"
                >
                  Proceed to Private Checkout
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="mt-16 border-t border-neutral-900 bg-neutral-950 py-10 px-4 sm:px-6 lg:px-8 text-neutral-500 text-xs">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <span className="font-semibold text-neutral-300">Quickzee Privé</span>
            <span>&bull;</span>
            <span>Minimalist Membership E-Commerce</span>
          </div>
          <div className="flex gap-6 text-neutral-400 font-mono text-[11px]">
            <span>Privacy Protocol</span>
            <span>Atelier Terms</span>
            <span>Bespoke Concierge</span>
          </div>
        </div>
      </footer>
    </div>
  );
}