'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import Footer from '@/components/Footer';
import { STATIC_PRODUCTS, Product } from '@/data/products';

const API_BASE_URL = 'https://quickzee.admin.inficomaiacademy.com/api/v1';

export default function QuickzeeApp() {
  // Navigation & View State
  const [activeTab, setActiveTab] = useState<'Home' | 'About' | 'Become a Member' | 'Contact Form'>('Home');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [selectedImageMap, setSelectedImageMap] = useState<Record<string, string>>({});

  // Authentication State
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // User State
  const [user, setUser] = useState({
    id: 1,
    name: 'Julian Vance',
    email: 'julian.vance@sovereign.io',
    mobile: '9876543210',
    tier: 'Charter Member',
    ledgerBalance: 4850,
  });



  // Contact Form Fields
  const [contactName, setContactName] = useState('');
  const [contactEmail, setContactEmail] = useState('');
  const [contactMobile, setContactMobile] = useState('');
  const [contactSubject, setContactSubject] = useState('Membership Inquiry');
  const [contactMessage, setContactMessage] = useState('');
  const [contactSubmitted, setContactSubmitted] = useState(false);

  // Toast Notification
  const [toastMessage, setToastMessage] = useState<string | null>(null);

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

  // Restore session from localStorage & backend on mount
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const token = localStorage.getItem('quickzee_token');
      const savedUser = localStorage.getItem('quickzee_user');
      const isAuth = localStorage.getItem('quickzee_auth');

      if (token && isAuth === 'true') {
        if (savedUser) {
          try {
            setUser(JSON.parse(savedUser));
            setIsAuthenticated(true);
          } catch (e) {}
        }
        fetch(`${API_BASE_URL}/auth/me.php`, {
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.success && data.data?.user) {
              const u = data.data.user;
              const formattedUser = {
                id: u.id || 1,
                name: u.name || 'Member',
                email: u.email || '',
                mobile: u.mobile || '',
                tier: u.membership_status && u.membership_status !== 'NONE' ? u.membership_status : 'Charter Member',
                ledgerBalance: Number(u.wallet_balance || 4850),
              };
              setUser(formattedUser);
              localStorage.setItem('quickzee_user', JSON.stringify(formattedUser));
              setIsAuthenticated(true);
            }
          })
          .catch(() => {});
      }
    }
  }, []);



  // Derived user initials
  const userInitials = user.name
    ? user.name
        .split(' ')
        .filter(Boolean)
        .map((n) => n[0])
        .join('')
        .slice(0, 2)
        .toUpperCase()
    : 'JV';

  // 5. Logout
  const handleLogout = async () => {
    const token = typeof window !== 'undefined' ? localStorage.getItem('quickzee_token') : null;
    if (token) {
      try {
        await fetch(`${API_BASE_URL}/auth/logout.php`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
          },
        });
      } catch (e) {}
    }
    if (typeof window !== 'undefined') {
      localStorage.removeItem('quickzee_token');
      localStorage.removeItem('quickzee_user');
      localStorage.setItem('quickzee_auth', 'false');
    }
    setIsAuthenticated(false);
    setIsSidebarOpen(false);
    showToast('Signed out of Reserve Session.');
  };

  // 6. Contact Form Submission
  const handleContactSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setContactSubmitted(true);
    showToast('Thank you! Your message has been routed to our Executive Concierge.');
    setTimeout(() => {
      setContactName('');
      setContactEmail('');
      setContactMobile('');
      setContactMessage('');
      setContactSubmitted(false);
    }, 3000);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 antialiased selection:bg-red-600/10 selection:text-red-700 flex flex-col justify-between">
      
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-2xl border border-slate-800 animate-in fade-in slide-in-from-bottom-3 duration-200">
          <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-[0_0_10px_#ef4444]" />
          <span className="text-xs sm:text-sm font-medium">{toastMessage}</span>
        </div>
      )}

      {/* Main Container Wrapper */}
      <div className="w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
        <div className="w-full bg-white border border-slate-200 rounded-2xl sm:rounded-3xl shadow-sm p-4 sm:p-6 lg:p-8 space-y-8">

          {/* ============================================================== */}
          {/* SIMPLE NAVBAR: SAME BRAND NAME + ONLY 4 TABS + SIDEBAR BUTTON  */}
          {/* ============================================================== */}
          <header className="w-full flex items-center justify-between pb-4 border-b border-slate-100">
            {/* Left: Brand Logo (Exact Same Name: Quickzee Reserve) */}
            <div
              className="flex items-center gap-2.5 cursor-pointer group select-none shrink-0"
              onClick={() => setActiveTab('Home')}
            >
              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-red-600 to-red-700 flex items-center justify-center text-white shadow-sm shadow-red-500/30 group-hover:scale-105 transition-transform">
                <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
                  <path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5zm0 2.18l7 3.89v4.93c0 4.54-3.13 8.79-7 9.88-3.87-1.09-7-5.34-7-9.88V8.07l7-3.89z" />
                </svg>
              </div>
              <div className="flex flex-col leading-tight">
                <span className="text-lg font-extrabold tracking-tight text-[#991b1b]">Quickzee</span>
                <span className="text-xs font-bold tracking-wider text-[#991b1b] uppercase -mt-0.5">Reserve</span>
              </div>
            </div>

            {/* Center: EXACT 4 TABS ONLY (Home, About, Become a Member, Contact Form) */}
            <nav className="hidden md:flex items-center gap-6 lg:gap-8 text-xs font-semibold text-slate-600">
              {(['Home', 'About', 'Become a Member', 'Contact Form'] as const).map((tab) => {
                const isActive = activeTab === tab;
                return (
                  <button
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    className={`transition-all whitespace-nowrap relative py-1 ${
                      isActive
                        ? 'text-red-600 font-bold'
                        : 'hover:text-slate-900 text-slate-600'
                    }`}
                  >
                    <span>{tab}</span>
                    {isActive && (
                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-red-600 rounded-full" />
                    )}
                  </button>
                );
              })}
            </nav>

            {/* Right: Authentication Actions (Login & Register) */}
            <div className="flex items-center gap-2 sm:gap-2.5">
              {!isAuthenticated ? (
                <>
                  <Link
                    href="/login"
                    className="inline-flex items-center gap-1 px-3.5 sm:px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white text-xs font-bold shadow-md shadow-red-500/20 transition-all active:scale-95"
                  >
                    <span>Login</span> &rarr;
                  </Link>

                  <Link
                    href="/register"
                    className="inline-flex items-center gap-1 px-3.5 sm:px-4 py-2 rounded-xl border border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-800 text-xs font-bold shadow-xs transition-all active:scale-95"
                  >
                    <span>Register</span>
                  </Link>
                </>
              ) : (
                <div className="flex items-center gap-2">
                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-100 text-xs font-semibold text-slate-800">
                    <span className="w-2 h-2 rounded-full bg-emerald-500" />
                    <span>{user.name}</span>
                  </div>
                  <button
                    onClick={handleLogout}
                    className="px-3 py-1.5 rounded-xl border border-slate-200 text-xs font-semibold text-slate-600 hover:text-red-600 transition-colors"
                  >
                    Sign Out
                  </button>
                </div>
              )}
            </div>
          </header>

          {/* ============================================================== */}
          {/* TAB 1: HOME SECTION                                            */}
          {/* ============================================================== */}
          {activeTab === 'Home' && (
            <div className="space-y-10">
              {/* Hero Banner */}
              <section className="relative overflow-hidden rounded-3xl bg-[#080d1a] border border-slate-800 p-8 sm:p-12 text-white shadow-2xl">
                {/* Ambient Red & Blue Background Glows */}
                <div className="absolute top-0 right-1/4 w-96 h-96 bg-red-600/15 rounded-full blur-3xl pointer-events-none" />
                <div className="absolute -bottom-20 left-10 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />

                <div className="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                  {/* Left Column: Headline, Description & CTAs (7 Cols) */}
                  <div className="lg:col-span-7 space-y-6">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/15 border border-red-500/30 text-red-400 text-xs font-mono font-semibold">
                      <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                      <span>SOVEREIGN ACQUISITION CONSORTIUM &bull; CORRIDOR IN-WEST-01</span>
                    </div>

                    <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-white leading-tight">
                      Institutional Wholesale Luxury, <br />
                      <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-rose-400 to-blue-400">
                        Delivered with Sovereign Speed.
                      </span>
                    </h1>

                    <p className="text-sm sm:text-base text-slate-300 leading-relaxed max-w-2xl">
                      Quickzee Reserve provides verified members with direct wholesale clearing, 40% margin discounts, real-time ledger settlement, and perpetual 5% referral dividend yields.
                    </p>

                    <div className="flex flex-wrap items-center gap-4 pt-2">
                      <Link
                        href="/register"
                        className="px-6 py-3.5 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white font-bold text-xs tracking-wide shadow-lg shadow-red-500/30 transition-all hover:scale-[1.02] active:scale-[0.98] inline-flex items-center gap-2"
                      >
                        <span>Become a Member (₹7,800 Plan)</span>
                        <span>&rarr;</span>
                      </Link>
                      <button
                        onClick={() => setActiveTab('About')}
                        className="px-6 py-3.5 rounded-xl bg-slate-900/90 hover:bg-slate-800 border border-slate-700 text-slate-200 font-semibold text-xs transition-all"
                      >
                        Learn More About Us
                      </button>
                    </div>

                    {/* Trust Indicators Bar */}
                    <div className="grid grid-cols-3 gap-4 pt-6 border-t border-slate-800/80">
                      <div>
                        <div className="text-lg sm:text-xl font-mono font-extrabold text-white">₹14.8M+</div>
                        <div className="text-[10px] text-slate-400 uppercase font-mono mt-0.5">Wholesale Cleared</div>
                      </div>
                      <div>
                        <div className="text-lg sm:text-xl font-mono font-extrabold text-red-400">40% Avg</div>
                        <div className="text-[10px] text-slate-400 uppercase font-mono mt-0.5">Margin Discount</div>
                      </div>
                      <div>
                        <div className="text-lg sm:text-xl font-mono font-extrabold text-blue-400">&lt; 15 min</div>
                        <div className="text-[10px] text-slate-400 uppercase font-mono mt-0.5">Priority Fulfillment</div>
                      </div>
                    </div>
                  </div>

                  {/* Right Column: Dynamic E-Commerce Product Image Grid & Trending Drops Showcase */}
                  <div className="lg:col-span-5 space-y-3">
                    {/* Header badge row */}
                    <div className="flex items-center justify-between px-1">
                      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/90 border border-slate-700/80 text-[11px] font-mono text-slate-300 backdrop-blur-md">
                        <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                        <span>TRENDING E-COMMERCE PICKS</span>
                      </div>
                      <span className="text-[11px] font-mono text-red-400 font-bold">
                        🔥 Up to 40% OFF
                      </span>
                    </div>

                    {/* 4-Item E-commerce Showcase Grid */}
                    <div className="grid grid-cols-2 gap-3">
                      {/* Item 1: Luxury Horology */}
                      <div
                        onClick={() => {
                          setSelectedCategory('Horology');
                          document.getElementById('wholesale-catalog')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="group relative h-40 sm:h-44 rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 hover:border-red-500/70 transition-all duration-300 shadow-xl cursor-pointer"
                      >
                        <img
                          src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?auto=format&fit=crop&w=600&q=80"
                          alt="Swiss Horology"
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent" />
                        <span className="absolute top-2 left-2 px-2 py-0.5 rounded-md bg-red-600 text-white font-mono text-[9px] font-extrabold shadow">
                          -35% OFF
                        </span>
                        <div className="absolute bottom-2.5 left-2.5 right-2.5">
                          <span className="text-[9px] font-mono uppercase text-red-400 tracking-wider font-bold block">Horology</span>
                          <h4 className="text-xs font-bold text-white leading-tight truncate">Chronograph Vault</h4>
                          <span className="text-[10px] font-mono text-slate-300 mt-0.5 block">From ₹15.9L &rarr;</span>
                        </div>
                      </div>

                      {/* Item 2: Flagship Electronics */}
                      <div
                        onClick={() => {
                          setSelectedCategory('Electronics');
                          document.getElementById('wholesale-catalog')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="group relative h-40 sm:h-44 rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 hover:border-blue-500/70 transition-all duration-300 shadow-xl cursor-pointer"
                      >
                        <img
                          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=600&q=80"
                          alt="Audio & Gadgets"
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent" />
                        <span className="absolute top-2 left-2 px-2 py-0.5 rounded-md bg-blue-600 text-white font-mono text-[9px] font-extrabold shadow">
                          BESTSELLER
                        </span>
                        <div className="absolute bottom-2.5 left-2.5 right-2.5">
                          <span className="text-[9px] font-mono uppercase text-blue-400 tracking-wider font-bold block">Electronics</span>
                          <h4 className="text-xs font-bold text-white leading-tight truncate">Studio Acoustics</h4>
                          <span className="text-[10px] font-mono text-slate-300 mt-0.5 block">From ₹28,900 &rarr;</span>
                        </div>
                      </div>

                      {/* Item 3: Luxury Handcrafted Leather */}
                      <div
                        onClick={() => {
                          setSelectedCategory('Leather');
                          document.getElementById('wholesale-catalog')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="group relative h-40 sm:h-44 rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 hover:border-amber-500/70 transition-all duration-300 shadow-xl cursor-pointer"
                      >
                        <img
                          src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=600&q=80"
                          alt="Italian Leather Bag"
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent" />
                        <span className="absolute top-2 left-2 px-2 py-0.5 rounded-md bg-amber-600 text-white font-mono text-[9px] font-extrabold shadow">
                          ARTISANAL
                        </span>
                        <div className="absolute bottom-2.5 left-2.5 right-2.5">
                          <span className="text-[9px] font-mono uppercase text-amber-400 tracking-wider font-bold block">Leather</span>
                          <h4 className="text-xs font-bold text-white leading-tight truncate">Tuscan Hide Bag</h4>
                          <span className="text-[10px] font-mono text-slate-300 mt-0.5 block">From ₹29,500 &rarr;</span>
                        </div>
                      </div>

                      {/* Item 4: Niche Perfumery & Apparel */}
                      <div
                        onClick={() => {
                          setSelectedCategory('Living');
                          document.getElementById('wholesale-catalog')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="group relative h-40 sm:h-44 rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 hover:border-rose-500/70 transition-all duration-300 shadow-xl cursor-pointer"
                      >
                        <img
                          src="https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?auto=format&fit=crop&w=600&q=80"
                          alt="Niche Extract Fragrance"
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent" />
                        <span className="absolute top-2 left-2 px-2 py-0.5 rounded-md bg-rose-600 text-white font-mono text-[9px] font-extrabold shadow">
                          EXCLUSIVE
                        </span>
                        <div className="absolute bottom-2.5 left-2.5 right-2.5">
                          <span className="text-[9px] font-mono uppercase text-rose-400 tracking-wider font-bold block">Living</span>
                          <h4 className="text-xs font-bold text-white leading-tight truncate">Niche Extract Scent</h4>
                          <span className="text-[10px] font-mono text-slate-300 mt-0.5 block">From ₹6,400 &rarr;</span>
                        </div>
                      </div>
                    </div>

                    {/* Bottom Quick Indicator Pill */}
                    <div className="p-3 rounded-2xl bg-slate-900/90 border border-slate-800 backdrop-blur-md flex items-center justify-between text-xs">
                      <div className="flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-red-500 animate-ping" />
                        <span className="font-mono text-slate-300 text-[11px]">Primary Factory Clearing • T+0 Delivery</span>
                      </div>
                      <button
                        type="button"
                        onClick={() => {
                          document.getElementById('wholesale-catalog')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="font-bold text-red-400 hover:text-red-300 transition-colors flex items-center gap-1 text-[11px]"
                      >
                        View Full Catalog &darr;
                      </button>
                    </div>
                  </div>
                </div>
              </section>

              {/* Static Products Showcase */}
              <section id="wholesale-catalog" className="space-y-6 pt-2">
                <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-slate-100 pb-4">
                  <div>
                    <span className="text-xs font-mono font-bold uppercase tracking-wider text-red-600">
                      Wholesale Clearing Portfolio
                    </span>
                    <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
                      Featured Member Allocations
                    </h2>
                    <p className="text-xs text-slate-500 mt-1">
                      Direct allocations cleared at primary manufacturer wholesale rates for Charter Members. Hover angles to preview.
                    </p>
                  </div>

                  {/* Category Filter Chips */}
                  <div className="flex flex-wrap items-center gap-1.5 p-1 bg-slate-100 rounded-xl text-xs font-semibold text-slate-600">
                    {['All', 'Electronics', 'Horology', 'Fashion', 'Leather', 'Living'].map((cat) => (
                      <button
                        key={cat}
                        onClick={() => setSelectedCategory(cat)}
                        className={`px-3 py-1.5 rounded-lg transition-all ${
                          selectedCategory === cat
                            ? 'bg-red-600 text-white font-bold shadow-xs'
                            : 'hover:text-slate-900'
                        }`}
                      >
                        {cat}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Grid of Product Cards with Real Multi-Angle Photography */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                  {STATIC_PRODUCTS.filter(
                    (p) => selectedCategory === 'All' || p.category === selectedCategory
                  ).map((p) => {
                    const savings = p.retailPrice - p.memberPrice;
                    const activeImage = selectedImageMap[p.id] || p.imageUrl;
                    return (
                      <div
                        key={p.id}
                        className="rounded-3xl bg-white border border-slate-200/90 shadow-sm hover:border-red-300 hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden group"
                      >
                        {/* Real Image Area with Overlay Badges */}
                        <Link href={`/products/${p.id}`} className="h-52 w-full relative overflow-hidden bg-slate-950 block">
                          <img
                            src={activeImage}
                            alt={p.name}
                            className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105"
                            loading="lazy"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-black/30 pointer-events-none" />

                          {/* Floating Savings and Badge */}
                          <div className="absolute top-3 left-3 flex flex-wrap items-center gap-1.5">
                            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-red-600 text-white shadow-sm">
                              Save ₹{savings.toLocaleString()}
                            </span>
                          </div>

                          <div className="absolute top-3 right-3">
                            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-mono font-medium bg-black/60 text-slate-200 border border-white/20 backdrop-blur-xs">
                              {p.badge}
                            </span>
                          </div>

                          {/* Bottom metadata tags on image */}
                          <div className="absolute bottom-2.5 left-3 right-3 flex items-center justify-between text-[11px] font-mono text-white/90">
                            <span className="px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-xs border border-white/10 text-[10px]">
                              {p.category}
                            </span>
                            <span className="text-amber-400 font-bold bg-black/50 px-2 py-0.5 rounded-md backdrop-blur-xs text-[10px]">
                              ★ {p.rating}
                            </span>
                          </div>
                        </Link>

                        {/* Multi-Angle Photo Thumbnails Strip */}
                        <div className="px-3.5 py-2 bg-slate-50/90 border-b border-slate-100 flex items-center justify-between">
                          <div className="flex items-center gap-1.5">
                            {p.gallery.map((thumbUrl, idx) => (
                              <button
                                key={idx}
                                type="button"
                                onMouseEnter={() => setSelectedImageMap((prev) => ({ ...prev, [p.id]: thumbUrl }))}
                                onClick={() => setSelectedImageMap((prev) => ({ ...prev, [p.id]: thumbUrl }))}
                                className={`w-8 h-8 rounded-lg overflow-hidden border transition-all ${
                                  activeImage === thumbUrl
                                    ? 'border-red-600 ring-2 ring-red-500/30 scale-105 shadow-xs'
                                    : 'border-slate-200 hover:border-slate-400 opacity-60 hover:opacity-100'
                                }`}
                                title={`Angle ${idx + 1}`}
                              >
                                <img src={thumbUrl} alt="" className="w-full h-full object-cover" />
                              </button>
                            ))}
                          </div>
                          <span className="text-[10px] font-mono text-slate-400 flex items-center gap-1">
                            <span>📷 {p.gallery.length} Shots</span>
                          </span>
                        </div>

                        {/* Content Area */}
                        <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
                          <div>
                            <div className="flex items-center justify-between text-[11px] text-slate-400 font-mono">
                              <span>{p.tag}</span>
                              <span className="text-slate-400 font-mono text-[10px]">({p.reviewsCount} reviews)</span>
                            </div>
                            <Link href={`/products/${p.id}`} className="block">
                              <h3 className="text-xs sm:text-sm font-bold text-slate-900 mt-1 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">
                                {p.name}
                              </h3>
                            </Link>
                            <p className="text-[11px] text-slate-500 mt-1 line-clamp-1">
                              {p.specs}
                            </p>
                          </div>

                          <div className="space-y-3 pt-3 border-t border-slate-100">
                            <div className="flex items-baseline justify-between">
                              <div>
                                <span className="text-[10px] uppercase font-mono text-slate-400 block">Member Price</span>
                                <span className="text-base font-extrabold font-mono text-red-600">
                                  ₹{p.memberPrice.toLocaleString()}
                                </span>
                              </div>
                              <div className="text-right">
                                <span className="text-[10px] uppercase font-mono text-slate-400 block">Retail</span>
                                <span className="text-xs font-mono text-slate-400 line-through">
                                  ₹{p.retailPrice.toLocaleString()}
                                </span>
                              </div>
                            </div>

                            <Link
                              href={`/products/${p.id}`}
                              className="w-full py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white text-xs font-bold transition-all shadow-md shadow-red-500/20 active:scale-95 flex items-center justify-center gap-1.5"
                            >
                              <span>View Product</span>
                              <span>&rarr;</span>
                            </Link>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </section>

              {/* 3 Core Highlights with rich e-commerce photography */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="group rounded-3xl bg-white border border-slate-200/90 shadow-sm hover:border-red-300 hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col justify-between">
                  <div className="h-36 w-full relative overflow-hidden bg-slate-950">
                    <img
                      src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?auto=format&fit=crop&w=600&q=80"
                      alt="Cashback Vault"
                      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-slate-950/80 via-transparent to-transparent" />
                    <span className="absolute bottom-3 left-3 px-2.5 py-1 rounded-lg bg-red-600 text-white font-mono text-[10px] font-bold shadow">
                      Instant Ledger Credit
                    </span>
                  </div>
                  <div className="p-5 flex-1 flex flex-col justify-between">
                    <div>
                      <h3 className="text-base font-bold text-slate-900 group-hover:text-red-600 transition-colors">₹500 Instant Cashback</h3>
                      <p className="text-xs text-slate-500 mt-2 leading-relaxed">
                        Every approved Charter Member receives an immediate ₹500 credit directly into their settlement ledger upon activation.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="group rounded-3xl bg-white border border-slate-200/90 shadow-sm hover:border-blue-300 hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col justify-between">
                  <div className="h-36 w-full relative overflow-hidden bg-slate-950">
                    <img
                      src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=600&q=80"
                      alt="Wholesale Clearing"
                      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-slate-950/80 via-transparent to-transparent" />
                    <span className="absolute bottom-3 left-3 px-2.5 py-1 rounded-lg bg-blue-600 text-white font-mono text-[10px] font-bold shadow">
                      Direct Wholesale
                    </span>
                  </div>
                  <div className="p-5 flex-1 flex flex-col justify-between">
                    <div>
                      <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-600 transition-colors">Up to 40% Margin Discount</h3>
                      <p className="text-xs text-slate-500 mt-2 leading-relaxed">
                        Direct access to primary manufacturer wholesale clearing across premium electronics and luxury fashion.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="group rounded-3xl bg-white border border-slate-200/90 shadow-sm hover:border-emerald-300 hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col justify-between">
                  <div className="h-36 w-full relative overflow-hidden bg-slate-950">
                    <img
                      src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80"
                      alt="Referral Dividends"
                      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-slate-950/80 via-transparent to-transparent" />
                    <span className="absolute bottom-3 left-3 px-2.5 py-1 rounded-lg bg-emerald-600 text-white font-mono text-[10px] font-bold shadow">
                      4-Tier Affiliate Engine
                    </span>
                  </div>
                  <div className="p-5 flex-1 flex flex-col justify-between">
                    <div>
                      <h3 className="text-base font-bold text-slate-900 group-hover:text-emerald-600 transition-colors">5% Perpetual Referral Yield</h3>
                      <p className="text-xs text-slate-500 mt-2 leading-relaxed">
                        Earn continuous 5% cash dividends on all orders placed by your direct network with T+0 instant payout.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ============================================================== */}
          {/* TAB 2: ABOUT SECTION (COMPREHENSIVE SOVEREIGN PROFILE)         */}
          {/* ============================================================== */}
          {activeTab === 'About' && (
            <div className="space-y-12">
              {/* Header Banner with Red & Blue Styling */}
              <div className="relative overflow-hidden rounded-3xl bg-[#080d1a] border border-slate-800 p-8 sm:p-12 text-white shadow-2xl">
                <div className="absolute top-0 right-0 w-80 h-80 bg-red-600/15 rounded-full blur-3xl pointer-events-none" />
                <div className="absolute bottom-0 left-0 w-80 h-80 bg-blue-600/15 rounded-full blur-3xl pointer-events-none" />

                <div className="relative z-10 max-w-3xl space-y-4">
                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/15 border border-blue-500/30 text-blue-300 text-xs font-mono font-semibold">
                    <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                    <span>INSTITUTIONAL PROFILE &bull; STATUTORY CONSORTIUM</span>
                  </div>

                  <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-white leading-tight">
                    About <span className="text-red-500">Quickzee</span>{' '}
                    <span className="text-blue-400">Reserve</span>
                  </h1>

                  <p className="text-sm sm:text-base text-slate-300 leading-relaxed">
                    Quickzee Reserve is India’s premier sovereign wholesale acquisition consortium and 4-tier affiliate ledger engine. We bridge primary manufacturer clearing rates with immutable cryptographic ledger settlement, eliminating retail markups and redistributing network dividends to our members.
                  </p>

                  <div className="flex flex-wrap items-center gap-4 pt-2">
                    <Link
                      href="/register"
                      className="px-6 py-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white font-bold text-xs tracking-wide shadow-lg shadow-red-500/25 transition-all"
                    >
                      Join Charter Membership &rarr;
                    </Link>
                    <button
                      onClick={() => setActiveTab('Contact Form')}
                      className="px-6 py-3 rounded-xl bg-slate-900/90 hover:bg-slate-800 border border-slate-700 text-slate-200 font-semibold text-xs transition-all"
                    >
                      Speak with Concierge
                    </button>
                  </div>
                </div>
              </div>

              {/* 4 Core Pillars of Quickzee Reserve */}
              <div className="space-y-6">
                <div className="text-center max-w-xl mx-auto space-y-1.5">
                  <span className="text-xs font-mono font-bold uppercase tracking-wider text-red-600">
                    Consortium Architecture
                  </span>
                  <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900">
                    The Four Sovereign Pillars
                  </h2>
                  <p className="text-xs text-slate-500">
                    Engineered to deliver institutional wholesale clearing and financial autonomy.
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                  {/* Pillar 1 */}
                  <div className="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm hover:border-red-300 hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
                    <div>
                      <div className="w-12 h-12 rounded-2xl bg-red-50 border border-red-100 text-red-600 flex items-center justify-center text-xl font-bold mb-4">
                        🏷️
                      </div>
                      <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-red-600">
                        Zero Middlemen
                      </span>
                      <h3 className="text-base font-bold text-slate-900 mt-1">
                        Wholesale Price Parity
                      </h3>
                      <p className="text-xs text-slate-600 mt-2 leading-relaxed">
                        Direct allocation from primary manufacturer bonded warehouses at up to 40% margin discount, bypassing 3-4 layers of traditional distributors.
                      </p>
                    </div>
                    <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500 font-mono">
                      <span>Margin Gain</span>
                      <span className="text-red-600 font-bold font-mono">Up to 40% Off</span>
                    </div>
                  </div>

                  {/* Pillar 2 */}
                  <div className="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm hover:border-blue-300 hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
                    <div>
                      <div className="w-12 h-12 rounded-2xl bg-blue-50 border border-blue-100 text-blue-600 flex items-center justify-center text-xl font-bold mb-4">
                        🌐
                      </div>
                      <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-blue-600">
                        Perpetual Royalty
                      </span>
                      <h3 className="text-base font-bold text-slate-900 mt-1">
                        4-Tier Referral Engine
                      </h3>
                      <p className="text-xs text-slate-600 mt-2 leading-relaxed">
                        Earn cascading dividends across 4 levels of your extended syndicate. Every cleared order by your network credits real cash into your wallet ledger.
                      </p>
                    </div>
                    <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500 font-mono">
                      <span>Network Reach</span>
                      <span className="text-blue-600 font-bold font-mono">4 Full Tiers</span>
                    </div>
                  </div>

                  {/* Pillar 3 */}
                  <div className="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm hover:border-emerald-300 hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
                    <div>
                      <div className="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4">
                        ⚡
                      </div>
                      <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-emerald-600">
                        Instant Settlement
                      </span>
                      <h3 className="text-base font-bold text-slate-900 mt-1">
                        Double-Entry Ledger
                      </h3>
                      <p className="text-xs text-slate-600 mt-2 leading-relaxed">
                        T+0 instant ledger reconciliation with bank-grade 256-bit encryption. Cashbacks, earnings, and order offsets resolve in milliseconds.
                      </p>
                    </div>
                    <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500 font-mono">
                      <span>Settlement Speed</span>
                      <span className="text-emerald-600 font-bold font-mono">T+0 Real-Time</span>
                    </div>
                  </div>

                  {/* Pillar 4 */}
                  <div className="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm hover:border-purple-300 hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
                    <div>
                      <div className="w-12 h-12 rounded-2xl bg-purple-50 border border-purple-100 text-purple-600 flex items-center justify-center text-xl font-bold mb-4">
                        🏛️
                      </div>
                      <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-purple-600">
                        Physical Presence
                      </span>
                      <h3 className="text-base font-bold text-slate-900 mt-1">
                        Bonded Corridor Desks
                      </h3>
                      <p className="text-xs text-slate-600 mt-2 leading-relaxed">
                        Operating primary clearing vaults in Mumbai (One BKC), Delhi, and Bengaluru, backed by dedicated relationship officers and &lt;15m response times.
                      </p>
                    </div>
                    <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500 font-mono">
                      <span>Concierge SLA</span>
                      <span className="text-purple-600 font-bold font-mono">&lt; 15 Minutes</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* How Quickzee Operates: 3-Step Step-by-Step Flow */}
              <div className="p-8 sm:p-10 rounded-3xl bg-slate-900 text-white shadow-xl relative overflow-hidden">
                <div className="relative z-10 space-y-8">
                  <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-white/10 pb-6">
                    <div>
                      <span className="text-xs font-mono font-bold uppercase tracking-wider text-red-400">
                        Operational Lifecycle
                      </span>
                      <h3 className="text-2xl sm:text-3xl font-extrabold text-white mt-1">
                        How Quickzee Reserve Works
                      </h3>
                    </div>
                    <div className="text-xs text-slate-400 max-w-sm">
                      Transparent execution from member verification to physical allocation and dividend disbursement.
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {/* Step 1 */}
                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-4">
                      <div className="flex items-center justify-between">
                        <span className="w-9 h-9 rounded-xl bg-red-600 text-white font-mono font-extrabold text-sm flex items-center justify-center shadow-md">
                          01
                        </span>
                        <span className="text-[10px] font-mono text-red-400 font-bold uppercase">Enrollment</span>
                      </div>
                      <h4 className="text-base font-bold text-white">Join Charter Membership</h4>
                      <p className="text-xs text-slate-300 leading-relaxed">
                        Activate your verified charter account for ₹7,800/yr. The system instantly credits <strong className="text-white">₹500 welcome cashback</strong> directly to your settlement wallet.
                      </p>
                    </div>

                    {/* Step 2 */}
                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-4">
                      <div className="flex items-center justify-between">
                        <span className="w-9 h-9 rounded-xl bg-blue-600 text-white font-mono font-extrabold text-sm flex items-center justify-center shadow-md">
                          02
                        </span>
                        <span className="text-[10px] font-mono text-blue-400 font-bold uppercase">Allocation</span>
                      </div>
                      <h4 className="text-base font-bold text-white">Wholesale Clearing Access</h4>
                      <p className="text-xs text-slate-300 leading-relaxed">
                        Acquire primary allocations across enterprise tech, Swiss horology, archival apparel, and luxury leather at manufacturer wholesale rates with instant order tracking.
                      </p>
                    </div>

                    {/* Step 3 */}
                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-4">
                      <div className="flex items-center justify-between">
                        <span className="w-9 h-9 rounded-xl bg-emerald-600 text-white font-mono font-extrabold text-sm flex items-center justify-center shadow-md">
                          03
                        </span>
                        <span className="text-[10px] font-mono text-emerald-400 font-bold uppercase">Liquidity</span>
                      </div>
                      <h4 className="text-base font-bold text-white">Earn Perpetual Dividends</h4>
                      <p className="text-xs text-slate-300 leading-relaxed">
                        Share your unique sponsor link. Earn continuous commissions across 4 network levels on all transactions, withdrawable to your bank account anytime.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* 4-Tier Affiliate Model Table Card */}
              <div className="p-8 sm:p-10 rounded-3xl bg-white border border-slate-200 shadow-xl space-y-6">
                <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-slate-100 pb-4">
                  <div>
                    <span className="text-xs font-mono font-bold uppercase tracking-wider text-red-600">
                      Network Economics
                    </span>
                    <h3 className="text-2xl font-extrabold text-slate-900 mt-1">
                      4-Level Referral Dividend Structure
                    </h3>
                  </div>
                  <div className="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-mono font-bold">
                    T+0 Instant Payouts Active
                  </div>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead>
                      <tr className="border-b border-slate-100 text-slate-400 font-mono text-[11px] uppercase">
                        <th className="pb-3 font-semibold">Tier Level</th>
                        <th className="pb-3 font-semibold">Network Relationship</th>
                        <th className="pb-3 font-semibold">Commission Dividend</th>
                        <th className="pb-3 font-semibold">Settlement Mechanism</th>
                        <th className="pb-3 font-semibold text-right">Earning Potential</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 text-slate-700">
                      <tr>
                        <td className="py-3.5 font-bold font-mono text-red-600">Tier 1 (Direct)</td>
                        <td className="py-3.5 font-semibold text-slate-900">Directly Sponsored Members</td>
                        <td className="py-3.5 font-bold font-mono text-slate-900">5.0% on Gross Volume</td>
                        <td className="py-3.5 text-slate-500">Instant T+0 Ledger Credit</td>
                        <td className="py-3.5 text-right font-mono font-bold text-emerald-600">Uncapped / Perpetual</td>
                      </tr>
                      <tr>
                        <td className="py-3.5 font-bold font-mono text-blue-600">Tier 2 (Syndicate)</td>
                        <td className="py-3.5 font-semibold text-slate-900">Sub-Referrals from Tier 1</td>
                        <td className="py-3.5 font-bold font-mono text-slate-900">3.0% on Gross Volume</td>
                        <td className="py-3.5 text-slate-500">Automated Wallet Credit</td>
                        <td className="py-3.5 text-right font-mono font-bold text-emerald-600">Multi-Node Compounding</td>
                      </tr>
                      <tr>
                        <td className="py-3.5 font-bold font-mono text-purple-600">Tier 3 (Extended)</td>
                        <td className="py-3.5 font-semibold text-slate-900">Network Lineage Level 3</td>
                        <td className="py-3.5 font-bold font-mono text-slate-900">2.0% on Gross Volume</td>
                        <td className="py-3.5 text-slate-500">Automated Wallet Credit</td>
                        <td className="py-3.5 text-right font-mono font-bold text-emerald-600">Passive Scale</td>
                      </tr>
                      <tr>
                        <td className="py-3.5 font-bold font-mono text-slate-700">Tier 4 (Sovereign)</td>
                        <td className="py-3.5 font-semibold text-slate-900">Network Lineage Level 4</td>
                        <td className="py-3.5 font-bold font-mono text-slate-900">1.0% on Gross Volume</td>
                        <td className="py-3.5 text-slate-500">Automated Wallet Credit</td>
                        <td className="py-3.5 text-right font-mono font-bold text-emerald-600">Ecosystem Depth Pool</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs text-slate-600 flex flex-col sm:flex-row items-center justify-between gap-3">
                  <div>
                    <strong className="text-slate-900">Monthly Qualification Rule:</strong> Members maintain an active monthly shopping order volume of ₹1,000 to keep all referral dividend withdrawals 100% active.
                  </div>
                  <Link
                    href="/register"
                    className="px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shrink-0 shadow-sm"
                  >
                    Activate Your Lineage &rarr;
                  </Link>
                </div>
              </div>

              {/* Compliance & Security Suite */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
                {/* Regulatory Compliance */}
                <div className="p-8 rounded-3xl bg-white border border-slate-200 shadow-md space-y-4">
                  <div className="flex items-center gap-2 text-xs font-mono font-bold uppercase text-blue-700">
                    <span>⚖️ STATUTORY & REGULATORY COMPLIANCE</span>
                  </div>
                  <h3 className="text-xl font-bold text-slate-900">
                    Strict Adherence to RBI & FEMA Directives
                  </h3>
                  <p className="text-xs text-slate-600 leading-relaxed">
                    Quickzee Reserve operates under established direct selling guidelines, tax deduction at source (TDS) compliance, GST invoicing for all physical allocations, and audited trust escrow accounting.
                  </p>
                  <div className="space-y-2 text-xs text-slate-700 pt-2">
                    <div className="flex items-center gap-2">
                      <span className="text-emerald-600 font-bold">✓</span>
                      <span>Formal GST tax invoices generated for every primary allocation</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-emerald-600 font-bold">✓</span>
                      <span>TDS filing and PAN-linked affiliate commission accounting</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-emerald-600 font-bold">✓</span>
                      <span>30-Day unconditional money-back guarantee on annual memberships</span>
                    </div>
                  </div>
                </div>

                {/* Technical Infrastructure */}
                <div className="p-8 rounded-3xl bg-gradient-to-br from-[#071330] to-[#040a1b] text-white shadow-xl space-y-4 border border-blue-900/60">
                  <div className="flex items-center gap-2 text-xs font-mono font-bold uppercase text-red-400">
                    <span>🛡️ CRYPTOGRAPHIC VAULT SECURITY</span>
                  </div>
                  <h3 className="text-xl font-bold text-white">
                    Bank-Grade Ledger Enclosure
                  </h3>
                  <p className="text-xs text-blue-200/80 leading-relaxed">
                    Our platform architecture employs end-to-end 256-bit TLS encryption, immutable double-entry database integrity, and automated fraud anomaly detection across all corridor withdrawals.
                  </p>
                  <div className="space-y-2 text-xs text-slate-300 pt-2">
                    <div className="flex items-center gap-2">
                      <span className="text-red-400 font-bold">✓</span>
                      <span>Double-entry accounting prevents ledger desynchronization</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-red-400 font-bold">✓</span>
                      <span>Centralized REST API backend as single source of truth</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-red-400 font-bold">✓</span>
                      <span>Real-time SMS & email dispatch with cryptographic PGP keys</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ============================================================== */}
          {/* TAB 3: BECOME A MEMBER (₹7,800 PLAN & BENEFITS)                */}
          {/* ============================================================== */}
          {activeTab === 'Become a Member' && (
            <div className="space-y-8">
              <div className="text-center max-w-xl mx-auto space-y-2">
                <span className="text-xs font-mono font-bold uppercase tracking-wider text-red-600">
                  Annual Sovereign Tier
                </span>
                <h2 className="text-2xl sm:text-4xl font-extrabold text-slate-900">
                  Become a Quickzee Charter Member
                </h2>
                <p className="text-xs sm:text-sm text-slate-500">
                  Immediate ledger access with ₹500 instant cashback credited upon activation.
                </p>
              </div>

              {/* Pricing Card */}
              <div className="max-w-md mx-auto rounded-3xl bg-white border border-slate-200 p-8 shadow-xl space-y-6">
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <span className="text-xs font-mono font-bold uppercase text-slate-400">Membership Assessment</span>
                  <span className="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-bold">
                    ✓ Cohort FY2024-26
                  </span>
                </div>

                <div className="flex items-baseline gap-1">
                  <span className="text-2xl font-bold font-mono text-red-600">₹</span>
                  <span className="text-5xl font-extrabold font-mono text-slate-900">7,800</span>
                  <span className="text-slate-500 text-sm font-normal ml-1">/ year</span>
                </div>

                <div className="space-y-3 p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs">
                  <div className="flex justify-between items-center text-slate-600">
                    <span>Base Annual Assessment</span>
                    <span className="font-mono text-slate-800 font-bold">₹7,800.00</span>
                  </div>
                  <div className="flex justify-between items-center text-red-600 font-bold bg-red-50 p-2 rounded-xl">
                    <span>Instant Reserve Credit / Cashback</span>
                    <span className="font-mono">- ₹500.00</span>
                  </div>
                  <div className="pt-2 border-t border-slate-200 flex justify-between items-center text-xs font-bold text-slate-900">
                    <span>Effective Net Allocation</span>
                    <span className="font-mono text-base text-red-600 font-extrabold">₹7,300.00</span>
                  </div>
                </div>

                <div className="space-y-2 text-xs text-slate-600">
                  <div className="flex items-center gap-2">
                    <span className="text-emerald-600 font-bold">✓</span>
                    <span>₹500 instant ledger cash credit (available for immediate offset)</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-red-600 font-bold">✓</span>
                    <span>Up to 40% margin discounts on wholesale catalog</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-blue-600 font-bold">✓</span>
                    <span>5% real-time perpetual network referral yield</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-purple-600 font-bold">✓</span>
                    <span>Dedicated 24/7 executive concierge line</span>
                  </div>
                </div>

                <Link
                  href="/register"
                  className="w-full block text-center py-4 rounded-xl bg-gradient-to-r from-red-600 via-rose-600 to-blue-700 hover:from-red-700 hover:to-blue-800 text-white font-bold text-xs tracking-wider uppercase shadow-lg shadow-red-500/25 transition-all hover:scale-[1.01] active:scale-[0.99]"
                >
                  Join Charter Membership — ₹7,800 &rarr;
                </Link>

                <div className="text-center text-[11px] text-slate-400">
                  🛡️ 30-Day Money-Back Guarantee &bull; 256-Bit Vault Enforced
                </div>
              </div>
            </div>
          )}

          {/* ============================================================== */}
          {/* TAB 4: CONTACT FORM (RED, BLUE & WHITE LUXURY THEME)           */}
          {/* ============================================================== */}
          {activeTab === 'Contact Form' && (
            <div className="space-y-8 max-w-6xl mx-auto">
              {/* Header with Red & Blue Accents */}
              <div className="text-center max-w-2xl mx-auto space-y-3">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-blue-800 text-xs font-mono font-semibold">
                  <span className="w-2 h-2 rounded-full bg-red-600 animate-pulse" />
                  <span>DIRECT BILATERAL CORRIDOR &bull; LIVE CONCIERGE</span>
                </div>
                <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
                  Contact <span className="text-red-600">Quickzee</span>{' '}
                  <span className="text-blue-700">Reserve</span>
                </h2>
                <p className="text-xs sm:text-sm text-slate-600 leading-relaxed">
                  Direct encrypted corridor for Charter Member onboarding, wholesale allocations, and high-value sovereign ledger inquiries.
                </p>
              </div>

              {/* 2-Column Split: Deep Blue Info Card (Left) + Pure White Red/Blue Form Card (Right) */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
                {/* LEFT COLUMN: Deep Sovereign Blue Card (5 Cols) */}
                <div className="lg:col-span-5 rounded-3xl bg-gradient-to-br from-[#071330] via-[#0c1f4a] to-[#040a1b] p-8 sm:p-10 text-white shadow-2xl border border-blue-900/60 flex flex-col justify-between relative overflow-hidden">
                  {/* Subtle Red & Blue Glow Elements */}
                  <div className="absolute top-0 right-0 w-64 h-64 bg-red-600/15 rounded-full blur-3xl pointer-events-none" />
                  <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl pointer-events-none" />

                  <div className="relative z-10 space-y-6">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 border border-red-500/40 text-red-300 text-[11px] font-mono">
                      <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
                      <span>CORRIDOR IN-WEST-01 &bull; 24/7 ONLINE</span>
                    </div>

                    <div>
                      <h3 className="text-2xl font-bold text-white tracking-tight">
                        Executive Desk & Private Advisory
                      </h3>
                      <p className="text-xs text-blue-200/80 mt-2 leading-relaxed">
                        Every inquiry is routed through dedicated bilateral channels with guaranteed institutional privacy and rapid turnaround.
                      </p>
                    </div>

                    {/* Direct Contact Points */}
                    <div className="space-y-4 pt-2">
                      <div className="p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xs flex items-start gap-4">
                        <div className="w-10 h-10 rounded-xl bg-red-600/20 border border-red-500/30 flex items-center justify-center text-red-400 font-bold shrink-0">
                          📞
                        </div>
                        <div>
                          <div className="text-[11px] font-mono uppercase tracking-wider text-blue-300">
                            Priority Toll-Free
                          </div>
                          <div className="text-sm font-bold text-white font-mono mt-0.5">
                            1800 890 7800
                          </div>
                          <div className="text-[10px] text-slate-400 mt-0.5">
                            Toll-Free 24/7 Red Velvet Priority Desk
                          </div>
                        </div>
                      </div>

                      <div className="p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xs flex items-start gap-4">
                        <div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold shrink-0">
                          ✉️
                        </div>
                        <div>
                          <div className="text-[11px] font-mono uppercase tracking-wider text-blue-300">
                            Encrypted Channel
                          </div>
                          <div className="text-xs font-bold text-white font-mono mt-0.5 break-all">
                            concierge@quickzee.inficomaiacademy.com
                          </div>
                          <div className="text-[10px] text-slate-400 mt-0.5">
                            PGP End-to-End Corridor Handshake
                          </div>
                        </div>
                      </div>

                      <div className="p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xs flex items-start gap-4">
                        <div className="w-10 h-10 rounded-xl bg-red-600/20 border border-red-500/30 flex items-center justify-center text-red-400 font-bold shrink-0">
                          🏛️
                        </div>
                        <div>
                          <div className="text-[11px] font-mono uppercase tracking-wider text-blue-300">
                            Clearing & Vault Office
                          </div>
                          <div className="text-xs text-slate-200 mt-0.5 leading-snug">
                            One BKC, Bandra Kurla Complex, Mumbai, Maharashtra 400051
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Guaranteed Response Badge */}
                  <div className="relative z-10 pt-6 mt-6 border-t border-white/10">
                    <div className="flex items-center justify-between text-xs">
                      <div className="flex items-center gap-2">
                        <span className="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping" />
                        <span className="text-blue-200 font-mono text-[11px]">Guaranteed Turnaround:</span>
                      </div>
                      <span className="px-2.5 py-1 rounded-lg bg-red-600/80 text-white font-mono font-bold text-[11px]">
                        &lt; 15 Minutes SLA
                      </span>
                    </div>

                    <div className="grid grid-cols-3 gap-2 mt-4 text-[10px] text-center font-mono text-slate-300">
                      <div className="py-1 px-2 rounded-lg bg-white/5 border border-white/10">
                        🛡️ 256-Bit TLS
                      </div>
                      <div className="py-1 px-2 rounded-lg bg-white/5 border border-white/10">
                        🔒 Zero Spam
                      </div>
                      <div className="py-1 px-2 rounded-lg bg-white/5 border border-white/10">
                        📜 NDA Protected
                      </div>
                    </div>
                  </div>
                </div>

                {/* RIGHT COLUMN: Crisp White Card with Red & Blue Accents (7 Cols) */}
                <div className="lg:col-span-7 rounded-3xl bg-white border border-slate-200/90 shadow-xl p-8 sm:p-10 relative overflow-hidden flex flex-col justify-between">
                  {/* Top Red & Blue Dual Gradient Accent Line */}
                  <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-red-600 via-blue-600 to-red-600" />

                  {contactSubmitted ? (
                    <div className="py-12 px-6 rounded-2xl bg-slate-50 border border-blue-100 text-center space-y-4 my-auto">
                      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-red-600 to-blue-700 text-white flex items-center justify-center mx-auto text-2xl font-bold shadow-lg shadow-blue-500/20">
                        ✓
                      </div>
                      <div className="inline-block px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-xs font-mono font-bold">
                        DISPATCH TICKET #QZ-{Math.floor(1000 + Math.random() * 9000)}
                      </div>
                      <h3 className="text-xl font-extrabold text-slate-900">
                        Message Transmitted Successfully
                      </h3>
                      <p className="text-xs text-slate-600 max-w-md mx-auto leading-relaxed">
                        Thank you, <strong className="text-slate-900">{contactName || 'Member'}</strong>. Your inquiry regarding <strong className="text-blue-700">"{contactSubject}"</strong> has been queued. Our corridor concierge will connect with you via mobile or email within <strong className="text-red-600">15 minutes</strong>.
                      </p>
                      <div className="pt-4">
                        <button
                          onClick={() => setContactSubmitted(false)}
                          className="px-6 py-2.5 rounded-xl bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold transition-all shadow-md active:scale-95"
                        >
                          Send Another Transmission &rarr;
                        </button>
                      </div>
                    </div>
                  ) : (
                    <form onSubmit={handleContactSubmit} className="space-y-5 text-xs">
                      <div>
                        <h3 className="text-lg font-bold text-slate-900">
                          Transmit Private Transmission
                        </h3>
                        <p className="text-xs text-slate-500 mt-0.5">
                          Please complete the fields below to initiate bilateral communication.
                        </p>
                      </div>

                      {/* Full Legal Name */}
                      <div>
                        <label className="block font-semibold text-slate-700 mb-1.5">
                          Full Legal Name <span className="text-red-600 font-bold">*</span>
                        </label>
                        <input
                          type="text"
                          required
                          placeholder="Somesh Sharma"
                          value={contactName}
                          onChange={(e) => setContactName(e.target.value)}
                          className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-xs"
                        />
                      </div>

                      {/* Email & Mobile */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block font-semibold text-slate-700 mb-1.5">
                            Official Email <span className="text-red-600 font-bold">*</span>
                          </label>
                          <input
                            type="email"
                            required
                            placeholder="somesh@example.com"
                            value={contactEmail}
                            onChange={(e) => setContactEmail(e.target.value)}
                            className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-xs"
                          />
                        </div>

                        <div>
                          <label className="block font-semibold text-slate-700 mb-1.5">
                            Mobile Number <span className="text-red-600 font-bold">*</span>
                          </label>
                          <input
                            type="tel"
                            required
                            placeholder="9876543210"
                            value={contactMobile}
                            onChange={(e) => setContactMobile(e.target.value)}
                            className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-xs"
                          />
                        </div>
                      </div>

                      {/* Inquiry Subject with Interactive Pills */}
                      <div>
                        <label className="block font-semibold text-slate-700 mb-1.5">
                          Inquiry Subject / Topic <span className="text-red-600 font-bold">*</span>
                        </label>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-2">
                          {[
                            { label: 'Charter Membership (₹7,800)', val: 'Membership Inquiry' },
                            { label: 'Wholesale Batch & Catalog', val: 'Wholesale Order' },
                            { label: 'Reserve Ledger & Settlement', val: 'Ledger & Settlement' },
                            { label: 'General Concierge Inquiry', val: 'Other' },
                          ].map((item) => (
                            <button
                              type="button"
                              key={item.val}
                              onClick={() => setContactSubject(item.val)}
                              className={`p-2.5 rounded-xl border text-left text-xs font-semibold transition-all flex items-center justify-between ${
                                contactSubject === item.val
                                  ? 'bg-blue-50 border-blue-600 text-blue-900 shadow-xs'
                                  : 'bg-slate-50 border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-100/70'
                              }`}
                            >
                              <span>{item.label}</span>
                              <span
                                className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center text-[8px] ${
                                  contactSubject === item.val
                                    ? 'bg-blue-600 border-blue-600 text-white'
                                    : 'border-slate-300'
                                }`}
                              >
                                {contactSubject === item.val ? '✓' : ''}
                              </span>
                            </button>
                          ))}
                        </div>
                      </div>

                      {/* Message Textarea */}
                      <div>
                        <label className="block font-semibold text-slate-700 mb-1.5">
                          Your Inquiry / Specification <span className="text-red-600 font-bold">*</span>
                        </label>
                        <textarea
                          required
                          rows={4}
                          placeholder="Please specify your request, acquisition requirement, or preferred callback hour..."
                          value={contactMessage}
                          onChange={(e) => setContactMessage(e.target.value)}
                          className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:bg-white transition-all text-xs"
                        />
                      </div>

                      {/* Submit Button in Red & Blue Theme */}
                      <button
                        type="submit"
                        className="w-full py-4 rounded-xl bg-gradient-to-r from-red-600 via-rose-600 to-blue-700 hover:from-red-700 hover:to-blue-800 text-white font-bold text-xs tracking-wider uppercase shadow-lg shadow-red-500/20 hover:shadow-blue-500/25 transition-all hover:scale-[1.005] active:scale-[0.99] flex items-center justify-center gap-2"
                      >
                        <span>Transmit Message to Concierge</span>
                        <span>&rarr;</span>
                      </button>

                      <div className="flex items-center justify-center gap-4 text-[11px] text-slate-400 pt-1">
                        <span className="flex items-center gap-1">
                          <span className="text-blue-600 font-bold">🔒</span> Encrypted Transmission
                        </span>
                        <span>&bull;</span>
                        <span className="flex items-center gap-1">
                          <span className="text-red-600 font-bold">⚡</span> 15-Minute Callback
                        </span>
                        <span>&bull;</span>
                        <span>Zero Marketing Spam</span>
                      </div>
                    </form>
                  )}
                </div>
              </div>
            </div>
          )}

        </div>
      </div>

      {/* ============================================================== */}
      {/* INSTITUTIONAL E-COMMERCE FOOTER                                 */}
      {/* ============================================================== */}
      <Footer onSelectTab={setActiveTab} />

      {/* ============================================================== */}
      {/* SIDEBAR DRAWER: CONTAINS LOGIN BUTTON & MEMBER CONTROLS        */}
      {/* ============================================================== */}
      {isSidebarOpen && (
        <div className="fixed inset-0 z-50 overflow-hidden">
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-slate-950/70 backdrop-blur-xs transition-opacity"
            onClick={() => setIsSidebarOpen(false)}
          />

          <div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
            <div className="w-screen max-w-sm bg-white p-6 shadow-2xl flex flex-col justify-between border-l border-slate-200">
              
              {/* Sidebar Header */}
              <div className="space-y-6">
                <div className="flex items-center justify-between pb-4 border-b border-slate-100">
                  <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded-lg bg-red-600 flex items-center justify-center text-white text-xs font-bold">
                      Q
                    </div>
                    <span className="text-sm font-bold text-slate-900">Reserve Sidebar</span>
                  </div>
                  <button
                    onClick={() => setIsSidebarOpen(false)}
                    className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
                  >
                    ✕
                  </button>
                </div>

                {/* LOGIN BUTTON OR LOGGED IN PROFILE CARD */}
                <div className="p-4 rounded-2xl bg-slate-50 border border-slate-200 space-y-3">
                  {!isAuthenticated ? (
                    <>
                      <div className="space-y-1">
                        <span className="text-xs font-bold text-slate-900">Member Access</span>
                        <p className="text-[11px] text-slate-500 leading-relaxed">
                          Sign in to manage your settlement ledger, orders, and 5% referral yield.
                        </p>
                      </div>

                      {/* Prominent Login Button in the Sidebar */}
                      <Link
                        href="/login"
                        onClick={() => setIsSidebarOpen(false)}
                        className="w-full py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white text-xs font-bold tracking-wide shadow-md shadow-red-500/25 transition-all text-center flex items-center justify-center gap-2"
                      >
                        <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
                        </svg>
                        <span>Login to Reserve Account &rarr;</span>
                      </Link>

                      <Link
                        href="/register"
                        onClick={() => setIsSidebarOpen(false)}
                        className="w-full py-2.5 rounded-xl border border-slate-300 hover:bg-white text-slate-700 text-xs font-semibold transition-all text-center block"
                      >
                        Register New Member (Claim ₹500)
                      </Link>
                    </>
                  ) : (
                    <div className="space-y-3">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-full bg-slate-900 text-white font-bold flex items-center justify-center text-xs">
                          {userInitials}
                        </div>
                        <div>
                          <div className="text-xs font-bold text-slate-900">{user.name}</div>
                          <div className="text-[10px] text-slate-500">{user.email}</div>
                          <span className="text-[10px] font-mono font-bold text-red-600">● {user.tier}</span>
                        </div>
                      </div>

                      <div className="p-3 rounded-xl bg-white border border-slate-100 flex justify-between items-center text-xs">
                        <span className="text-slate-500">Ledger Balance:</span>
                        <span className="font-mono font-bold text-emerald-600">₹{user.ledgerBalance.toLocaleString()}</span>
                      </div>

                      <button
                        onClick={handleLogout}
                        className="w-full py-2 rounded-xl bg-red-50 hover:bg-red-100 text-red-700 text-xs font-bold transition-all text-center"
                      >
                        Sign Out
                      </button>
                    </div>
                  )}
                </div>

                {/* Sidebar Navigation */}
                <div className="space-y-2 text-xs font-semibold text-slate-700">
                  <span className="text-[10px] font-mono uppercase text-slate-400 font-bold block pb-1">
                    Quick Navigation
                  </span>
                  {(['Home', 'About', 'Become a Member', 'Contact Form'] as const).map((tab) => (
                    <button
                      key={tab}
                      onClick={() => {
                        setActiveTab(tab);
                        setIsSidebarOpen(false);
                      }}
                      className={`w-full text-left px-3.5 py-2.5 rounded-xl transition-colors ${
                        activeTab === tab
                          ? 'bg-red-50 text-red-700 font-bold'
                          : 'hover:bg-slate-50 text-slate-700'
                      }`}
                    >
                      {tab}
                    </button>
                  ))}
                </div>
              </div>

              {/* Sidebar Footer info */}
              <div className="pt-4 border-t border-slate-100 text-[11px] text-slate-400 space-y-1">
                <div>Corridor: IN-WEST-01</div>
                <div>256-Bit Cryptographic Vault</div>
              </div>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}