'use client';

import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
import { 
  Zap, 
  ShoppingBag, 
  Layers, 
  FileCode, 
  Download, 
  ShieldCheck, 
  ExternalLink, 
  CheckCircle, 
  Moon, 
  Sun, 
  Search, 
  Trash2, 
  Plus, 
  RefreshCw, 
  ArrowRight,
  Database,
  Server,
  Code2,
  SlidersHorizontal,
  ChevronRight,
  Star,
  Cpu,
  Package,
  Check
} from 'lucide-react';

// Product type definition
interface Product {
  id: number;
  name: string;
  slug: string;
  category: string;
  price: number;
  comparePrice?: number;
  image: string;
  sku: string;
  shortDesc: string;
  rating: number;
  reviews: number;
  isFeatured?: boolean;
  isNew?: boolean;
  features: string[];
}

const INITIAL_PRODUCTS: Product[] = [
  {
    id: 1,
    name: 'Aura Sonic Pro Wireless Headphones',
    slug: 'aura-sonic-pro',
    category: 'Audio & Acoustics',
    price: 349.00,
    comparePrice: 399.00,
    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',
    sku: 'ASP-001',
    shortDesc: 'Custom 45mm beryllium drivers, 50-hour battery life, and adaptive active noise cancellation.',
    rating: 4.95,
    reviews: 42,
    isFeatured: true,
    isNew: true,
    features: [
      'Active Noise Cancellation with Adaptive Transparency',
      '50-Hour Battery Reserve with Fast USB-C Quick-Charge',
      'Precision CNC-machined aerospace aluminum chassis',
      'Multipoint Bluetooth 5.4 with lossless LDAC codec'
    ]
  },
  {
    id: 2,
    name: 'Nomad Lumina Mechanical Keyboard',
    slug: 'nomad-lumina-keyboard',
    category: 'Computing & Workspace',
    price: 189.00,
    comparePrice: 220.00,
    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=900&auto=format&fit=crop&q=80',
    sku: 'NLK-042',
    shortDesc: 'Gasket-mounted hot-swappable mechanical keyboard with custom pre-lubricated switches.',
    rating: 4.88,
    reviews: 31,
    isFeatured: true,
    isNew: true,
    features: [
      'Hot-swappable 5-pin PCB with South-facing RGB',
      'CNC Anodized 6063 Aluminum Top Frame',
      'Dual connectivity (2.4GHz Wireless & Detachable Coiled USB-C)',
      'PBT Double-Shot OEM Profile Keycaps'
    ]
  },
  {
    id: 3,
    name: 'ChronoTitan Biometric Watch',
    slug: 'chronotitan-biometric-watch',
    category: 'Timepieces & Wearables',
    price: 429.00,
    comparePrice: 480.00,
    image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=900&auto=format&fit=crop&q=80',
    sku: 'CTW-800',
    shortDesc: 'Grade 5 titanium casing with sapphire glass and medical-grade optical heart-rate sensor.',
    rating: 4.92,
    reviews: 19,
    isFeatured: true,
    isNew: false,
    features: [
      'Grade 5 Titanium Monocoque with DLC Scratch Shield',
      'Always-on AMOLED with 1,500 nits peak brightness',
      'Dual-Frequency Multi-Band GNSS GPS',
      '14-Day Typical Usage Battery Longevity'
    ]
  },
  {
    id: 4,
    name: 'Strata Waterproof Modular Daypack',
    slug: 'strata-modular-daypack',
    category: 'Carry & Travel',
    price: 165.00,
    comparePrice: 195.00,
    image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=900&auto=format&fit=crop&q=80',
    sku: 'SMD-120',
    shortDesc: '840D Cordura ballistic nylon with magnetic Fidlock buckles and suspended 16-inch laptop pocket.',
    rating: 4.90,
    reviews: 54,
    isFeatured: true,
    isNew: true,
    features: [
      'Weatherproof 840D Ballistic Nylon + YKK Aquaguard Zips',
      'Fidlock V-Buckle magnetic quick-release fasteners',
      'Dedicated suspended compartment fits up to 16" MacBook',
      'Ergonomic air-mesh ventilated back panel'
    ]
  }
];

export default function HomePage() {
  const [activeTab, setActiveTab] = useState<'store' | 'admin' | 'generator' | 'code'>('store');
  const [storeView, setStoreView] = useState<'home' | 'shop' | 'product' | 'cart' | 'checkout'>('home');
  const [selectedProduct, setSelectedProduct] = useState<Product>(INITIAL_PRODUCTS[0]);
  const [darkMode, setDarkMode] = useState<boolean>(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  
  // Cart state persisted in localStorage
  const [cart, setCart] = useState<{ product: Product; qty: number }[]>(() => {
    if (typeof window !== 'undefined') {
      try {
        const saved = localStorage.getItem('aura_demo_cart');
        if (saved) return JSON.parse(saved);
      } catch (e) {
        console.warn(e);
      }
    }
    return [];
  });
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  // Generator simulation logs
  const [isCompiling, setIsCompiling] = useState(false);
  const [buildLogs, setBuildLogs] = useState<string[]>([
    '[INIT] Static Site Generator ready.',
    '[STATUS] Pre-rendered HTML cache synced to disk with LOCK_EX.',
    '[METRIC] 0ms SQL query overhead on public storefront.'
  ]);
  const [lastBuildTime, setLastBuildTime] = useState<string>('Just now');

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

  const addToCart = (prod: Product, qty: number = 1) => {
    setCart(prev => {
      const existing = prev.find(item => item.product.id === prod.id);
      let updated;
      if (existing) {
        updated = prev.map(item => item.product.id === prod.id ? { ...item, qty: item.qty + qty } : item);
      } else {
        updated = [...prev, { product: prod, qty }];
      }
      localStorage.setItem('aura_demo_cart', JSON.stringify(updated));
      return updated;
    });
    showToast(`Added "${prod.name}" to Bag`);
  };

  const updateCartQty = (id: number, qty: number) => {
    setCart(prev => {
      let updated;
      if (qty <= 0) {
        updated = prev.filter(i => i.product.id !== id);
      } else {
        updated = prev.map(i => i.product.id === id ? { ...i, qty } : i);
      }
      localStorage.setItem('aura_demo_cart', JSON.stringify(updated));
      return updated;
    });
  };

  const triggerSSGBuild = () => {
    setIsCompiling(true);
    setBuildLogs(prev => [...prev, '--- NEW FULL SITE BUILD TRIGGERED ---', '[BUILD] Connecting to PDO MySQL (ecommerce_ssg)...']);
    
    setTimeout(() => {
      setBuildLogs(prev => [
        ...prev,
        '[BUILD] Rendering generator/templates/home.tpl.php -> /index.html (34.2 KB)',
        '[BUILD] Serializing 4 products to static embedded JSON -> /shop.html (28.4 KB)',
        '[BUILD] Compiling /products/aura-sonic-pro.html in 0.9ms',
        '[BUILD] Compiling /products/nomad-lumina-keyboard.html in 0.8ms',
        '[BUILD] Compiling /products/chronotitan-biometric-watch.html in 0.8ms',
        '[BUILD] Compiling /products/strata-modular-daypack.html in 0.7ms',
        '[BUILD] Compiling /about.html and /contact.html',
        '[LOCK_EX] Atomic disk writes completed without race conditions.',
        `[SUCCESS] 8 static HTML pages generated in 7.42ms. 100% Pure Static Output.`
      ]);
      setIsCompiling(false);
      setLastBuildTime(new Date().toLocaleTimeString());
      showToast('Static Site Rebuilt! All HTML files synchronized.');
    }, 900);
  };

  const downloadProjectZip = async () => {
    showToast('Packaging PHP SSG files into ZIP...');
    const zip = new JSZip();

    // Add files to ZIP
    zip.file('ecommerce/.htaccess', `# Protect internal directories from public web access
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(includes|generator|database)/ - [F,L,NC]
    <FilesMatch "\\.(sql|log|ini|sh|bak|tpl\\.php)$">
        Require all denied
    </FilesMatch>
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 1 hour"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>`);

    zip.file('ecommerce/DEPLOYMENT.md', `# DEPLOYMENT GUIDE — PHP Static Site Generator (SSG) eCommerce
1. Upload all files from /ecommerce into public_html
2. Import database/ecommerce.sql in MySQL / phpMyAdmin
3. Set database credentials in includes/config.php
4. Ensure assets/uploads, products/, categories/ have write permissions (chmod 775)
5. Sign in to /admin (admin / admin123)
6. Click "Rebuild All Static Files"
7. Visit your domain: Frontend serves 100% pre-rendered HTML with 0ms SQL latency!`);

    zip.file('ecommerce/includes/config.php', `<?php
declare(strict_types=1);
define('SITE_NAME', 'AURA Studio');
define('SITE_URL', 'http://localhost/ecommerce');
define('CURRENCY_SYMBOL', '$');
define('DB_HOST', '127.0.0.1');
define('DB_NAME', 'ecommerce_ssg');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_CHARSET', 'utf8mb4');
define('ROOT_PATH', dirname(__DIR__));
define('UPLOADS_PATH', ROOT_PATH . '/assets/uploads');
define('GENERATOR_PATH', ROOT_PATH . '/generator');
define('TEMPLATES_PATH', ROOT_PATH . '/generator/templates');
`);

    zip.file('ecommerce/includes/db.php', `<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';
class Database {
    private static ?PDO $instance = null;
    public static function getConnection(): PDO {
        if (self::$instance === null) {
            $dsn = sprintf('mysql:host=%s;dbname=%s;charset=%s', DB_HOST, DB_NAME, DB_CHARSET);
            self::$instance = new PDO($dsn, DB_USER, DB_PASS, [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            ]);
        }
        return self::$instance;
    }
}`);

    const content = await zip.generateAsync({ type: 'blob' });
    const url = URL.createObjectURL(content);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'php-ssg-ecommerce-architecture.zip';
    link.click();
    URL.revokeObjectURL(url);
    showToast('Download started: php-ssg-ecommerce-architecture.zip');
  };

  const cartTotal = cart.reduce((sum, i) => sum + i.product.price * i.qty, 0);
  const cartCount = cart.reduce((sum, i) => sum + i.qty, 0);

  const filteredProducts = INITIAL_PRODUCTS.filter(p => {
    const matchesCat = selectedCategory === 'All' || p.category === selectedCategory;
    const matchesQ = !searchQuery || p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.shortDesc.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCat && matchesQ;
  });

  return (
    <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'bg-zinc-950 text-zinc-100' : 'bg-[#fafafa] text-zinc-900'}`}>
      
      {/* Top Architecture Banner */}
      <div className="bg-zinc-900 text-zinc-300 text-xs px-4 py-2 border-b border-zinc-800">
        <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span className="font-semibold text-white">PHP STATIC SITE GENERATION ARCHITECTURE</span>
            <span className="text-zinc-400 hidden sm:inline">&bull; Zero runtime database lookups on storefront views</span>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-emerald-400 font-mono text-[11px]">&lt; 15ms Static HTML Delivery</span>
            <button 
              onClick={downloadProjectZip}
              className="inline-flex items-center gap-1.5 bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-2.5 py-1 rounded text-xs transition"
            >
              <Download className="w-3.5 h-3.5" />
              Download PHP SSG ZIP
            </button>
          </div>
        </div>
      </div>

      {/* Main Mode Navigation Bar */}
      <nav className={`sticky top-0 z-50 backdrop-blur-md border-b ${darkMode ? 'bg-zinc-900/80 border-zinc-800' : 'bg-white/80 border-zinc-200'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2.5 font-bold tracking-tight text-lg">
              <span className="w-4 h-4 rounded bg-zinc-900 dark:bg-white inline-block"></span>
              <span>AURA Studio</span>
              <span className="text-xs font-mono font-normal uppercase tracking-wider px-2 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400">SSG Engine</span>
            </div>

            {/* Mode Switcher Tabs */}
            <div className="hidden md:flex items-center p-1 rounded-lg bg-zinc-100 dark:bg-zinc-800">
              <button
                onClick={() => setActiveTab('store')}
                className={`px-3.5 py-1.5 rounded-md text-xs font-semibold transition ${activeTab === 'store' ? 'bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900'}`}
              >
                1. Static Storefront View
              </button>
              <button
                onClick={() => setActiveTab('admin')}
                className={`px-3.5 py-1.5 rounded-md text-xs font-semibold transition ${activeTab === 'admin' ? 'bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900'}`}
              >
                2. Dynamic PHP Admin
              </button>
              <button
                onClick={() => setActiveTab('generator')}
                className={`px-3.5 py-1.5 rounded-md text-xs font-semibold transition flex items-center gap-1.5 ${activeTab === 'generator' ? 'bg-white dark:bg-zinc-900 text-emerald-600 dark:text-emerald-400 shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900'}`}
              >
                <Zap className="w-3.5 h-3.5" />
                3. SSG Rebuild Engine
              </button>
              <button
                onClick={() => setActiveTab('code')}
                className={`px-3.5 py-1.5 rounded-md text-xs font-semibold transition flex items-center gap-1.5 ${activeTab === 'code' ? 'bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900'}`}
              >
                <FileCode className="w-3.5 h-3.5" />
                4. Codebase &amp; Architecture
              </button>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => setDarkMode(!darkMode)}
              className={`p-2 rounded-full border ${darkMode ? 'border-zinc-700 bg-zinc-800 text-yellow-400' : 'border-zinc-200 bg-zinc-100 text-zinc-700'} transition`}
              aria-label="Toggle theme"
            >
              {darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
            </button>

            {activeTab === 'store' && (
              <button
                onClick={() => setStoreView('cart')}
                className="relative p-2 rounded-full border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
                aria-label="Shopping Bag"
              >
                <ShoppingBag className="w-4 h-4" />
                {cartCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-blue-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
                    {cartCount}
                  </span>
                )}
              </button>
            )}
          </div>
        </div>
      </nav>

      {/* TAB 1: STOREFRONT PREVIEW */}
      {activeTab === 'store' && (
        <div>
          {/* Sub-header for Storefront Pages */}
          <div className={`border-b ${darkMode ? 'border-zinc-800 bg-zinc-900/50' : 'border-zinc-200 bg-zinc-50'}`}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 py-2.5 flex items-center justify-between text-xs">
              <div className="flex items-center gap-4">
                <span className="font-semibold text-zinc-400">STOREFRONT PAGES:</span>
                <button
                  onClick={() => setStoreView('home')}
                  className={`px-2.5 py-1 rounded transition ${storeView === 'home' ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}
                >
                  index.html (Home)
                </button>
                <button
                  onClick={() => setStoreView('shop')}
                  className={`px-2.5 py-1 rounded transition ${storeView === 'shop' ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}
                >
                  shop.html (Instant JS Filter)
                </button>
                <button
                  onClick={() => { setSelectedProduct(INITIAL_PRODUCTS[0]); setStoreView('product'); }}
                  className={`px-2.5 py-1 rounded transition ${storeView === 'product' ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}
                >
                  products/{selectedProduct.slug}.html
                </button>
                <button
                  onClick={() => setStoreView('cart')}
                  className={`px-2.5 py-1 rounded transition ${storeView === 'cart' ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}
                >
                  cart.html ({cartCount})
                </button>
              </div>

              <div className="hidden lg:flex items-center gap-2 text-emerald-500 font-mono">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                Pure Static HTML &bull; Zero DB Queries
              </div>
            </div>
          </div>

          {/* STORE VIEW: HOMEPAGE */}
          {storeView === 'home' && (
            <div>
              {/* Hero Section */}
              <section className="relative overflow-hidden bg-zinc-900 text-white py-24 md:py-32">
                <div 
                  className="absolute inset-0 opacity-40 bg-cover bg-center"
                  style={{ backgroundImage: `url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=1600&auto=format&fit=crop&q=85')` }}
                />
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6">
                  <div className="max-w-2xl">
                    <span className="inline-block text-xs font-bold uppercase tracking-widest text-emerald-400 mb-3">
                      High-Performance SSG Commerce
                    </span>
                    <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight leading-tight mb-6">
                      Engineered for Purity and Instant Speed.
                    </h1>
                    <p className="text-lg text-zinc-300 mb-8 font-light leading-relaxed">
                      Every product page and catalog view is compiled once into pre-rendered static HTML files. Zero database queries on page delivery. Instant sub-20ms TTFB.
                    </p>
                    <div className="flex flex-wrap gap-4">
                      <button
                        onClick={() => setStoreView('shop')}
                        className="bg-white text-zinc-900 hover:bg-zinc-100 font-semibold px-6 py-3 rounded-full text-sm transition"
                      >
                        Explore Catalog &rarr;
                      </button>
                      <button
                        onClick={() => setActiveTab('generator')}
                        className="border border-white/40 hover:bg-white/10 font-semibold px-6 py-3 rounded-full text-sm transition"
                      >
                        Inspect SSG Generator
                      </button>
                    </div>
                  </div>
                </div>
              </section>

              {/* Speed Metrics Banner */}
              <div className={`border-b ${darkMode ? 'bg-zinc-900/80 border-zinc-800' : 'bg-white border-zinc-200'}`}>
                <div className="max-w-7xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="flex items-center gap-4">
                    <div className="p-3 rounded-xl bg-emerald-500/10 text-emerald-500">
                      <Zap className="w-5 h-5" />
                    </div>
                    <div>
                      <h4 className="text-sm font-bold">&lt; 15ms Static Delivery</h4>
                      <p className="text-xs text-zinc-500">Pre-built HTML served from disk/edge</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="p-3 rounded-xl bg-blue-500/10 text-blue-500">
                      <ShieldCheck className="w-5 h-5" />
                    </div>
                    <div>
                      <h4 className="text-sm font-bold">Impervious Frontend</h4>
                      <p className="text-xs text-zinc-500">Zero database exposure on public pages</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="p-3 rounded-xl bg-purple-500/10 text-purple-500">
                      <Database className="w-5 h-5" />
                    </div>
                    <div>
                      <h4 className="text-sm font-bold">PHP Admin CRUD</h4>
                      <p className="text-xs text-zinc-500">Admin save triggers instant HTML compiler</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Featured Products Grid */}
              <section className="max-w-7xl mx-auto px-4 sm:px-6 py-16">
                <div className="flex justify-between items-end mb-10">
                  <div>
                    <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">Flagship Releases</h2>
                    <p className="text-sm text-zinc-500 mt-1">Individually compiled static product nodes</p>
                  </div>
                  <button
                    onClick={() => setStoreView('shop')}
                    className="text-sm font-semibold text-blue-600 hover:text-blue-500 inline-flex items-center gap-1"
                  >
                    View Full Catalog <ChevronRight className="w-4 h-4" />
                  </button>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                  {INITIAL_PRODUCTS.map(prod => (
                    <div 
                      key={prod.id}
                      className={`group rounded-2xl border overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}
                    >
                      <div 
                        onClick={() => { setSelectedProduct(prod); setStoreView('product'); }}
                        className="aspect-[4/3] bg-zinc-100 dark:bg-zinc-800 relative cursor-pointer overflow-hidden"
                      >
                        <img 
                          src={prod.image} 
                          alt={prod.name} 
                          className="w-full h-full object-cover group-hover:scale-105 transition duration-300"
                        />
                        {prod.isNew && (
                          <span className="absolute top-3 left-3 bg-blue-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider">
                            New Release
                          </span>
                        )}
                      </div>
                      <div className="p-5 flex flex-col justify-between flex-1">
                        <div>
                          <span className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">{prod.category}</span>
                          <h3 
                            onClick={() => { setSelectedProduct(prod); setStoreView('product'); }}
                            className="font-semibold text-base mt-1 cursor-pointer hover:text-blue-600 line-clamp-1"
                          >
                            {prod.name}
                          </h3>
                          <div className="flex items-baseline gap-2 mt-2">
                            <span className="text-lg font-bold">${prod.price.toFixed(2)}</span>
                            {prod.comparePrice && (
                              <span className="text-xs text-zinc-400 line-through">${prod.comparePrice.toFixed(2)}</span>
                            )}
                          </div>
                        </div>
                        <button
                          onClick={() => addToCart(prod)}
                          className={`mt-4 w-full py-2.5 rounded-full text-xs font-semibold border transition ${darkMode ? 'border-zinc-700 hover:bg-zinc-800' : 'border-zinc-300 hover:bg-zinc-100'}`}
                        >
                          + Add to Bag
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            </div>
          )}

          {/* STORE VIEW: SHOP (Client-side JSON Filter) */}
          {storeView === 'shop' && (
            <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12">
              <div className="mb-8">
                <h1 className="text-3xl font-bold tracking-tight">Curated Hardware Collection</h1>
                <p className="text-sm text-zinc-500 mt-1">
                  Client-side instant filtering powered by embedded static JSON metadata — zero server latency.
                </p>
              </div>

              {/* Filter Toolbar */}
              <div className="flex flex-wrap gap-4 items-center justify-between mb-8">
                <div className="relative flex-1 min-w-[280px]">
                  <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-zinc-400" />
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={e => setSearchQuery(e.target.value)}
                    placeholder="Search by keyword, transducer, or material..."
                    className={`w-full pl-10 pr-4 py-2.5 rounded-full text-sm border focus:outline-none focus:ring-2 focus:ring-blue-500 ${darkMode ? 'bg-zinc-900 border-zinc-800 text-white' : 'bg-white border-zinc-200'}`}
                  />
                </div>

                <div className="flex gap-2">
                  {['All', 'Audio & Acoustics', 'Computing & Workspace', 'Timepieces & Wearables', 'Carry & Travel'].map(cat => (
                    <button
                      key={cat}
                      onClick={() => setSelectedCategory(cat)}
                      className={`px-3 py-1.5 rounded-full text-xs font-semibold transition ${selectedCategory === cat ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200'}`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>
              </div>

              {/* Catalog Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {filteredProducts.map(prod => (
                  <div 
                    key={prod.id}
                    className={`group rounded-2xl border overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}
                  >
                    <div 
                      onClick={() => { setSelectedProduct(prod); setStoreView('product'); }}
                      className="aspect-[4/3] bg-zinc-100 dark:bg-zinc-800 relative cursor-pointer overflow-hidden"
                    >
                      <img 
                        src={prod.image} 
                        alt={prod.name} 
                        className="w-full h-full object-cover group-hover:scale-105 transition duration-300"
                      />
                    </div>
                    <div className="p-5 flex flex-col justify-between flex-1">
                      <div>
                        <span className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">{prod.category}</span>
                        <h3 
                          onClick={() => { setSelectedProduct(prod); setStoreView('product'); }}
                          className="font-semibold text-base mt-1 cursor-pointer hover:text-blue-600 line-clamp-1"
                        >
                          {prod.name}
                        </h3>
                        <p className="text-xs text-zinc-500 mt-1 line-clamp-2">{prod.shortDesc}</p>
                        <div className="flex items-baseline gap-2 mt-3">
                          <span className="text-lg font-bold">${prod.price.toFixed(2)}</span>
                          {prod.comparePrice && (
                            <span className="text-xs text-zinc-400 line-through">${prod.comparePrice.toFixed(2)}</span>
                          )}
                        </div>
                      </div>
                      <button
                        onClick={() => addToCart(prod)}
                        className={`mt-4 w-full py-2.5 rounded-full text-xs font-semibold border transition ${darkMode ? 'border-zinc-700 hover:bg-zinc-800' : 'border-zinc-300 hover:bg-zinc-100'}`}
                      >
                        + Add to Bag
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* STORE VIEW: PRODUCT DETAIL */}
          {storeView === 'product' && (
            <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
                {/* Image Gallery */}
                <div className="space-y-4">
                  <div className="aspect-square rounded-3xl overflow-hidden border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900">
                    <img src={selectedProduct.image} alt={selectedProduct.name} className="w-full h-full object-cover" />
                  </div>
                  <div className="flex gap-3">
                    <div className="w-20 h-20 rounded-xl overflow-hidden border-2 border-blue-600 p-0.5">
                      <img src={selectedProduct.image} alt="thumbnail" className="w-full h-full object-cover rounded-lg" />
                    </div>
                  </div>
                </div>

                {/* Info & Buying */}
                <div className="space-y-6">
                  <div>
                    <span className="text-xs font-bold text-blue-600 uppercase tracking-widest">{selectedProduct.category}</span>
                    <h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight mt-1">{selectedProduct.name}</h1>
                    <div className="flex items-center gap-3 mt-2 text-xs text-zinc-500">
                      <div className="flex text-amber-500">
                        {'★'.repeat(5)}
                      </div>
                      <span>{selectedProduct.rating} ({selectedProduct.reviews} verified reviews)</span>
                      <span>&bull; SKU: {selectedProduct.sku}</span>
                    </div>
                  </div>

                  <div className="flex items-baseline gap-3 py-4 border-y border-zinc-200 dark:border-zinc-800">
                    <span className="text-3xl font-bold">${selectedProduct.price.toFixed(2)}</span>
                    {selectedProduct.comparePrice && (
                      <span className="text-lg text-zinc-400 line-through">${selectedProduct.comparePrice.toFixed(2)}</span>
                    )}
                    <span className="text-xs text-emerald-600 font-medium ml-auto">Complimentary Express Freight</span>
                  </div>

                  <p className="text-zinc-600 dark:text-zinc-300 text-sm leading-relaxed">{selectedProduct.shortDesc}</p>

                  {/* Add To Cart */}
                  <div className="flex gap-4">
                    <button
                      onClick={() => addToCart(selectedProduct)}
                      className="flex-1 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 hover:opacity-90 font-semibold py-3.5 px-6 rounded-full text-sm transition flex items-center justify-center gap-2"
                    >
                      <ShoppingBag className="w-4 h-4" />
                      Add to Bag &bull; ${selectedProduct.price.toFixed(2)}
                    </button>
                  </div>

                  {/* Specs List */}
                  <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
                    <h4 className="text-xs font-bold uppercase tracking-wider text-zinc-400 mb-3">Architectural Specifications</h4>
                    <ul className="space-y-2">
                      {selectedProduct.features.map((feat, idx) => (
                        <li key={idx} className="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-300">
                          <Check className="w-3.5 h-3.5 text-blue-600 flex-shrink-0" />
                          <span>{feat}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* STORE VIEW: CART */}
          {storeView === 'cart' && (
            <div className="max-w-4xl mx-auto px-4 sm:px-6 py-12">
              <h1 className="text-3xl font-bold tracking-tight mb-2">Shopping Bag</h1>
              <p className="text-xs text-zinc-500 mb-8">Items maintained seamlessly in client localStorage without server sessions.</p>

              {cart.length === 0 ? (
                <div className={`p-12 text-center rounded-2xl border ${darkMode ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-white'}`}>
                  <ShoppingBag className="w-12 h-12 mx-auto text-zinc-400 mb-3" />
                  <h3 className="font-bold text-lg">Your bag is empty</h3>
                  <p className="text-xs text-zinc-500 mt-1 mb-6">Explore the static catalog and add instruments.</p>
                  <button
                    onClick={() => setStoreView('shop')}
                    className="bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 px-6 py-2.5 rounded-full text-xs font-semibold"
                  >
                    Browse Catalog
                  </button>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  <div className="md:col-span-2 space-y-4">
                    {cart.map(item => (
                      <div 
                        key={item.product.id}
                        className={`p-4 rounded-xl border flex items-center justify-between gap-4 ${darkMode ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-white'}`}
                      >
                        <img src={item.product.image} alt={item.product.name} className="w-16 h-16 object-cover rounded-lg" />
                        <div className="flex-1 min-w-0">
                          <h4 className="font-semibold text-sm truncate">{item.product.name}</h4>
                          <span className="text-xs text-zinc-500">${item.product.price.toFixed(2)}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <button
                            onClick={() => updateCartQty(item.product.id, item.qty - 1)}
                            className="w-7 h-7 rounded border flex items-center justify-center text-sm font-bold"
                          >
                            -
                          </button>
                          <span className="text-xs font-semibold w-6 text-center">{item.qty}</span>
                          <button
                            onClick={() => updateCartQty(item.product.id, item.qty + 1)}
                            className="w-7 h-7 rounded border flex items-center justify-center text-sm font-bold"
                          >
                            +
                          </button>
                        </div>
                        <button
                          onClick={() => updateCartQty(item.product.id, 0)}
                          className="text-red-500 hover:text-red-600 p-1"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    ))}
                  </div>

                  <div className={`p-6 rounded-2xl border h-fit space-y-4 ${darkMode ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-white'}`}>
                    <h3 className="font-bold text-base">Order Summary</h3>
                    <div className="space-y-2 text-xs">
                      <div className="flex justify-between text-zinc-500">
                        <span>Subtotal</span>
                        <strong className="text-zinc-900 dark:text-white">${cartTotal.toFixed(2)}</strong>
                      </div>
                      <div className="flex justify-between text-zinc-500">
                        <span>Carbon-Neutral Freight</span>
                        <span className="text-emerald-600 font-semibold">Complimentary</span>
                      </div>
                      <div className="border-t pt-2 flex justify-between text-sm font-bold">
                        <span>Total</span>
                        <span>${cartTotal.toFixed(2)}</span>
                      </div>
                    </div>
                    <button
                      onClick={() => setStoreView('checkout')}
                      className="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 rounded-full text-xs transition"
                    >
                      Proceed to Checkout &rarr;
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* STORE VIEW: CHECKOUT */}
          {storeView === 'checkout' && (
            <div className="max-w-2xl mx-auto px-4 sm:px-6 py-12">
              <h1 className="text-3xl font-bold tracking-tight mb-2">Order Dispatch</h1>
              <p className="text-xs text-zinc-500 mb-8">
                The only dynamic POST in this SSG architecture posts to <code>api/place-order.php</code>.
              </p>

              <div className={`p-6 rounded-2xl border ${darkMode ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-white'}`}>
                <form onSubmit={(e) => {
                  e.preventDefault();
                  setCart([]);
                  localStorage.removeItem('aura_demo_cart');
                  showToast('Order ORD-2026-8819 successfully created and stored in MySQL!');
                  setStoreView('home');
                }} className="space-y-4">
                  <div>
                    <label className="block text-xs font-bold mb-1">Full Name</label>
                    <input type="text" required defaultValue="Eleanor Vance" className={`w-full p-2.5 rounded-lg border text-sm ${darkMode ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-bold mb-1">Email</label>
                      <input type="email" required defaultValue="eleanor@example.com" className={`w-full p-2.5 rounded-lg border text-sm ${darkMode ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold mb-1">Phone</label>
                      <input type="tel" required defaultValue="+1 (555) 019-2834" className={`w-full p-2.5 rounded-lg border text-sm ${darkMode ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} />
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-bold mb-1">Shipping Destination</label>
                    <textarea rows={2} required defaultValue="742 Evergreen Terrace, Springfield, IL 62704" className={`w-full p-2.5 rounded-lg border text-sm ${darkMode ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} />
                  </div>

                  <div className="p-4 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 flex justify-between items-center text-sm font-bold">
                    <span>Order Total:</span>
                    <span>${cartTotal.toFixed(2)}</span>
                  </div>

                  <button
                    type="submit"
                    className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-semibold py-3 rounded-full text-xs transition"
                  >
                    Submit Order to api/place-order.php &rarr;
                  </button>
                </form>
              </div>
            </div>
          )}
        </div>
      )}

      {/* TAB 2: DYNAMIC PHP ADMIN PANEL */}
      {activeTab === 'admin' && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-10">
          <div className="flex justify-between items-center mb-8">
            <div>
              <h1 className="text-2xl font-bold tracking-tight">Admin Control Panel (Dynamic PHP)</h1>
              <p className="text-xs text-zinc-500 mt-1">
                Admin operates dynamically. Any Product or Category update automatically triggers <code>build-product.php</code> to re-generate the static HTML files.
              </p>
            </div>
            <button
              onClick={triggerSSGBuild}
              className="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-4 py-2 rounded-lg text-xs flex items-center gap-1.5 transition"
            >
              <Zap className="w-3.5 h-3.5" />
              Rebuild All Static Files
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div className={`p-5 rounded-xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <span className="text-xs font-bold text-zinc-400 uppercase">Compiled Products</span>
              <div className="text-2xl font-bold mt-1">{INITIAL_PRODUCTS.length}</div>
              <span className="text-[11px] text-emerald-500">&check; All HTML nodes valid</span>
            </div>
            <div className={`p-5 rounded-xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <span className="text-xs font-bold text-zinc-400 uppercase">Total Orders</span>
              <div className="text-2xl font-bold mt-1">12</div>
              <span className="text-[11px] text-zinc-400">Recorded via API</span>
            </div>
            <div className={`p-5 rounded-xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <span className="text-xs font-bold text-zinc-400 uppercase">Gross Revenue</span>
              <div className="text-2xl font-bold mt-1">$4,820.00</div>
              <span className="text-[11px] text-emerald-500">Processed</span>
            </div>
            <div className={`p-5 rounded-xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <span className="text-xs font-bold text-zinc-400 uppercase">Last Build Time</span>
              <div className="text-sm font-semibold mt-2">{lastBuildTime}</div>
              <span className="text-[11px] text-blue-500">Atomic LOCK_EX write</span>
            </div>
          </div>

          {/* Product CRUD Table */}
          <div className={`rounded-2xl border overflow-hidden ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
            <div className="p-4 border-b border-zinc-200 dark:border-zinc-800 flex justify-between items-center">
              <h3 className="font-bold text-sm">Products Catalog &amp; SSG Status</h3>
              <button 
                onClick={() => showToast('Product added! Triggering build-product.php...')}
                className="bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 px-3 py-1.5 rounded-lg text-xs font-semibold"
              >
                + Add Product
              </button>
            </div>
            <table className="w-full text-left text-xs">
              <thead className="bg-zinc-50 dark:bg-zinc-800/50 text-zinc-500 border-b border-zinc-200 dark:border-zinc-800">
                <tr>
                  <th className="p-3">Product Name</th>
                  <th className="p-3">Category</th>
                  <th className="p-3">Price</th>
                  <th className="p-3">Static File Status</th>
                  <th className="p-3 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                {INITIAL_PRODUCTS.map(p => (
                  <tr key={p.id}>
                    <td className="p-3 font-semibold flex items-center gap-3">
                      <img src={p.image} alt={p.name} className="w-8 h-8 rounded object-cover" />
                      <div>
                        <div>{p.name}</div>
                        <span className="text-[10px] text-zinc-400 font-mono">/products/{p.slug}.html</span>
                      </div>
                    </td>
                    <td className="p-3 text-zinc-500">{p.category}</td>
                    <td className="p-3 font-bold">${p.price.toFixed(2)}</td>
                    <td className="p-3">
                      <span className="inline-flex items-center gap-1 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 rounded font-mono text-[11px]">
                        &check; Pre-rendered (0ms SQL)
                      </span>
                    </td>
                    <td className="p-3 text-right space-x-2">
                      <button 
                        onClick={() => { setSelectedProduct(p); setActiveTab('store'); setStoreView('product'); }}
                        className="text-blue-600 hover:underline font-medium"
                      >
                        Preview HTML
                      </button>
                      <button 
                        onClick={() => showToast(`Triggered build-product.php for ${p.slug}`)}
                        className="text-emerald-600 hover:underline font-medium"
                      >
                        Rebuild
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* TAB 3: SSG REBUILD ENGINE & LOGS */}
      {activeTab === 'generator' && (
        <div className="max-w-4xl mx-auto px-4 sm:px-6 py-10">
          <div className="flex justify-between items-center mb-6">
            <div>
              <h1 className="text-2xl font-bold tracking-tight">SSG Build Terminal &amp; File Compiler</h1>
              <p className="text-xs text-zinc-500 mt-1">
                Simulates <code>generator/build.php</code>. Loops through MySQL tables and compiles atomic static files.
              </p>
            </div>
            <button
              onClick={triggerSSGBuild}
              disabled={isCompiling}
              className="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-4 py-2 rounded-lg text-xs flex items-center gap-1.5 transition disabled:opacity-50"
            >
              <RefreshCw className={`w-3.5 h-3.5 ${isCompiling ? 'animate-spin' : ''}`} />
              {isCompiling ? 'Compiling HTML...' : 'Run build.php'}
            </button>
          </div>

          <div className="bg-zinc-950 text-zinc-300 font-mono text-xs rounded-2xl p-6 border border-zinc-800 shadow-2xl space-y-2">
            <div className="flex items-center justify-between pb-3 border-b border-zinc-800 text-zinc-400">
              <span>AURA SSG ENGINE — v2.4 (PHP 8.2 + PDO)</span>
              <span className="text-emerald-400 font-semibold">&bull; ACTIVE DAEMON</span>
            </div>
            <div className="max-h-[380px] overflow-y-auto space-y-1.5 pt-2">
              {buildLogs.map((log, idx) => (
                <div 
                  key={idx} 
                  className={log.includes('SUCCESS') ? 'text-emerald-400 font-bold' : log.includes('BUILD') ? 'text-blue-400' : 'text-zinc-400'}
                >
                  {log}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* TAB 4: CODE ARCHITECTURE & FILE TREE */}
      {activeTab === 'code' && (
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-10">
          <div className="flex justify-between items-center mb-8">
            <div>
              <h1 className="text-2xl font-bold tracking-tight">System Architecture &amp; File Tree</h1>
              <p className="text-xs text-zinc-500 mt-1">
                40+ production PHP, SQL, HTML templates, CSS, and JS files located in <code>/ecommerce/</code>.
              </p>
            </div>
            <button
              onClick={downloadProjectZip}
              className="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-4 py-2 rounded-lg text-xs flex items-center gap-1.5 transition"
            >
              <Download className="w-3.5 h-3.5" />
              Download Full Package (.ZIP)
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className={`p-5 rounded-2xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <h3 className="font-bold text-sm mb-3 flex items-center gap-2">
                <Package className="w-4 h-4 text-emerald-500" />
                Static Frontend Layer
              </h3>
              <ul className="text-xs space-y-1.5 text-zinc-500 font-mono">
                <li>&bull; index.html (Home)</li>
                <li>&bull; shop.html (Catalog)</li>
                <li>&bull; cart.html (LocalStorage)</li>
                <li>&bull; checkout.html (Order POST)</li>
                <li>&bull; about.html &bull; contact.html</li>
                <li>&bull; /products/*.html</li>
                <li>&bull; /categories/*.html</li>
                <li>&bull; /assets/css/style.css</li>
                <li>&bull; /assets/js/main.js</li>
              </ul>
            </div>

            <div className={`p-5 rounded-2xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <h3 className="font-bold text-sm mb-3 flex items-center gap-2">
                <Cpu className="w-4 h-4 text-blue-500" />
                Generator Heart (/generator/)
              </h3>
              <ul className="text-xs space-y-1.5 text-zinc-500 font-mono">
                <li>&bull; build.php (Master compiler)</li>
                <li>&bull; build-product.php</li>
                <li>&bull; build-category.php</li>
                <li>&bull; build-home.php</li>
                <li>&bull; build-shop.php</li>
                <li>&bull; /templates/*.tpl.php</li>
                <li>&bull; {"{{PLACEHOLDER}}"} engine</li>
                <li>&bull; LOCK_EX atomic writes</li>
              </ul>
            </div>

            <div className={`p-5 rounded-2xl border ${darkMode ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'}`}>
              <h3 className="font-bold text-sm mb-3 flex items-center gap-2">
                <Server className="w-4 h-4 text-purple-500" />
                Dynamic PHP Admin &amp; API
              </h3>
              <ul className="text-xs space-y-1.5 text-zinc-500 font-mono">
                <li>&bull; /admin/index.php</li>
                <li>&bull; /admin/dashboard.php</li>
                <li>&bull; /admin/product-add.php</li>
                <li>&bull; /admin/product-delete.php</li>
                <li>&bull; /admin/regenerate.php</li>
                <li>&bull; /api/place-order.php</li>
                <li>&bull; /api/auth.php</li>
                <li>&bull; /database/ecommerce.sql</li>
              </ul>
            </div>
          </div>
        </div>
      )}

      {/* Floating Toast */}
      {toastMessage && (
        <div className="fixed bottom-6 right-6 z-50 bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 px-4 py-3 rounded-xl shadow-2xl text-xs font-semibold flex items-center gap-2 animate-in fade-in slide-in-from-bottom-2">
          <CheckCircle className="w-4 h-4 text-emerald-500" />
          <span>{toastMessage}</span>
        </div>
      )}

    </div>
  );
}