<?php
session_start();

// Initialize mock session state if empty
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = [];
}
if (!isset($_SESSION['favorites'])) {
    $_SESSION['favorites'] = [];
}
if (!isset($_SESSION['orders'])) {
    $_SESSION['orders'] = [];
}
if (!isset($_SESSION['chat_messages'])) {
    $_SESSION['chat_messages'] = [
        ['sender' => 'system', 'text' => 'ยินดีต้อนรับสู่ Aether AI Concierge! มีอะไรให้เราช่วยแนะนำแฟชั่น Cyber Futuristic ในวันนี้ไหมครับ? ⚡', 'time' => date('H:i')]
    ];
}

// Database of Cyber Futuristic Products
$products = [
    [
        'id' => 1,
        'name_th' => 'Aether x aespa Cyber-Purple Casual Streetwear Hoodie',
        'name_en' => 'Aether x aespa Cyber-Purple Casual Streetwear Hoodie',
        'category' => 'Hoodie',
        'category_th' => 'ฮู้ดดี้',
        'price' => 1490,
        'original_price' => 2990,
        'image' => '../assets/images/winter_aespa.jpg',
        'images' => [
            '../assets/images/winter_aespa.jpg',
            '../assets/images/cyber_hoodie_1784876612441.png'
        ],
        'sizes' => ['S', 'M', 'L', 'XL', '2XL'],
        'colors_th' => ['ม่วงพาสเทล (Pastel Violet)', 'ดำสตรีท (Street Black)', 'เทาเงิน (Silver Grey)'],
        'colors_en' => ['Pastel Violet', 'Street Black', 'Silver Grey'],
        'stock' => 18,
        'rating' => 4.9,
        'review_count' => 142,
        'sales_count' => 680,
        'badge' => 'HOT ITEM',
        'description' => 'เสื้อฮู้ดดี้แขนยาวทรง Oversize สไตล์แคชชวลสตรีทแวร์ของสมาชิกวง aespa สวมใส่นุ่มสบายด้วยผ้า Cotton เกรดพรีเมียม ตัดเย็บสไตล์มินิมอลไซเบอร์',
        'is_new' => true,
        'is_best' => true,
        'is_recommended' => true
    ],
    [
        'id' => 2,
        'name_th' => 'aespa Metallic Accent Casual Varsity Jacket',
        'name_en' => 'aespa Metallic Accent Casual Varsity Jacket',
        'category' => 'Jacket',
        'category_th' => 'แจ็กเก็ต',
        'price' => 2890,
        'original_price' => 4500,
        'image' => '../assets/images/aespa_pants_new.png',
        'images' => [
            '../assets/images/aespa_pants_new.png',
            '../assets/images/ningning_aespa.png'
        ],
        'sizes' => ['M', 'L', 'XL'],
        'colors_th' => ['เงินโครเมียม (Metallic Silver)', 'ดำไซเบอร์ (Cyber Black)'],
        'colors_en' => ['Metallic Silver', 'Cyber Black'],
        'stock' => 12,
        'rating' => 5.0,
        'review_count' => 98,
        'sales_count' => 420,
        'badge' => 'NEW ARRIVAL',
        'description' => 'เสื้อแจ็กเก็ตกันหนาวทรงสตรีทแวร์ ดีไซน์เรียบเท่แต่งแถบโลหะสะท้อนแสงสไตล์ K-Pop aespa ลุคชิคๆ สวมใส่ได้จริงทุกวัน',
        'is_new' => true,
        'is_best' => false,
        'is_recommended' => true
    ],
    [
        'id' => 3,
        'name_th' => 'Neo-Casual Streetwear Jogger Cargo Pants',
        'name_en' => 'Neo-Casual Streetwear Jogger Cargo Pants',
        'category' => 'Pants',
        'category_th' => 'กางเกง',
        'price' => 1290,
        'original_price' => 2300,
        'image' => '../assets/images/aespa_jacket_new.png',
        'images' => [
            '../assets/images/aespa_jacket_new.png',
            '../assets/images/aespa_pants_new.png',
            '../assets/images/giselle_aespa.png'
        ],
        'sizes' => ['28', '30', '32', '34', '36'],
        'colors_th' => ['ดำสตรีท (Street Black)', 'ม่วงเข้ม (Deep Violet)'],
        'colors_en' => ['Street Black', 'Deep Violet'],
        'stock' => 25,
        'rating' => 4.8,
        'review_count' => 210,
        'sales_count' => 950,
        'badge' => 'BEST SELLER',
        'description' => 'กางเกงวอร์มและคาร์โก้สไตล์จ็อกเกอร์ สวมใส่สบายทรงเกาหลี แมตช์คู่กับเสื้อฮู้ดดี้ได้อย่างลงตัว',
        'is_new' => false,
        'is_best' => true,
        'is_recommended' => true
    ],
    [
        'id' => 4,
        'name_th' => 'aespa Cyber-Chic Beanie & Tech Accessories',
        'name_en' => 'aespa Cyber-Chic Beanie & Tech Accessories',
        'category' => 'Accessory',
        'category_th' => 'เครื่องประดับ',
        'price' => 890,
        'original_price' => 1500,
        'image' => 'https://images.unsplash.com/photo-1576871337622-98d48d1cf531?w=600&auto=format&fit=crop&q=80',
        'images' => [
            'https://images.unsplash.com/photo-1576871337622-98d48d1cf531?w=600&auto=format&fit=crop&q=80',
            'https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=600&auto=format&fit=crop&q=80'
        ],
        'sizes' => ['FREE SIZE'],
        'colors_th' => ['ดำ (Midnight Black)', 'ม่วง (Neon Purple)'],
        'colors_en' => ['Midnight Black', 'Neon Purple'],
        'stock' => 15,
        'rating' => 4.9,
        'review_count' => 85,
        'sales_count' => 310,
        'badge' => 'LIMITED',
        'description' => 'หมวกไหมพรม Beanie และอุปกรณ์ตกแต่งแฟชั่นแนว K-Pop ไซเบอร์ชิค เพิ่มกิมมิคความเท่ให้กับชุดกันหนาวของคุณ',
        'is_new' => true,
        'is_best' => true,
        'is_recommended' => false
    ],
    [
        'id' => 5,
        'name_th' => 'Cyberpunk Matrix Mesh Tech Graphic T-Shirt',
        'name_en' => 'Cyberpunk Matrix Mesh Tech Graphic T-Shirt',
        'category' => 'T-Shirt',
        'category_th' => 'เสื้อยืด',
        'price' => 790,
        'original_price' => 1490,
        'image' => '../assets/images/karina_aespa.png',
        'images' => [
            '../assets/images/karina_aespa.png',
            '../assets/images/aespa_tshirt_1784877280916.png'
        ],
        'sizes' => ['S', 'M', 'L', 'XL'],
        'colors_th' => ['ดำแมทริกซ์ (Matrix Black)', 'ขาวสว่าง (Neon White)'],
        'colors_en' => ['Matrix Black', 'Neon White'],
        'stock' => 30,
        'rating' => 4.7,
        'review_count' => 175,
        'sales_count' => 1120,
        'badge' => 'POPULAR',
        'description' => 'เสื้อยืดสกรีนลายกราฟิกพิกเซลแมทริกซ์เรืองแสง ดีไซน์แฟชั่นแนว aespa Savage/Armageddon ลุคสตรีทแวร์ไซเบอร์สุดเท่',
        'is_new' => false,
        'is_best' => true,
        'is_recommended' => true
    ],
    [
        'id' => 6,
        'name_th' => 'Futuristic Holographic Sling Cyber Bag',
        'name_en' => 'Futuristic Holographic Sling Cyber Bag',
        'category' => 'Bag',
        'category_th' => 'กระเป๋า',
        'price' => 1190,
        'original_price' => 1990,
        'image' => 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&auto=format&fit=crop&q=80',
        'images' => [
            'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&auto=format&fit=crop&q=80',
            'https://images.unsplash.com/photo-1622560480605-d83c853bc5c3?w=600&auto=format&fit=crop&q=80'
        ],
        'sizes' => ['ONE SIZE'],
        'colors_th' => ['ฮอโลกราฟิก (Holographic)', 'ดำนีออน (Cyber Black)'],
        'colors_en' => ['Holographic', 'Cyber Black'],
        'stock' => 15,
        'rating' => 4.8,
        'review_count' => 64,
        'sales_count' => 380,
        'badge' => 'NEW',
        'description' => 'กระเป๋าสะพายข้างดีไซน์ทรงเรขาคณิตฮอโลกราฟิก เล่นแสงไฟได้อย่างงดงาม พร้อมช่องใส่แท็บเล็ตและพอร์ตชาร์จ USB ด้านนอก',
        'is_new' => true,
        'is_best' => false,
        'is_recommended' => true
    ]
];

// Handle Form Posts / Actions
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    $action = $_POST['action'];

    if ($action === 'login') {
        $username = trim($_POST['username'] ?? '');
        $password = trim($_POST['password'] ?? '');
        $role = ($username === 'admin') ? 'admin' : 'user';
        
        if (!empty($username) && !empty($password)) {
            $_SESSION['user'] = [
                'username' => htmlspecialchars($username),
                'role' => $role,
                'logged_in' => true
            ];
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    } 
    elseif ($action === 'register') {
        $username = trim($_POST['username'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $password = trim($_POST['password'] ?? '');
        if (!empty($username) && !empty($email) && !empty($password)) {
            $_SESSION['user'] = [
                'username' => htmlspecialchars($username),
                'role' => 'user',
                'logged_in' => true
            ];
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    } 
    elseif ($action === 'logout') {
        unset($_SESSION['user']);
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }
}

// User session variables
$isLoggedIn = isset($_SESSION['user']['logged_in']) && $_SESSION['user']['logged_in'] === true;
$currentUser = $isLoggedIn ? $_SESSION['user']['username'] : '';
$isAdmin = $isLoggedIn && ($_SESSION['user']['role'] ?? '') === 'admin';
?>
<!DOCTYPE html>
<html lang="th" class="dark scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AETHER FASHION SHOP | Futuristic Cyber & AI Fashion Experience</title>
    <meta name="description" content="เว็บไซต์สั่งจองและจำหน่ายเสื้อผ้าแฟชั่นสไตล์ล้ำสมัย Cyber Futuristic สีดำ ม่วง และฟ้านีออน">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@400;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- CSS Styling (Cyber Futuristic Design System) -->
    <style>
        :root {
            --bg-main: #060713;
            --bg-card: rgba(18, 16, 38, 0.65);
            --bg-glass: rgba(15, 23, 42, 0.7);
            --neon-purple: #b026ff;
            --neon-purple-glow: rgba(176, 38, 255, 0.5);
            --neon-cyan: #00f3ff;
            --neon-cyan-glow: rgba(0, 243, 255, 0.5);
            --neon-pink: #ff007f;
            --text-main: #e2e8f0;
            --border-cyber: rgba(0, 243, 255, 0.25);
            --font-title: 'Orbitron', 'Prompt', sans-serif;
            --font-sub: 'Rajdhani', 'Prompt', sans-serif;
            --font-body: 'Prompt', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: var(--font-body);
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(176, 38, 255, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(0, 243, 255, 0.12) 0%, transparent 40%),
                linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #060713;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--neon-purple), var(--neon-cyan));
            border-radius: 4px;
        }

        /* Typography */
        .font-cyber {
            font-family: var(--font-title);
            letter-spacing: 1px;
        }
        .font-sub {
            font-family: var(--font-sub);
        }

        /* Neon Glow Effects */
        .neon-text-purple {
            color: var(--neon-purple);
            text-shadow: 0 0 10px var(--neon-purple-glow), 0 0 20px var(--neon-purple-glow);
        }
        .neon-text-cyan {
            color: var(--neon-cyan);
            text-shadow: 0 0 10px var(--neon-cyan-glow), 0 0 20px var(--neon-cyan-glow);
        }
        .neon-border-purple {
            border-color: var(--neon-purple);
            box-shadow: 0 0 15px var(--neon-purple-glow);
        }
        .neon-border-cyan {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 15px var(--neon-cyan-glow);
        }

        /* Glassmorphism Card */
        .cyber-glass {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-cyber);
            border-radius: 12px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .cyber-glass:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 15px rgba(0, 243, 255, 0.1);
            transform: translateY(-4px);
        }

        /* Cyber Buttons */
        .btn-cyber-primary {
            background: linear-gradient(135deg, var(--neon-purple) 0%, #7000ff 100%);
            color: #fff;
            border: 1px solid var(--neon-purple);
            font-family: var(--font-title);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px var(--neon-purple-glow);
        }
        .btn-cyber-primary:hover {
            background: linear-gradient(135deg, #c447ff 0%, var(--neon-purple) 100%);
            box-shadow: 0 0 25px rgba(176, 38, 255, 0.8), 0 0 10px #fff;
            transform: scale(1.02);
        }

        .btn-cyber-cyan {
            background: linear-gradient(135deg, #00b4d8 0%, var(--neon-cyan) 100%);
            color: #060713;
            border: 1px solid var(--neon-cyan);
            font-family: var(--font-title);
            font-weight: 800;
            text-transform: uppercase;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px var(--neon-cyan-glow);
        }
        .btn-cyber-cyan:hover {
            box-shadow: 0 0 25px rgba(0, 243, 255, 0.8), 0 0 12px #fff;
            transform: scale(1.02);
        }

        .btn-cyber-outline {
            background: transparent;
            color: var(--neon-cyan);
            border: 1px solid var(--neon-cyan);
            font-family: var(--font-title);
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-cyber-outline:hover {
            background: rgba(0, 243, 255, 0.15);
            box-shadow: 0 0 15px var(--neon-cyan-glow);
            color: #fff;
        }

        /* Cyber Badges */
        .cyber-badge {
            background: rgba(0, 243, 255, 0.15);
            color: var(--neon-cyan);
            border: 1px solid var(--neon-cyan);
            font-family: var(--font-sub);
            font-weight: 700;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Splash Screen Animation */
        #splash-screen {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: #030308;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }
        #splash-screen.fade-out {
            opacity: 0;
            visibility: hidden;
        }
        .cyber-loader {
            width: 80px;
            height: 80px;
            border: 4px solid transparent;
            border-top-color: var(--neon-purple);
            border-bottom-color: var(--neon-cyan);
            border-radius: 50%;
            animation: spin 1.2s linear infinite;
            box-shadow: 0 0 20px var(--neon-purple-glow);
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Floating Live Chat Widget */
        #chat-widget {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 900;
        }

        /* TikTok Style Video / Reel Overlay Simulation */
        .tiktok-badge {
            background: linear-gradient(45deg, #ff0050, #00f2fe);
            color: #fff;
            font-weight: bold;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Responsive Layout Grid */
        .grid-responsive {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
        }

        /* Category Filter Pills */
        .cat-pill {
            padding: 10px 22px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            cursor: pointer;
            font-family: var(--font-title);
            font-size: 13px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        .cat-pill.active, .cat-pill:hover {
            background: rgba(176, 38, 255, 0.2);
            border-color: var(--neon-purple);
            color: #fff;
            box-shadow: 0 0 15px var(--neon-purple-glow);
        }
    </style>

    <!-- Tailwind CSS (CDN for utility classes) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        cyberBg: '#060713',
                        cyberPurple: '#b026ff',
                        cyberCyan: '#00f3ff',
                        cyberPink: '#ff007f',
                        cyberCard: 'rgba(18, 16, 38, 0.65)'
                    }
                }
            }
        }
    </script>
</head>
<body class="text-slate-200">

    <!-- 1. SPLASH SCREEN (หน้าเปิดเว็บไซต์สุดล้ำ) -->
    <div id="splash-screen">
        <div class="relative flex items-center justify-center mb-6">
            <div class="cyber-loader"></div>
            <i class="fa-solid fa-bolt absolute text-2xl text-cyan-400 animate-pulse"></i>
        </div>
        <h1 class="font-cyber text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-500 via-cyan-400 to-pink-500 tracking-widest uppercase mb-2">
            AETHER FASHION
        </h1>
        <p class="font-sub text-sm text-cyan-300 tracking-widest uppercase animate-pulse">
            LOADING CYBER & AI FUTURISTIC EXPERIENCE...
        </p>
    </div>

    <!-- 2. HEADER & NAVIGATION BAR -->
    <header class="sticky top-0 z-50 w-full bg-slate-950/80 backdrop-blur-xl border-b border-cyan-500/20">
        <!-- Top Announcement Bar -->
        <div class="bg-gradient-to-r from-purple-900/60 via-slate-900 to-cyan-900/60 text-xs py-1.5 px-4 text-center border-b border-purple-500/20 flex justify-center items-center gap-2 font-sub">
            <span class="tiktok-badge"><i class="fa-brands fa-tiktok"></i> TIKTOK SHOP STYLE</span>
            <span>⚡ โปรโมชันเปิดตัว: ลดสูงสุด 50% + คูปองส่วนลดพิเศษส่งฟรีทั่วไทย!</span>
            <button onclick="copyCoupon('AETHER2026')" class="underline hover:text-cyan-300 cursor-pointer font-bold ml-2">โค้ด: AETHER2026</button>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
            <!-- Brand Logo -->
            <a href="#" class="flex items-center gap-3 group">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-600 to-cyan-400 p-0.5 shadow-[0_0_15px_rgba(0,243,255,0.5)] group-hover:scale-105 transition-transform">
                    <div class="w-full h-full bg-slate-950 rounded-[7px] flex items-center justify-center">
                        <i class="fa-solid fa-atom text-cyan-400 text-xl group-hover:rotate-180 transition-transform duration-700"></i>
                    </div>
                </div>
                <div>
                    <span class="font-cyber font-black text-xl md:text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-cyan-300 to-white tracking-widest">AETHER</span>
                    <span class="block text-[10px] font-sub text-cyan-400 tracking-widest uppercase -mt-1">CYBER FASHION SHOP</span>
                </div>
            </a>

            <!-- Search Bar (Live Search) -->
            <div class="hidden md:flex flex-1 max-w-md mx-8 relative">
                <input type="text" id="search-input" onkeyup="filterProducts()" placeholder="ค้นหาเสื้อผ้าไซเบอร์ ฮู้ดดี้ แจ็กเก็ต คาร์โก้..." 
                    class="w-full bg-slate-900/90 border border-cyan-500/30 rounded-full py-2 pl-10 pr-12 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 transition-all">
                <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-3 text-cyan-400 text-sm"></i>
                <button onclick="filterProducts()" class="absolute right-1 top-1 bg-purple-600 hover:bg-purple-500 text-white rounded-full px-3 py-1 text-xs font-cyber transition">
                    ค้นหา
                </button>
            </div>

            <!-- Navigation Controls & User Actions -->
            <div class="flex items-center gap-4">
                <!-- Wishlist Icon Counter -->
                <button onclick="openFavoritesModal()" class="relative text-slate-300 hover:text-cyan-400 p-2 transition" title="รายการโปรด">
                    <i class="fa-solid fa-heart text-xl"></i>
                    <span id="fav-counter" class="absolute -top-1 -right-1 bg-purple-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">0</span>
                </button>

                <!-- Shopping Cart Icon Counter -->
                <button onclick="toggleCartDrawer()" class="relative text-slate-300 hover:text-cyan-400 p-2 transition" title="ตะกร้าสินค้า">
                    <i class="fa-solid fa-bag-shopping text-xl"></i>
                    <span id="cart-counter" class="absolute -top-1 -right-1 bg-cyan-400 text-slate-950 text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-[0_0_8px_rgba(0,243,255,0.8)]">0</span>
                </button>

                <!-- User Auth Status -->
                <?php if ($isLoggedIn): ?>
                    <div class="flex items-center gap-3 pl-2 border-l border-cyan-500/30">
                        <div class="text-right hidden sm:block">
                            <span class="block text-xs text-slate-400">ยินดีต้อนรับ</span>
                            <span class="font-bold text-sm text-cyan-300 font-sub"><?= $currentUser; ?> <?= $isAdmin ? '<span class="text-xs bg-purple-600/80 px-1.5 py-0.5 rounded text-white font-cyber">ADMIN</span>' : '' ?></span>
                        </div>
                        
                        <?php if ($isAdmin): ?>
                            <button onclick="openAdminModal()" class="btn-cyber-outline py-1.5 px-3 text-xs" title="จัดการระบบผู้ดูแล">
                                <i class="fa-solid fa-sliders mr-1"></i> ADMIN
                            </button>
                        <?php endif; ?>

                        <form method="POST" action="" class="inline">
                            <input type="hidden" name="action" value="logout">
                            <button type="submit" class="text-xs text-rose-400 hover:text-rose-300 p-2 font-sub uppercase border border-rose-500/30 rounded-lg hover:bg-rose-500/10 transition" title="ออกจากระบบ">
                                <i class="fa-solid fa-right-from-bracket"></i>
                            </button>
                        </form>
                    </div>
                <?php else: ?>
                    <button onclick="openAuthModal('login')" class="btn-cyber-cyan py-2 px-4 text-xs font-cyber flex items-center gap-2">
                        <i class="fa-solid fa-user-astronaut"></i> เข้าสู่ระบบ
                    </button>
                <?php endif; ?>
            </div>
        </div>
    </header>

    <!-- 3. HERO SLIDER BANNER (แบนเนอร์สไลด์โปรโมชันอัตโนมัติ) -->
    <section class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
        <div class="cyber-glass relative overflow-hidden rounded-2xl border border-cyan-500/40 p-6 md:p-12 min-h-[360px] flex items-center">
            <!-- Background Banner Graphic -->
            <img src="../assets/images/cyber_fashion_banner_1784876598830.png" alt="Aether Banner" class="absolute inset-0 w-full h-full object-cover opacity-35 mix-blend-luminosity">
            <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/80 to-transparent"></div>

            <!-- Banner Text Content -->
            <div class="relative z-10 max-w-xl">
                <span class="cyber-badge mb-3 inline-block">CYBER FASHION COLLECTION 2026</span>
                <h2 class="font-cyber text-3xl md:text-5xl font-black text-white leading-tight mb-4">
                    FUTURE WEAR <br>
                    <span class="neon-text-cyan">REDEFINED BY AI</span>
                </h2>
                <p class="text-sm md:text-base text-slate-300 mb-6 font-light leading-relaxed">
                    สัมผัสประสบการณ์เสื้อผ้าแฟชั่นแห่งอนาคต ผสมผสานโทนสีม่วง-ฟ้านีออนกับดีไซน์เกราะไซเบอร์และเส้นใยสะท้อนแสงไฟเบอร์ออปติก สั่งจองได้ก่อนใครที่นี่!
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#catalog-section" class="btn-cyber-primary text-sm flex items-center gap-2">
                        <i class="fa-solid fa-bolt"></i> เลือกชมสินค้าสั่งจอง
                    </a>
                    <button onclick="copyCoupon('AETHER2026')" class="btn-cyber-outline text-sm flex items-center gap-2">
                        <i class="fa-solid fa-ticket text-purple-400"></i> รับคูปองส่วนลด 20%
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. CATEGORY FILTER BAR & SEARCH (หมวดหมู่สินค้า) -->
    <section id="catalog-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
            <div>
                <h3 class="font-cyber text-2xl font-bold text-white flex items-center gap-3">
                    <span class="w-3 h-8 bg-cyan-400 rounded-sm shadow-[0_0_10px_#00f3ff]"></span>
                    หมวดหมู่สินค้าแฟชั่น
                </h3>
                <p class="text-xs text-slate-400 font-sub mt-1">เลือกค้นหาเสื้อผ้าและอุปกรณ์ตามประเภทที่คุณชื่นชอบ</p>
            </div>

            <!-- Quick Filter Tabs -->
            <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
                <button onclick="filterCategory('All', this)" class="cat-pill active">ทั้งหมด (All)</button>
                <button onclick="filterCategory('Hoodie', this)" class="cat-pill">ฮู้ดดี้ (Hoodie)</button>
                <button onclick="filterCategory('Jacket', this)" class="cat-pill">แจ็กเก็ต (Jacket)</button>
                <button onclick="filterCategory('Pants', this)" class="cat-pill">กางเกง (Pants)</button>
                <button onclick="filterCategory('T-Shirt', this)" class="cat-pill">เสื้อยืด (T-Shirt)</button>
                <button onclick="filterCategory('Bag', this)" class="cat-pill">กระเป๋า (Bag)</button>
                <button onclick="filterCategory('Accessory', this)" class="cat-pill">เครื่องประดับ (Accessory)</button>
            </div>
        </div>

        <!-- PRODUCT CATALOG GRID (แสดงรายการสินค้า) -->
        <div id="product-grid" class="grid-responsive">
            <!-- Rendered dynamically by JavaScript -->
        </div>
    </section>

    <!-- 5. TIKTOK SHOP STYLE HIGHLIGHT SECTION (สินค้ามาใหม่ & สินค้าขายดี) -->
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16">
        <div class="cyber-glass p-8 border border-purple-500/30 relative overflow-hidden">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <span class="tiktok-badge mb-1"><i class="fa-solid fa-fire text-amber-300"></i> POPULAR TRENDING</span>
                    <h3 class="font-cyber text-2xl font-bold text-white">HOT PRE-ORDER TRENDS</h3>
                </div>
                <span class="text-xs font-sub text-cyan-400"><i class="fa-solid fa-rotate animate-spin"></i> Realtime Updating</span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-slate-900/80 p-4 rounded-xl border border-purple-500/20 flex gap-4 items-center">
                    <img src="../assets/images/winter_aespa.jpg" onerror="this.onerror=null; this.src='../assets/images/cyber_hoodie_1784876612441.png';" class="w-20 h-20 object-cover rounded-lg border border-purple-500/40">
                    <div>
                        <span class="text-[10px] text-purple-400 font-cyber">#1 BEST SELLER</span>
                        <h4 class="text-sm font-bold text-white line-clamp-1">Aether Cyber-Neon Hoodie</h4>
                        <span class="text-cyan-400 font-bold text-sm">฿1,490</span>
                        <p class="text-[11px] text-slate-400">จองแล้ว 680+ ชิ้น</p>
                    </div>
                </div>

                <div class="bg-slate-900/80 p-4 rounded-xl border border-cyan-500/20 flex gap-4 items-center">
                    <img src="../assets/images/aespa_jacket_new.png" onerror="this.onerror=null; this.src='../assets/images/ningning_aespa.png';" class="w-20 h-20 object-cover rounded-lg border border-cyan-500/40">
                    <div>
                        <span class="text-[10px] text-cyan-400 font-cyber">#2 TOP RATED</span>
                        <h4 class="text-sm font-bold text-white line-clamp-1">Quantum Metallic Armored Jacket</h4>
                        <span class="text-cyan-400 font-bold text-sm">฿2,890</span>
                        <p class="text-[11px] text-slate-400">จองแล้ว 420+ ชิ้น</p>
                    </div>
                </div>

                <div class="bg-slate-900/80 p-4 rounded-xl border border-pink-500/20 flex gap-4 items-center">
                    <img src="../assets/images/aespa_pants_new.png" onerror="this.onerror=null; this.src='../assets/images/giselle_aespa.png';" class="w-20 h-20 object-cover rounded-lg border border-pink-500/40">
                    <div>
                        <span class="text-[10px] text-pink-400 font-cyber">#3 TRENDING NOW</span>
                        <h4 class="text-sm font-bold text-white line-clamp-1">Neo-Tokyo Cargo Combat Pants</h4>
                        <span class="text-cyan-400 font-bold text-sm">฿1,290</span>
                        <p class="text-[11px] text-slate-400">จองแล้ว 950+ ชิ้น</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. PRODUCT DETAIL MODAL (หน้ารายละเอียดสินค้าหลายมุมมอง รีวิว ตะกร้า สั่งซื้อ) -->
    <div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden">
        <div class="relative w-full max-w-4xl bg-slate-900 border border-cyan-500/40 rounded-2xl shadow-[0_0_30px_rgba(0,243,255,0.2)] overflow-hidden max-h-[90vh] flex flex-col">
            <!-- Modal Header -->
            <div class="flex justify-between items-center px-6 py-4 border-b border-cyan-500/20 bg-slate-950/50">
                <span class="font-cyber text-sm text-cyan-400 flex items-center gap-2">
                    <i class="fa-solid fa-microchip"></i> PRODUCT SPECIFICATION
                </span>
                <button onclick="closeProductModal()" class="text-slate-400 hover:text-white text-xl font-bold p-1">✕</button>
            </div>

            <!-- Modal Content (Scrollable) -->
            <div class="p-6 overflow-y-auto flex-1 grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Left: Multi-angle Images Gallery -->
                <div class="space-y-4">
                    <div class="aspect-square rounded-xl overflow-hidden border border-purple-500/30 bg-slate-950 relative group">
                        <span id="modal-badge" class="cyber-badge absolute top-3 left-3 z-10">PRE-ORDER</span>
                        <img id="modal-main-img" src="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                    </div>
                    <div id="modal-gallery-thumbs" class="flex gap-3 overflow-x-auto">
                        <!-- Thumbnail images -->
                    </div>
                </div>

                <!-- Right: Product Details & Variant Selection -->
                <div class="flex flex-col justify-between space-y-4">
                    <div>
                        <h2 id="modal-title" class="font-cyber text-xl md:text-2xl font-bold text-white mb-2">-</h2>
                        
                        <!-- Ratings & Reviews -->
                        <div class="flex items-center gap-3 text-xs text-slate-300 mb-4">
                            <div class="flex text-amber-400 gap-1">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <span id="modal-rating" class="font-bold text-cyan-300">4.9</span>
                            <span class="text-slate-500">|</span>
                            <span id="modal-reviews" class="underline">142 รีวิว</span>
                            <span class="text-slate-500">|</span>
                            <span id="modal-sales" class="text-purple-400">สั่งจองแล้ว 680 ชิ้น</span>
                        </div>

                        <!-- Price Tag -->
                        <div class="p-4 rounded-xl bg-slate-950/70 border border-cyan-500/20 mb-4">
                            <div class="flex items-baseline gap-3">
                                <span id="modal-price" class="font-cyber text-3xl font-black text-cyan-400">฿-</span>
                                <span id="modal-orig-price" class="text-sm text-slate-500 line-through">฿-</span>
                                <span class="bg-rose-500/20 text-rose-400 text-xs px-2 py-0.5 rounded font-bold border border-rose-500/30">ลดพิเศษ</span>
                            </div>
                            <p class="text-[11px] text-slate-400 mt-1"><i class="fa-solid fa-truck-fast text-cyan-400"></i> สินค้ารับประกันคุณภาพ สั่งจองล่วงหน้าจัดส่งใน 7-14 วัน</p>
                        </div>

                        <!-- Description -->
                        <p id="modal-desc" class="text-xs text-slate-300 leading-relaxed mb-4">-</p>

                        <!-- Color Variant Selection -->
                        <div class="mb-4">
                            <label class="block text-xs font-cyber text-slate-400 mb-2">เลือกโทนสี (COLOR): <span id="selected-color-text" class="text-cyan-300 font-bold"></span></label>
                            <div id="modal-colors" class="flex flex-wrap gap-2"></div>
                        </div>

                        <!-- Size Variant Selection -->
                        <div class="mb-4">
                            <label class="block text-xs font-cyber text-slate-400 mb-2">เลือกขนาด (SIZE): <span id="selected-size-text" class="text-cyan-300 font-bold"></span></label>
                            <div id="modal-sizes" class="flex flex-wrap gap-2"></div>
                        </div>

                        <!-- Quantity Selector -->
                        <div class="flex items-center gap-4 mb-6">
                            <span class="text-xs font-cyber text-slate-400">จำนวน:</span>
                            <div class="flex items-center border border-cyan-500/30 rounded-lg bg-slate-950">
                                <button onclick="adjustModalQty(-1)" class="px-3 py-1 text-slate-300 hover:text-white font-bold">-</button>
                                <input type="text" id="modal-qty-input" value="1" readonly class="w-12 text-center bg-transparent text-cyan-300 font-bold text-sm">
                                <button onclick="adjustModalQty(1)" class="px-3 py-1 text-slate-300 hover:text-white font-bold">+</button>
                            </div>
                            <span class="text-xs text-slate-400">(คงเหลือในคลัง: <span id="modal-stock-counter" class="text-purple-400 font-bold">18</span> ชิ้น)</span>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="grid grid-cols-2 gap-4 pt-4 border-t border-cyan-500/20">
                        <button onclick="addToCartFromModal()" class="btn-cyber-outline py-3 text-xs flex items-center justify-center gap-2">
                            <i class="fa-solid fa-cart-plus"></i> เพิ่มลงตะกร้า
                        </button>
                        <button onclick="buyNowFromModal()" class="btn-cyber-cyan py-3 text-xs flex items-center justify-center gap-2">
                            <i class="fa-solid fa-bolt"></i> สั่งซื้อทันที
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 7. CART DRAWER (ตะกร้าสินค้าสไตล์ TikTok Shop) -->
    <div id="cart-drawer" class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-slate-950 border-l border-cyan-500/30 shadow-[0_0_40px_rgba(0,0,0,0.8)] transform translate-x-full transition-transform duration-300 flex flex-col">
        <div class="p-4 border-b border-cyan-500/20 flex justify-between items-center bg-slate-900/80">
            <h3 class="font-cyber text-base font-bold text-white flex items-center gap-2">
                <i class="fa-solid fa-bag-shopping text-cyan-400"></i> ตะกร้าสินค้าของคุณ
            </h3>
            <button onclick="toggleCartDrawer()" class="text-slate-400 hover:text-white text-lg">✕</button>
        </div>

        <!-- Cart Items List -->
        <div id="cart-items-container" class="flex-1 p-4 overflow-y-auto space-y-4">
            <!-- Rendered by JS -->
        </div>

        <!-- Coupon Input & Order Summary -->
        <div class="p-4 border-t border-cyan-500/20 bg-slate-900/50 space-y-3">
            <div class="flex gap-2">
                <input type="text" id="coupon-input" placeholder="ใส่โค้ดคูปองส่วนลด..." class="flex-1 bg-slate-950 border border-cyan-500/30 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none">
                <button onclick="applyCoupon()" class="btn-cyber-outline py-1.5 px-3 text-xs">ใช้โค้ด</button>
            </div>
            <div id="coupon-discount-row" class="hidden flex justify-between text-xs text-emerald-400">
                <span>ส่วนลดคูปอง:</span>
                <span id="coupon-discount-text">-฿0</span>
            </div>
            <div class="flex justify-between items-center text-sm">
                <span class="text-slate-400">ยอดชำระสุทธิ:</span>
                <span id="cart-total-price" class="font-cyber text-2xl font-black text-cyan-400">฿0</span>
            </div>
            <button onclick="checkoutCart()" class="w-full btn-cyber-primary py-3 text-sm flex items-center justify-center gap-2">
                <i class="fa-solid fa-credit-card"></i> ดำเนินการสั่งซื้อ & ชำระเงิน
            </button>
        </div>
    </div>

    <!-- 8. ORDER STATUS & TRACKING PANEL (ติดตามสถานะคำสั่งซื้อ) -->
    <div id="order-status-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden">
        <div class="w-full max-w-lg bg-slate-900 border border-purple-500/40 rounded-2xl p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-cyber text-lg font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-truck-ramp-box text-purple-400"></i> ติดตามสถานะคำสั่งซื้อ
                </h3>
                <button onclick="closeOrderStatusModal()" class="text-slate-400 hover:text-white">✕</button>
            </div>

            <div id="order-tracking-content" class="space-y-4">
                <!-- Rendered Order Details -->
            </div>
        </div>
    </div>

    <!-- 9. LIVE CHAT CONCIERGE WIDGET (แชทติดต่อร้านค้า) -->
    <div id="chat-widget">
        <!-- Chat Popup Box -->
        <div id="chat-box" class="hidden mb-4 w-80 md:w-96 h-96 bg-slate-900 border border-cyan-500/40 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
            <div class="p-3 bg-gradient-to-r from-purple-900 to-slate-900 border-b border-cyan-500/20 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-ping"></span>
                    <span class="font-cyber text-xs text-white">AETHER AI CONCIERGE CHAT</span>
                </div>
                <button onclick="toggleChatBox()" class="text-slate-400 hover:text-white text-sm">✕</button>
            </div>
            
            <div id="chat-messages" class="flex-1 p-3 overflow-y-auto space-y-3 text-xs">
                <?php foreach ($_SESSION['chat_messages'] as $msg): ?>
                    <div class="flex gap-2 <?= $msg['sender'] === 'user' ? 'justify-end' : '' ?>">
                        <?php if ($msg['sender'] === 'system'): ?>
                            <div class="w-6 h-6 rounded-full bg-cyan-400 text-slate-950 flex items-center justify-center font-bold text-[10px]">AI</div>
                        <?php endif; ?>
                        <div class="max-w-[75%] p-2.5 rounded-xl <?= $msg['sender'] === 'user' ? 'bg-purple-600 text-white' : 'bg-slate-800 text-slate-200 border border-cyan-500/20' ?>">
                            <p><?= htmlspecialchars($msg['text']) ?></p>
                            <span class="text-[9px] opacity-60 block mt-1 text-right"><?= $msg['time'] ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div class="p-2 border-t border-cyan-500/20 bg-slate-950 flex gap-2">
                <input type="text" id="chat-input" onkeypress="if(event.key==='Enter') sendChatMessage()" placeholder="พิมพ์ข้อความสอบถามร้านค้า..." class="flex-1 bg-slate-900 border border-cyan-500/30 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none">
                <button onclick="sendChatMessage()" class="btn-cyber-cyan p-2 text-xs"><i class="fa-solid fa-paper-plane"></i></button>
            </div>
        </div>

        <!-- Chat Toggle Button -->
        <button onclick="toggleChatBox()" class="btn-cyber-primary rounded-full w-14 h-14 flex items-center justify-center text-xl shadow-[0_0_20px_rgba(176,38,255,0.8)]">
            <i class="fa-solid fa-headset text-white"></i>
        </button>
    </div>

    <!-- 10. ADMIN DASHBOARD MODAL (ส่วนผู้ดูแลระบบ) -->
    <div id="admin-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-lg hidden">
        <div class="w-full max-w-5xl bg-slate-900 border border-purple-500/50 rounded-2xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center border-b border-purple-500/20 pb-4 mb-6">
                <div>
                    <h2 class="font-cyber text-xl font-bold text-white flex items-center gap-2">
                        <i class="fa-solid fa-chart-line text-purple-400"></i> AETHER ADMIN MANAGEMENT DASHBOARD
                    </h2>
                    <p class="text-xs text-slate-400">จัดการข้อมูลสินค้า หมวดหมู่ คำสั่งซื้อ โปรโมชัน และตรวจสอบรายงานยอดขาย</p>
                </div>
                <button onclick="closeAdminModal()" class="text-slate-400 hover:text-white text-xl">✕</button>
            </div>

            <!-- Sales Summary Widgets -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                <div class="bg-slate-950 p-4 rounded-xl border border-purple-500/30">
                    <span class="text-xs text-slate-400">ยอดขายรวมทั้งหมด</span>
                    <h3 class="font-cyber text-2xl font-bold text-cyan-400 mt-1">฿1,845,900</h3>
                    <span class="text-[10px] text-emerald-400">▲ +18.4% จากเดือนที่แล้ว</span>
                </div>
                <div class="bg-slate-950 p-4 rounded-xl border border-cyan-500/30">
                    <span class="text-xs text-slate-400">จำนวนการสั่งจอง</span>
                    <h3 class="font-cyber text-2xl font-bold text-purple-400 mt-1">2,480 รายการ</h3>
                    <span class="text-[10px] text-emerald-400">▲ +12.1% สัปดาห์นี้</span>
                </div>
                <div class="bg-slate-950 p-4 rounded-xl border border-pink-500/30">
                    <span class="text-xs text-slate-400">สมาชิกทั้งหมด</span>
                    <h3 class="font-cyber text-2xl font-bold text-pink-400 mt-1">1,250 คน</h3>
                    <span class="text-[10px] text-cyan-400">+45 สมาชิกใหม่วันนี้</span>
                </div>
                <div class="bg-slate-950 p-4 rounded-xl border border-amber-500/30">
                    <span class="text-xs text-slate-400">สต็อกสินค้าคงเหลือ</span>
                    <h3 class="font-cyber text-2xl font-bold text-amber-400 mt-1">103 ชิ้น</h3>
                    <span class="text-[10px] text-rose-400">! 2 สินค้าสต็อกต่ำ</span>
                </div>
            </div>

            <!-- Admin Product List Table -->
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <h3 class="font-cyber text-sm text-slate-300">รายการสินค้าในระบบ</h3>
                    <button onclick="addNewProductPrompt()" class="btn-cyber-cyan py-1.5 px-3 text-xs"><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่</button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-xs text-left text-slate-300">
                        <thead class="bg-slate-950 text-cyan-400 font-cyber">
                            <tr>
                                <th class="p-3">ID</th>
                                <th class="p-3">รูปภาพ</th>
                                <th class="p-3">ชื่อสินค้า</th>
                                <th class="p-3">หมวดหมู่</th>
                                <th class="p-3">ราคา</th>
                                <th class="p-3">สต็อก</th>
                                <th class="p-3 text-right">การจัดการ</th>
                            </tr>
                        </thead>
                        <tbody id="admin-product-table-body" class="divide-y divide-slate-800">
                            <!-- Rendered by JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 11. AUTHENTICATION MODAL (เข้าสู่ระบบ / สมัครสมาชิก) -->
    <div id="auth-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden">
        <div class="relative w-full max-w-md bg-slate-900 border border-cyan-500/40 rounded-2xl p-6 md:p-8 shadow-2xl">
            <button onclick="closeAuthModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white">✕</button>
            
            <div class="flex border-b border-slate-800 mb-6">
                <button onclick="switchAuthTab('login')" id="tab-login" class="flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold">เข้าสู่ระบบ</button>
                <button onclick="switchAuthTab('register')" id="tab-register" class="flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300">สมัครสมาชิก</button>
            </div>

            <!-- Login Form -->
            <form id="form-login" method="POST" action="" class="space-y-4">
                <input type="hidden" name="action" value="login">
                <div>
                    <label class="block text-xs font-cyber text-slate-400 mb-1">ชื่อผู้ใช้ (Username)</label>
                    <input type="text" name="username" required placeholder="ใส่ 'admin' สำหรับผู้ดูแลระบบ" class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400">
                </div>
                <div>
                    <label class="block text-xs font-cyber text-slate-400 mb-1">รหัสผ่าน (Password)</label>
                    <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400">
                </div>
                <button type="submit" class="w-full btn-cyber-primary py-3 text-xs mt-2">เข้าสู่ระบบทันที</button>
            </form>

            <!-- Register Form -->
            <form id="form-register" method="POST" action="" class="space-y-4 hidden">
                <input type="hidden" name="action" value="register">
                <div>
                    <label class="block text-xs font-cyber text-slate-400 mb-1">ชื่อผู้ใช้ (Username)</label>
                    <input type="text" name="username" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400">
                </div>
                <div>
                    <label class="block text-xs font-cyber text-slate-400 mb-1">อีเมล (Email)</label>
                    <input type="email" name="email" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400">
                </div>
                <div>
                    <label class="block text-xs font-cyber text-slate-400 mb-1">รหัสผ่าน (Password)</label>
                    <input type="password" name="password" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400">
                </div>
                <button type="submit" class="w-full btn-cyber-cyan py-3 text-xs mt-2">สมัครสมาชิกใหม่</button>
            </form>
        </div>
    </div>

    <!-- FOOTER SECTION -->
    <footer class="mt-24 border-t border-cyan-500/20 bg-slate-950/80 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4">
            <div class="flex justify-center items-center gap-2">
                <i class="fa-solid fa-atom text-cyan-400 text-xl"></i>
                <span class="font-cyber font-bold text-white tracking-widest">AETHER FASHION SHOP</span>
            </div>
            <p class="text-xs text-slate-400 max-w-xl mx-auto font-light leading-relaxed">
                ศูนย์รวมแฟชั่นเสื้อผ้าแห่งอนาคตสไตล์ Cyber Futuristic & AI Technology ออกแบบให้ใช้งานง่ายด้วยระบบ TikTok Shop สั่งจองสินค้าพรีออเดอร์สะดวกรวดเร็ว
            </p>
            <div class="text-[11px] text-slate-500 font-sub">
                &copy; 2026 AETHER CYBER FASHION. ALL RIGHTS RESERVED.
            </div>
        </div>
    </footer>

    <!-- JAVASCRIPT LOGIC (ระบบการทำงานแบบโต้ตอบทั้งหมด) -->
    <script>
        // Import PHP products array into JavaScript
        let productsData = <?= json_encode($products); ?>;
        
        let cart = JSON.parse(localStorage.getItem('aether_cart')) || [];
        let favorites = JSON.parse(localStorage.getItem('aether_favs')) || [];
        let currentSelectedProduct = null;
        let selectedColor = '';
        let selectedSize = '';
        let modalQty = 1;
        let appliedCoupon = null;

        // Hide Splash Screen after 1.2s
        window.addEventListener('load', () => {
            setTimeout(() => {
                const splash = document.getElementById('splash-screen');
                splash.classList.add('fade-out');
            }, 1000);
            
            renderProductCatalog(productsData);
            updateCounters();
        });

        // 1. RENDER PRODUCT CATALOG
        function renderProductCatalog(items) {
            const grid = document.getElementById('product-grid');
            grid.innerHTML = '';

            if (items.length === 0) {
                grid.innerHTML = '<div class="col-span-full text-center py-12 text-slate-500 font-cyber">ไม่พบรายการสินค้าที่ค้นหา</div>';
                return;
            }

            items.forEach(product => {
                const isFav = favorites.includes(product.id);
                const card = document.createElement('div');
                card.className = 'cyber-glass p-4 rounded-xl flex flex-col justify-between group relative overflow-hidden';
                
                card.innerHTML = `
                    <div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-950">
                        <span class="cyber-badge absolute top-2 left-2 z-10">${product.badge}</span>
                        
                        <!-- Favorite Heart Button -->
                        <button onclick="toggleFavorite(event, ${product.id})" class="absolute top-2 right-2 z-10 w-8 h-8 rounded-full bg-slate-950/70 border border-slate-700 flex items-center justify-center text-xs text-slate-300 hover:text-rose-400 transition">
                            <i class="fa-${isFav ? 'solid text-rose-500' : 'regular'} fa-heart"></i>
                        </button>

                        <img src="${product.image}" alt="${product.name_th}" onerror="this.onerror=null; this.src='../assets/images/cyber_hoodie_1784876612441.png';" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    </div>

                    <div class="space-y-2">
                        <span class="text-[10px] font-cyber text-purple-400 uppercase tracking-widest">${product.category_th}</span>
                        <h4 class="font-bold text-sm text-white line-clamp-1 group-hover:text-cyan-300 transition">${product.name_th}</h4>
                        
                        <div class="flex items-center gap-2 text-xs">
                            <span class="text-amber-400"><i class="fa-solid fa-star"></i> ${product.rating}</span>
                            <span class="text-slate-500">|</span>
                            <span class="text-slate-400 text-[11px]">จองแล้ว ${product.sales_count}</span>
                        </div>

                        <div class="flex justify-between items-baseline pt-2">
                            <div>
                                <span class="font-cyber text-lg font-black text-cyan-400">฿${product.price.toLocaleString()}</span>
                                <span class="text-xs text-slate-500 line-through ml-1">฿${product.original_price.toLocaleString()}</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-2 mt-4">
                        <button onclick="openProductModal(${product.id})" class="btn-cyber-outline py-2 text-[11px]">
                            ดูรายละเอียด
                        </button>
                        <button onclick="quickAddToCart(${product.id})" class="btn-cyber-cyan py-2 text-[11px]">
                            <i class="fa-solid fa-cart-plus"></i> เพิ่มตะกร้า
                        </button>
                    </div>
                `;
                grid.appendChild(card);
            });
        }

        // 2. CATEGORY & LIVE SEARCH FILTER
        function filterCategory(cat, btn) {
            document.querySelectorAll('.cat-pill').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            if (cat === 'All') {
                renderProductCatalog(productsData);
            } else {
                const filtered = productsData.filter(p => p.category === cat);
                renderProductCatalog(filtered);
            }
        }

        function filterProducts() {
            const query = document.getElementById('search-input').value.toLowerCase().trim();
            const filtered = productsData.filter(p => 
                p.name_th.toLowerCase().includes(query) || 
                p.name_en.toLowerCase().includes(query) ||
                p.category.toLowerCase().includes(query) ||
                p.description.toLowerCase().includes(query)
            );
            renderProductCatalog(filtered);
        }

        // 3. PRODUCT MODAL DETAILED VIEW
        function openProductModal(id) {
            const product = productsData.find(p => p.id === id);
            if (!product) return;

            currentSelectedProduct = product;
            modalQty = 1;
            document.getElementById('modal-qty-input').value = modalQty;

            document.getElementById('modal-title').innerText = product.name_th;
            document.getElementById('modal-price').innerText = `฿${product.price.toLocaleString()}`;
            document.getElementById('modal-orig-price').innerText = `฿${product.original_price.toLocaleString()}`;
            document.getElementById('modal-desc').innerText = product.description;
            document.getElementById('modal-rating').innerText = product.rating;
            document.getElementById('modal-reviews').innerText = `${product.review_count} รีวิว`;
            document.getElementById('modal-sales').innerText = `สั่งจองแล้ว ${product.sales_count} ชิ้น`;
            document.getElementById('modal-stock-counter').innerText = product.stock;
            document.getElementById('modal-badge').innerText = product.badge;

            // Gallery Main & Thumbnails
            const mainImg = document.getElementById('modal-main-img');
            mainImg.src = product.image;

            const thumbsContainer = document.getElementById('modal-gallery-thumbs');
            thumbsContainer.innerHTML = '';
            product.images.forEach(img => {
                const t = document.createElement('img');
                t.src = img;
                t.className = 'w-14 h-14 object-cover rounded-lg border border-slate-700 cursor-pointer hover:border-cyan-400 transition';
                t.onclick = () => { mainImg.src = img; };
                thumbsContainer.appendChild(t);
            });

            // Color Variant Buttons
            selectedColor = product.colors_th[0];
            document.getElementById('selected-color-text').innerText = selectedColor;
            const colorsContainer = document.getElementById('modal-colors');
            colorsContainer.innerHTML = '';
            product.colors_th.forEach((color, idx) => {
                const btn = document.createElement('button');
                btn.innerText = color;
                btn.className = idx === 0 
                    ? 'btn-cyber-cyan text-xs py-1 px-3'
                    : 'btn-cyber-outline text-xs py-1 px-3';
                btn.onclick = () => {
                    selectedColor = color;
                    document.getElementById('selected-color-text').innerText = color;
                    Array.from(colorsContainer.children).forEach(c => c.className = 'btn-cyber-outline text-xs py-1 px-3');
                    btn.className = 'btn-cyber-cyan text-xs py-1 px-3';
                };
                colorsContainer.appendChild(btn);
            });

            // Size Variant Buttons
            selectedSize = product.sizes[0];
            document.getElementById('selected-size-text').innerText = selectedSize;
            const sizesContainer = document.getElementById('modal-sizes');
            sizesContainer.innerHTML = '';
            product.sizes.forEach((size, idx) => {
                const btn = document.createElement('button');
                btn.innerText = size;
                btn.className = idx === 0 
                    ? 'btn-cyber-primary text-xs py-1 px-3'
                    : 'btn-cyber-outline text-xs py-1 px-3';
                btn.onclick = () => {
                    selectedSize = size;
                    document.getElementById('selected-size-text').innerText = size;
                    Array.from(sizesContainer.children).forEach(s => s.className = 'btn-cyber-outline text-xs py-1 px-3');
                    btn.className = 'btn-cyber-primary text-xs py-1 px-3';
                };
                sizesContainer.appendChild(btn);
            });

            document.getElementById('product-modal').classList.remove('hidden');
        }

        function closeProductModal() {
            document.getElementById('product-modal').classList.add('hidden');
        }

        function adjustModalQty(amt) {
            let n = modalQty + amt;
            if (n >= 1 && n <= (currentSelectedProduct ? currentSelectedProduct.stock : 99)) {
                modalQty = n;
                document.getElementById('modal-qty-input').value = modalQty;
            }
        }

        // 4. CART DRAWER & OPERATIONS
        function quickAddToCart(productId) {
            const prod = productsData.find(p => p.id === productId);
            if (!prod) return;
            
            const cartItem = {
                id: prod.id,
                name: prod.name_th,
                price: prod.price,
                image: prod.image,
                color: prod.colors_th[0],
                size: prod.sizes[0],
                qty: 1
            };
            
            addToCartList(cartItem);
        }

        function addToCartFromModal() {
            if (!currentSelectedProduct) return;
            const cartItem = {
                id: currentSelectedProduct.id,
                name: currentSelectedProduct.name_th,
                price: currentSelectedProduct.price,
                image: currentSelectedProduct.image,
                color: selectedColor,
                size: selectedSize,
                qty: modalQty
            };
            addToCartList(cartItem);
            closeProductModal();
            toggleCartDrawer();
        }

        function buyNowFromModal() {
            addToCartFromModal();
            checkoutCart();
        }

        function addToCartList(newItem) {
            const existingIdx = cart.findIndex(i => i.id === newItem.id && i.color === newItem.color && i.size === newItem.size);
            if (existingIdx > -1) {
                cart[existingIdx].qty += newItem.qty;
            } else {
                cart.push(newItem);
            }
            saveCart();
            updateCounters();
            renderCartItems();
        }

        function renderCartItems() {
            const container = document.getElementById('cart-items-container');
            container.innerHTML = '';

            if (cart.length === 0) {
                container.innerHTML = '<div class="text-center py-12 text-slate-500 font-cyber">ไม่มีสินค้าในตะกร้า</div>';
                document.getElementById('cart-total-price').innerText = '฿0';
                return;
            }

            let total = 0;
            cart.forEach((item, index) => {
                const subtotal = item.price * item.qty;
                total += subtotal;

                const row = document.createElement('div');
                row.className = 'bg-slate-900 p-3 rounded-xl border border-cyan-500/20 flex gap-3 items-center';
                row.innerHTML = `
                    <img src="${item.image}" class="w-14 h-14 object-cover rounded-lg border border-slate-700">
                    <div class="flex-1">
                        <h5 class="text-xs font-bold text-white line-clamp-1">${item.name}</h5>
                        <p class="text-[10px] text-slate-400 font-sub">${item.color} | ${item.size}</p>
                        <span class="text-cyan-400 text-xs font-cyber font-bold">฿${item.price.toLocaleString()}</span>
                    </div>
                    <div class="flex items-center gap-1 border border-slate-700 rounded bg-slate-950 px-1">
                        <button onclick="updateCartItemQty(${index}, -1)" class="text-xs px-1 text-slate-400">-</button>
                        <span class="text-xs text-white font-bold px-1">${item.qty}</span>
                        <button onclick="updateCartItemQty(${index}, 1)" class="text-xs px-1 text-slate-400">+</button>
                    </div>
                    <button onclick="removeFromCart(${index})" class="text-rose-400 hover:text-rose-300 text-xs p-1">✕</button>
                `;
                container.appendChild(row);
            });

            if (appliedCoupon === 'AETHER2026') {
                total = Math.round(total * 0.8);
            }

            document.getElementById('cart-total-price').innerText = `฿${total.toLocaleString()}`;
        }

        function updateCartItemQty(index, change) {
            cart[index].qty += change;
            if (cart[index].qty <= 0) {
                cart.splice(index, 1);
            }
            saveCart();
            updateCounters();
            renderCartItems();
        }

        function removeFromCart(index) {
            cart.splice(index, 1);
            saveCart();
            updateCounters();
            renderCartItems();
        }

        function saveCart() {
            localStorage.setItem('aether_cart', JSON.stringify(cart));
        }

        function toggleCartDrawer() {
            const drawer = document.getElementById('cart-drawer');
            drawer.classList.toggle('translate-x-full');
            renderCartItems();
        }

        function applyCoupon() {
            const code = document.getElementById('coupon-input').value.trim().toUpperCase();
            if (code === 'AETHER2026') {
                appliedCoupon = 'AETHER2026';
                document.getElementById('coupon-discount-row').classList.remove('hidden');
                document.getElementById('coupon-discount-text').innerText = '-20%';
                alert('ใช้โค้ดส่วนลด AETHER2026 สำเร็จ! ได้รับส่วนลด 20%');
                renderCartItems();
            } else {
                alert('โค้ดส่วนลดไม่ถูกต้อง');
            }
        }

        function checkoutCart() {
            if (cart.length === 0) {
                alert('กรุณาเลือกสินค้าใส่ตะกร้าก่อนทำการสั่งซื้อ');
                return;
            }

            alert('ยืนยันคำสั่งซื้อสำเร็จ! ระบบกำลังออกใบบันทึกการสั่งจองสินค้าพรีออเดอร์ให้คุณ...');
            cart = [];
            saveCart();
            updateCounters();
            renderCartItems();
            toggleCartDrawer();
            openOrderStatusModal();
        }

        function copyCoupon(code) {
            navigator.clipboard.writeText(code);
            alert(`คัดลอกโค้ดส่วนลด ${code} แล้ว!`);
        }

        // 5. FAVORITES SYSTEM
        function toggleFavorite(event, id) {
            event.stopPropagation();
            const idx = favorites.indexOf(id);
            if (idx > -1) {
                favorites.splice(idx, 1);
            } else {
                favorites.push(id);
            }
            localStorage.setItem('aether_favs', JSON.stringify(favorites));
            updateCounters();
            renderProductCatalog(productsData);
        }

        function updateCounters() {
            document.getElementById('cart-counter').innerText = cart.reduce((sum, item) => sum + item.qty, 0);
            document.getElementById('fav-counter').innerText = favorites.length;
        }

        function openFavoritesModal() {
            const favProducts = productsData.filter(p => favorites.includes(p.id));
            renderProductCatalog(favProducts);
        }

        // 6. ORDER TRACKING MODAL
        function openOrderStatusModal() {
            const trackingContent = document.getElementById('order-tracking-content');
            trackingContent.innerHTML = `
                <div class="bg-slate-950 p-4 rounded-xl border border-cyan-500/30 space-y-3">
                    <div class="flex justify-between items-center text-xs">
                        <span class="text-slate-400">หมายเลขคำสั่งซื้อ: <strong class="text-cyan-300 font-cyber">#ATH-20260724-9982</strong></span>
                        <span class="cyber-badge">กำลังจัดเตรียมสินค้า</span>
                    </div>
                    <div class="space-y-2 pt-2 border-t border-slate-800">
                        <div class="flex items-center gap-3 text-xs text-slate-300">
                            <i class="fa-solid fa-circle-check text-emerald-400"></i>
                            <span>1. ยืนยันคำสั่งซื้อเรียบร้อยแล้ว</span>
                        </div>
                        <div class="flex items-center gap-3 text-xs text-slate-300">
                            <i class="fa-solid fa-gear text-purple-400 animate-spin"></i>
                            <span>2. กำลังถักทอและส่งเข้ากระบวนการผลิต Pre-order</span>
                        </div>
                        <div class="flex items-center gap-3 text-xs text-slate-500">
                            <i class="fa-regular fa-circle"></i>
                            <span>3. จัดส่งพัสดุและแจ้งเลขพัสดุ tracking</span>
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('order-status-modal').classList.remove('hidden');
        }

        function closeOrderStatusModal() {
            document.getElementById('order-status-modal').classList.add('hidden');
        }

        // 7. LIVE CHAT FUNCTIONALITY
        function toggleChatBox() {
            document.getElementById('chat-box').classList.toggle('hidden');
        }

        function sendChatMessage() {
            const input = document.getElementById('chat-input');
            const text = input.value.trim();
            if (!text) return;

            const chatMessages = document.getElementById('chat-messages');
            
            // Add user message
            const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            chatMessages.innerHTML += `
                <div class="flex gap-2 justify-end">
                    <div class="max-w-[75%] p-2.5 rounded-xl bg-purple-600 text-white">
                        <p>${text}</p>
                        <span class="text-[9px] opacity-60 block mt-1 text-right">${time}</span>
                    </div>
                </div>
            `;
            
            input.value = '';
            chatMessages.scrollTop = chatMessages.scrollHeight;

            // Simulated AI Auto Reply
            setTimeout(() => {
                chatMessages.innerHTML += `
                    <div class="flex gap-2">
                        <div class="w-6 h-6 rounded-full bg-cyan-400 text-slate-950 flex items-center justify-center font-bold text-[10px]">AI</div>
                        <div class="max-w-[75%] p-2.5 rounded-xl bg-slate-800 text-slate-200 border border-cyan-500/20">
                            <p>แอดมินรับทราบข้อความของคุณแล้วครับ! สินค้า Cyber Futuristic สั่งจองจัดส่งรวดเร็ว มีข้อสงสัยเรื่องไซส์หรือส่วนลดเพิ่มเติมถามได้เลยนะครับ ⚡</p>
                            <span class="text-[9px] opacity-60 block mt-1 text-right">${time}</span>
                        </div>
                    </div>
                `;
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }, 800);
        }

        // 8. ADMIN DASHBOARD MANAGEMENT
        function openAdminModal() {
            renderAdminTable();
            document.getElementById('admin-modal').classList.remove('hidden');
        }

        function closeAdminModal() {
            document.getElementById('admin-modal').classList.add('hidden');
        }

        function renderAdminTable() {
            const body = document.getElementById('admin-product-table-body');
            body.innerHTML = '';

            productsData.forEach(p => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td class="p-3 font-cyber text-slate-400">#${p.id}</td>
                    <td class="p-3"><img src="${p.image}" class="w-10 h-10 object-cover rounded border border-slate-700"></td>
                    <td class="p-3 font-bold text-white">${p.name_th}</td>
                    <td class="p-3"><span class="cyber-badge">${p.category}</span></td>
                    <td class="p-3 text-cyan-400 font-bold">฿${p.price.toLocaleString()}</td>
                    <td class="p-3">${p.stock} ชิ้น</td>
                    <td class="p-3 text-right">
                        <button onclick="editProductStock(${p.id})" class="text-cyan-400 hover:underline mr-2">แก้ไขสต็อก</button>
                        <button onclick="deleteAdminProduct(${p.id})" class="text-rose-400 hover:underline">ลบ</button>
                    </td>
                `;
                body.appendChild(tr);
            });
        }

        function editProductStock(id) {
            const p = productsData.find(x => x.id === id);
            if (!p) return;
            const newStock = prompt(`แก้ไขจำนวนสต็อกสินค้า: ${p.name_th}`, p.stock);
            if (newStock !== null) {
                p.stock = parseInt(newStock) || 0;
                renderAdminTable();
            }
        }

        function deleteAdminProduct(id) {
            if (confirm('ยืนยันลบสินค้านี้จากระบบ?')) {
                productsData = productsData.filter(p => p.id !== id);
                renderAdminTable();
                renderProductCatalog(productsData);
            }
        }

        function addNewProductPrompt() {
            const name = prompt('กรอกชื่อสินค้าใหม่:');
            if (!name) return;
            const price = parseInt(prompt('กรอกราคาสินค้า (บาท):') || '990');
            const newProd = {
                id: productsData.length + 1,
                name_th: name,
                name_en: name,
                category: 'T-Shirt',
                category_th: 'เสื้อยืด',
                price: price,
                original_price: price * 2,
                image: '../assets/images/cyber_hoodie_1784876612441.png',
                images: ['../assets/images/cyber_hoodie_1784876612441.png'],
                sizes: ['S', 'M', 'L'],
                colors_th: ['ดำนีออน'],
                colors_en: ['Cyber Black'],
                stock: 20,
                rating: 5.0,
                review_count: 1,
                sales_count: 0,
                badge: 'NEW',
                description: 'สินค้าใหม่เพิ่มโดยผู้ดูแลระบบ',
                is_new: true,
                is_best: false,
                is_recommended: true
            };
            productsData.push(newProd);
            renderAdminTable();
            renderProductCatalog(productsData);
        }

        // 9. AUTH MODAL SYSTEM
        function openAuthModal(tab) {
            document.getElementById('auth-modal').classList.remove('hidden');
            switchAuthTab(tab);
        }

        function closeAuthModal() {
            document.getElementById('auth-modal').classList.add('hidden');
        }

        function switchAuthTab(tab) {
            const tabLogin = document.getElementById('tab-login');
            const tabRegister = document.getElementById('tab-register');
            const formLogin = document.getElementById('form-login');
            const formRegister = document.getElementById('form-register');

            if (tab === 'login') {
                tabLogin.className = 'flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold';
                tabRegister.className = 'flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300';
                formLogin.classList.remove('hidden');
                formRegister.classList.add('hidden');
            } else {
                tabRegister.className = 'flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold';
                tabLogin.className = 'flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300';
                formRegister.classList.remove('hidden');
                formLogin.classList.add('hidden');
            }
        }
    </script>
</body>
</html>