<?php
// index.php - Shopee Clothes Store Homepage (Cyberpunk Dark Theme)
session_start();
require_once 'db.php';

// Enforce login access control: redirect to login if session not set
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

// Initialize session cart if not exists
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = [];
}

// Handle Coupon Collection POST
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'collect_coupon') {
    $coupon_id = isset($_POST['coupon_id']) ? intval($_POST['coupon_id']) : 0;
    if ($coupon_id > 0) {
        $insert_uc = $pdo->prepare("INSERT IGNORE INTO user_coupons (user_id, coupon_id) VALUES (:user_id, :coupon_id)");
        $insert_uc->execute([
            ':user_id' => $_SESSION['user_id'],
            ':coupon_id' => $coupon_id
        ]);
        $_SESSION['flash_success'] = "เก็บคูปองส่วนลดเรียบร้อยแล้ว! เลือกใช้เพื่อหักลดราคาพิเศษได้ในตะกร้าสินค้า 🛒";
    }
    header("Location: index.php");
    exit();
}

// Get filter inputs
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$category_filter = isset($_GET['category']) ? trim($_GET['category']) : '';

// Build Query securely with Prepared Statements (SQL Injection Prevention)
$query = "SELECT * FROM products WHERE 1=1";
$params = [];

if ($search !== '') {
    $query .= " AND (name LIKE :search OR description LIKE :search)";
    $params[':search'] = '%' . $search . '%';
}

if ($category_filter !== '' && $category_filter !== 'ทั้งหมด') {
    $query .= " AND category = :category";
    $params[':category'] = $category_filter;
}

$query .= " ORDER BY id DESC";
$stmt = $pdo->prepare($query);
$stmt->execute($params);
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Fetch all distinct categories for filter
$cat_stmt = $pdo->query("SELECT DISTINCT category FROM products");
$categories = $cat_stmt->fetchAll(PDO::FETCH_COLUMN);

// Calculate total cart items count
$cart_count = 0;
foreach ($_SESSION['cart'] as $item) {
    $cart_count += $item['quantity'];
}

// Fetch all coupons with user collection status
$coupon_stmt = $pdo->prepare("
    SELECT c.*, uc.id AS collected_id, uc.is_used 
    FROM coupons c 
    LEFT JOIN user_coupons uc ON c.id = uc.coupon_id AND uc.user_id = :user_id
    ORDER BY c.min_order_value ASC
");
$coupon_stmt->execute([':user_id' => $_SESSION['user_id']]);
$coupons = $coupon_stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="th" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NON LUXURY // Haute Couture & Watchmaker</title>
    <!-- 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=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Sarabun:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        cyber: {
                            bg: '#0A0A0B',        // Matte Deep Black
                            card: '#121215',      // Warm charcoal card
                            accent: '#D4AF37',    // Elegant Satin Gold
                            accentGlow: '#E5C158',// Brighter Champagne Gold
                            success: '#94A89A',   // Premium Muted Sage Green
                            danger: '#A94444',    // Luxury Wine Red
                            border: '#22211E'     // Subtle gold-tinted grey border
                        }
                    },
                    fontFamily: {
                        sans: ['Sarabun', 'Montserrat', 'sans-serif'],
                        cyber: ['Cinzel', 'Cormorant Garamond', 'Sarabun', 'serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #0A0A0B;
            color: #EAE6DF;
            font-family: 'Sarabun', sans-serif;
            background-image: radial-gradient(circle at 50% 0%, #171512 0%, #0A0A0B 70%);
        }
        .neon-text-purple {
            text-shadow: 0 0 5px #D4AF37, 0 0 10px rgba(212, 175, 55, 0.4);
        }
        .neon-text-danger {
            text-shadow: 0 0 5px #A94444, 0 0 10px rgba(169, 68, 68, 0.4);
        }
        .neon-border-purple {
            border-color: #D4AF37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }
        @keyframes danger-pulse {
            0%, 100% {
                box-shadow: 0 0 8px rgba(169, 68, 68, 0.3);
                border-color: #A94444;
            }
            50% {
                box-shadow: 0 0 18px rgba(169, 68, 68, 0.6);
                border-color: #C15C5C;
            }
        }
        .pulse-out-of-stock {
            animation: danger-pulse 1.8s infinite ease-in-out;
        }
        .cyber-grid {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(212, 175, 55, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(212, 175, 55, 0.02) 1px, transparent 1px);
        }
        .cyber-btn-glow:hover {
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }
    </style>
    <!-- Multi-language Support -->
    <script src="lang.js"></script>
</head>
<body class="flex flex-col min-h-screen cyber-grid text-stone-200">

    <!-- Header Navigation -->
    <header class="sticky top-0 z-50 bg-[#0E0E10]/90 backdrop-blur-md border-b border-cyber-border">
        
        <!-- Top bar with user session metadata -->
        <div class="bg-[#050506] text-[10px] py-1.5 px-6 md:px-12 flex justify-between w-full text-stone-400 font-sans tracking-wide">
            <div class="flex gap-4">
                <span><span data-lang-key="vip_guest">VIP GUEST: </span><?php echo htmlspecialchars($_SESSION['username']); ?></span>
                <span>|</span>
                <span><span data-lang-key="status_label">STATUS: </span><span class="text-cyber-accent font-bold uppercase" data-lang-key="<?php echo $_SESSION['role'] === 'admin' ? 'admin_member' : 'vip_member'; ?>"><?php echo htmlspecialchars($_SESSION['role']); ?> MEMBER</span></span>
            </div>
            <div class="flex items-center gap-4">
                <!-- Language Selector Dropdown -->
                <div class="flex items-center gap-1">
                    <span class="text-stone-500">🌐</span>
                    <select id="lang-selector" class="bg-black text-[9px] text-stone-300 border border-cyber-border rounded px-1.5 py-0.5 outline-none cursor-pointer focus:border-cyber-accent">
                        <option value="th">TH / ไทย</option>
                        <option value="en">EN / English</option>
                        <option value="zh">ZH / 中文</option>
                        <option value="ja">JA / 日本語</option>
                        <option value="ko">KO / 한국어</option>
                    </select>
                </div>
                <?php if ($_SESSION['role'] === 'admin'): ?>
                    <a href="admin.php" class="text-cyber-accent hover:text-white transition font-bold tracking-widest" data-lang-key="admin_portal">⚡ ADMIN PORTAL</a>
                <?php endif; ?>
                <a href="logout.php" class="text-cyber-danger hover:text-white transition font-bold tracking-widest" data-lang-key="leave_salon">✕ LEAVE SALON</a>
            </div>
        </div>

        <!-- Main Header -->
        <div class="w-full px-6 md:px-12 py-4 flex flex-col md:flex-row items-center justify-between gap-4">
            <!-- Logo -->
            <a href="index.php" class="flex items-center gap-3 text-2xl font-bold font-cyber tracking-wider hover:opacity-90 transition">
                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-cyber-accent to-cyber-border flex items-center justify-center shadow-lg border border-cyber-accent/40">
                    <span class="text-cyber-accent text-sm">N</span>
                </div>
                <span class="font-cyber font-medium text-lg tracking-[0.35em] text-white">NON LUXURY</span>
            </a>

            <!-- Search Form -->
            <form action="index.php" method="GET" class="w-full md:w-2/5 flex bg-[#0A0A0B] border border-cyber-border rounded-lg overflow-hidden focus-within:border-cyber-accent focus-within:shadow-[0_0_10px_rgba(212,175,55,0.2)] transition">
                <?php if ($category_filter !== ''): ?>
                    <input type="hidden" name="category" value="<?php echo htmlspecialchars($category_filter); ?>">
                <?php endif; ?>
                <input type="text" name="search" value="<?php echo htmlspecialchars($search); ?>" 
                       placeholder="ค้นหาผลงานชิ้นเอก นาฬิกา หรือเครื่องแต่งกายระดับ Haute Couture..." 
                       data-lang-key="search_placeholder"
                       class="w-full bg-transparent px-4 py-2.5 text-white outline-none placeholder-stone-600 text-xs font-sans">
                <button type="submit" class="bg-cyber-accent hover:bg-cyber-accentGlow text-black px-5 py-2 transition flex items-center justify-center">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </form>

            <!-- Cart Status -->
            <div class="flex items-center gap-4">
                <a href="cart.php" class="relative p-2 px-4 bg-cyber-card border border-cyber-border hover:border-cyber-accent rounded-lg transition flex items-center gap-3">
                    <div class="relative">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                        </svg>
                        <?php if ($cart_count > 0): ?>
                            <span class="absolute -top-2.5 -right-2.5 bg-cyber-accent text-black text-[9px] font-black w-4.5 h-4.5 rounded-full flex items-center justify-center shadow-lg animate-pulse">
                                <?php echo $cart_count; ?>
                            </span>
                        <?php endif; ?>
                    </div>
                    <span class="text-[11px] font-cyber tracking-[0.15em] text-stone-300 hidden lg:inline" data-lang-key="shopping_bag">SHOPPING BAG</span>
                </a>
            </div>
        </div>
    </header>

    <!-- Main Content Area -->
    <main class="flex-grow w-full px-6 md:px-12 py-8">
        
        <!-- Cyber Banner Collection -->
        <div class="relative bg-cyber-card border border-cyber-border rounded-2xl overflow-hidden shadow-2xl mb-10">
            <div class="absolute inset-0 bg-cover bg-center opacity-10" style="background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?w=1600');"></div>
            <div class="relative z-10 px-8 py-12 md:py-16 flex flex-col md:flex-row items-center justify-between gap-8">
                <div class="space-y-4 max-w-xl text-center md:text-left">
                    <span class="bg-amber-950/40 text-cyber-accent border border-cyber-accent/30 font-cyber font-medium text-[10px] tracking-[0.2em] uppercase px-3.5 py-1.5 rounded-full" data-lang-key="banner_collection">COLLECTION PRIVÉE 014</span>
                    <h2 class="text-3xl md:text-5xl font-cyber font-medium tracking-wide text-white leading-tight" data-lang-key="banner_title">THE ULTIMATE ACQUISITIONS</h2>
                    <p class="text-stone-400 text-xs leading-relaxed font-sans" data-lang-key="banner_desc">
                        ยินดีต้อนรับสู่แฟชั่นโชว์รูมและคลับสะสมนาฬิกาหรูสำหรับสมาชิกระดับ VIP คัดสรรผลงานระดับ Haute Couture และชิ้นงานศิลปะเหนือกาลเวลาด้วยการบริการระดับเลิศเลอ
                    </p>
                    <div class="flex flex-wrap gap-2.5 justify-center md:justify-start pt-2 font-sans text-[10px] text-stone-400">
                        <span class="bg-[#0A0A0B] px-3.5 py-2 rounded-lg border border-cyber-border" data-lang-key="banner_concierge">⚜️ PRIVATE CONCIERGE</span>
                        <span class="bg-[#0A0A0B] px-3.5 py-2 rounded-lg border border-cyber-border" data-lang-key="banner_escrow">💼 SECURE INSURED ESCROW</span>
                        <span class="bg-[#0A0A0B] px-3.5 py-2 rounded-lg border border-cyber-border" data-lang-key="banner_confidential">🛡️ PRIVATE & CONFIDENTIAL</span>
                    </div>
                </div>
                <div class="w-full md:w-1/3 flex justify-center">
                    <div class="bg-amber-900/10 border border-cyber-accent/20 rounded-full p-8 shadow-2xl relative">
                        <span class="font-cyber font-medium text-5xl text-cyber-accent neon-text-purple">VIP</span>
                        <span class="absolute top-2 right-2 bg-cyber-accent text-black font-cyber text-[8px] tracking-wider px-2 py-1 rounded transform rotate-12" data-lang-key="banner_exclusivite">EXCLUSIVITÉ</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Flash Message -->
        <?php if (isset($_SESSION['flash_success'])): ?>
            <div class="mb-6 p-4 bg-[#19221C] border border-cyber-success text-stone-300 rounded-xl text-xs flex items-center justify-between shadow-lg">
                <div class="flex items-center gap-2">
                    <span class="text-cyber-success">✔</span>
                    <span><?php echo $_SESSION['flash_success']; ?></span>
                </div>
                <button onclick="this.parentElement.remove()" class="text-stone-400 hover:text-white font-bold font-mono">✕</button>
            </div>
            <?php unset($_SESSION['flash_success']); ?>
        <?php endif; ?>

        <!-- Coupon Center Section -->
        <div class="mb-10 bg-cyber-card border border-cyber-border rounded-2xl p-6 shadow-2xl relative overflow-hidden">
            <div class="absolute -top-10 -left-10 w-32 h-32 bg-cyber-accent opacity-5 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-[#94A89A] opacity-5 rounded-full blur-3xl"></div>
            
            <h3 class="font-cyber font-medium text-xs tracking-[0.2em] uppercase mb-6 text-white flex items-center gap-2.5 border-b border-cyber-border pb-3" data-lang-key="vault_coupons">
                VAULT RESERVED COUPONS // คูปองสิทธิพิเศษระดับสูง
            </h3>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <?php foreach ($coupons as $coupon): ?>
                    <?php 
                        $is_collected = !empty($coupon['collected_id']);
                        $is_used = $coupon['is_used'] == 1;
                        
                        // Style based on coupon state
                        if ($is_used) {
                            $card_border = 'border-dashed border-red-500/20 bg-[#211516]/20';
                            $btn_style = 'bg-stone-900 text-stone-600 border border-stone-800 cursor-not-allowed';
                            $btn_text = 'USED // ใช้แล้ว';
                        } elseif ($is_collected) {
                            $card_border = 'border-dashed border-cyber-success/40 bg-[#16211B]/20';
                            $btn_style = 'bg-[#16211B] text-cyber-success border border-cyber-success/30 cursor-not-allowed';
                            $btn_text = 'CLAIMED // เก็บแล้ว';
                        } else {
                            $card_border = 'border-dashed border-cyber-accent/40 hover:border-cyber-accent transition duration-300';
                            $btn_style = 'bg-cyber-accent hover:bg-cyber-accentGlow text-black shadow-sm';
                            $btn_text = 'REDEEM // รับเอกสิทธิ์';
                        }
                    ?>
                    <div class="p-5 rounded-xl border relative flex flex-col justify-between overflow-hidden <?php echo $card_border; ?>">
                        <!-- Ticket notch decorations -->
                        <div class="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-[#0A0A0B] border-r border-cyber-border"></div>
                        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-[#0A0A0B] border-l border-cyber-border"></div>
                        
                        <div>
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-cyber font-medium text-xs tracking-wider text-white bg-[#1C1C20] border border-cyber-border px-2.5 py-1 rounded">
                                    <?php echo htmlspecialchars($coupon['code']); ?>
                                </span>
                                <?php if ($coupon['discount_type'] === 'percent'): ?>
                                    <span class="text-xs font-cyber font-bold text-cyber-accent neon-text-purple">
                                        <?php echo number_format($coupon['discount_value']); ?>% OFF
                                    </span>
                                <?php else: ?>
                                    <span class="text-xs font-cyber font-bold text-cyber-accent neon-text-purple">
                                        ฿<?php echo number_format($coupon['discount_value']); ?> OFF
                                    </span>
                                <?php endif; ?>
                            </div>
                            
                            <p class="text-[11px] text-stone-300 font-sans mt-3">
                                <?php echo htmlspecialchars($coupon['description']); ?>
                            </p>
                            
                            <p class="text-[9px] font-sans text-stone-500 mt-2">
                                ขั้นต่ำ: ฿<?php echo number_format($coupon['min_order_value']); ?>
                            </p>
                        </div>
                        
                        <div class="mt-4 pt-3 border-t border-cyber-border/40">
                            <?php if (!$is_collected && !$is_used): ?>
                                <form action="index.php" method="POST">
                                    <input type="hidden" name="action" value="collect_coupon">
                                    <input type="hidden" name="coupon_id" value="<?php echo $coupon['id']; ?>">
                                    <button type="submit" class="w-full text-center text-[10px] font-cyber font-bold py-2 rounded transition <?php echo $btn_style; ?>" data-lang-key="claim_offer">
                                        <?php echo $btn_text; ?>
                                    </button>
                                </form>
                            <?php else: ?>
                                <button disabled class="w-full text-center text-[10px] font-cyber font-bold py-2 rounded <?php echo $btn_style; ?>" data-lang-key="<?php echo $is_used ? 'used' : 'collected'; ?>">
                                    <?php echo $btn_text; ?>
                                </button>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Sidebar Filters & Grid Layout -->
        <div class="flex flex-col lg:flex-row gap-8">
            
            <!-- Sidebar Filter -->
            <aside class="w-full lg:w-1/4 shrink-0 space-y-6">
                
                <!-- Category Panel -->
                <div class="bg-cyber-card rounded-xl p-5 border border-cyber-border shadow-lg">
                    <h3 class="font-cyber font-medium text-xs tracking-[0.2em] mb-4 text-white flex items-center gap-2 border-b border-cyber-border pb-3" data-lang-key="select_collection">
                        SELECT COLLECTION // คอลเลกชันสะสม
                    </h3>
                    <div class="flex flex-row lg:flex-col flex-wrap gap-2">
                        <a href="index.php?category=ทั้งหมด<?php echo $search !== '' ? '&search=' . urlencode($search) : ''; ?>" 
                           class="px-4 py-2.5 rounded text-xs font-serif tracking-wider w-full text-left transition <?php echo ($category_filter === '' || $category_filter === 'ทั้งหมด') ? 'bg-cyber-accent text-black font-semibold shadow-md' : 'bg-[#0A0A0B] hover:bg-stone-900 text-stone-400 hover:text-white border border-cyber-border'; ?>" data-lang-key="all_collections">
                            • ALL COLLECTIONS
                        </a>
                        <?php foreach ($categories as $cat): ?>
                            <a href="index.php?category=<?php echo urlencode($cat) . ($search !== '' ? '&search=' . urlencode($search) : ''); ?>" 
                               class="px-4 py-2.5 rounded text-xs font-serif tracking-wider w-full text-left transition <?php echo ($category_filter === $cat) ? 'bg-cyber-accent text-black font-semibold shadow-md' : 'bg-[#0A0A0B] hover:bg-stone-900 text-stone-400 hover:text-white border border-cyber-border'; ?>">
                                • <?php echo htmlspecialchars(strtoupper($cat)); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- Quick Info Panel -->
                <div class="bg-cyber-card rounded-xl p-5 border border-cyber-border shadow-lg hidden lg:block">
                    <h4 class="font-cyber font-medium text-xs text-white mb-4 tracking-[0.15em]">// SALON METRICS</h4>
                    <ul class="text-[11px] text-stone-400 space-y-3 font-sans">
                        <li class="flex items-center gap-2">
                            <span class="text-cyber-accent">⚜️</span> ฐานข้อมูลประมวลผล: PDO MySQL
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-cyber-accent">⚜️</span> สิทธิ์รับรองผู้เข้าชม: <?php echo htmlspecialchars($_SESSION['username']); ?>
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="text-cyber-accent">⚜️</span> รูปแบบการแสดงผล: Premium Luxury Edition
                        </li>
                    </ul>
                </div>
            </aside>

            <!-- Products Grid Panel -->
            <section class="flex-grow">
                
                <!-- Filter Status Bar -->
                <div class="bg-cyber-card rounded-xl p-5 border border-cyber-border mb-6 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div>
                        <h3 class="font-cyber font-medium text-xs tracking-[0.15em] text-white">
                            <?php if ($category_filter && $category_filter !== 'ทั้งหมด'): ?>
                                COLLECTION: <?php echo htmlspecialchars($category_filter); ?>
                            <?php else: ?>
                                DISPLAYING ALL ACQUISITIONS
                            <?php endif; ?>
                        </h3>
                        <?php if ($search !== ''): ?>
                            <p class="text-xs text-stone-400 mt-2 font-sans">ผลลัพธ์การค้นหาสำหรับ: "<span class="text-cyber-accent font-bold"><?php echo htmlspecialchars($search); ?></span>"</p>
                        <?php endif; ?>
                    </div>
                    <div class="text-xs text-stone-400 font-sans">
                        คัดสรรพิเศษ <span class="text-cyber-accent font-bold font-cyber text-sm"><?php echo count($products); ?></span> ชิ้นงาน
                    </div>
                </div>

                <!-- Products Grid -->
                <?php if (count($products) > 0): ?>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        <?php foreach ($products as $product): ?>
                            <?php 
                                $sizes_arr = explode(',', $product['sizes']);
                                $colors_arr = explode(',', $product['colors']);
                                // Check out of stock status
                                $out_of_stock = ($product['stock'] <= 0);
                                $product_card_class = $out_of_stock ? 'pulse-out-of-stock bg-[#211516]/20 border-cyber-danger/30' : 'bg-cyber-card border-cyber-border hover:border-cyber-accent';
                            ?>
                            <div class="rounded-xl border p-4 flex flex-col justify-between hover:shadow-2xl transition duration-300 relative group <?php echo $product_card_class; ?>">
                                
                                <!-- Out of stock Badge -->
                                <?php if ($out_of_stock): ?>
                                    <span class="absolute top-3 left-3 z-10 bg-cyber-danger text-white text-[8px] font-medium font-cyber px-2.5 py-1 rounded-full shadow uppercase tracking-wider">
                                        RESERVED ❌
                                    </span>
                                <?php endif; ?>

                                <!-- Product Image Container -->
                                <div class="w-full aspect-square overflow-hidden bg-black rounded-lg border border-cyber-border/40 relative">
                                    <img src="<?php echo htmlspecialchars($product['image']); ?>" 
                                         alt="<?php echo htmlspecialchars($product['name']); ?>" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition duration-500"
                                         onerror="this.src='https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop';">
                                </div>

                                <!-- Product Info -->
                                <div class="mt-4 flex-grow flex flex-col justify-between">
                                    <div>
                                        <span class="text-[9px] font-sans text-cyber-accent font-semibold uppercase tracking-[0.1em]">
                                            <?php echo htmlspecialchars($product['category']); ?>
                                        </span>
                                        <h3 class="font-bold font-serif text-sm text-stone-200 mt-1.5 line-clamp-1 group-hover:text-cyber-accent transition">
                                            <?php echo htmlspecialchars($product['name']); ?>
                                        </h3>
                                        <p class="text-xs text-stone-400 mt-1 line-clamp-2 min-h-[2rem] font-sans">
                                            <?php echo htmlspecialchars($product['description']); ?>
                                        </p>

                                        <!-- Attributes Previews -->
                                        <div class="mt-3.5 space-y-1.5 text-[9px] text-stone-400 font-sans">
                                            <div class="flex items-center gap-1.5 flex-wrap">
                                                <span class="text-stone-500 text-[8px] tracking-wider">SIZES:</span>
                                                <?php foreach ($sizes_arr as $sz): ?>
                                                    <span class="bg-[#1C1B1F] px-1.5 py-0.5 rounded text-stone-300 font-mono">
                                                        <?php echo htmlspecialchars(trim($sz)); ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                            <div class="flex items-center gap-1.5 flex-wrap">
                                                <span class="text-stone-500 text-[8px] tracking-wider">COLORS:</span>
                                                <?php foreach ($colors_arr as $col): ?>
                                                    <span class="bg-[#1C1B1F] px-1.5 py-0.5 rounded text-stone-300 font-mono">
                                                        <?php echo htmlspecialchars(trim($col)); ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Price & Actions -->
                                    <div class="mt-4 pt-3.5 border-t border-cyber-border/40 flex items-center justify-between">
                                        <div>
                                            <span class="text-[8px] text-stone-500 tracking-wider block">PRICE</span>
                                            <span class="text-base font-cyber font-medium text-cyber-accent neon-text-purple">
                                                ฿<?php echo number_format($product['price'], 2); ?>
                                            </span>
                                        </div>
                                        <div class="text-right">
                                            <span class="text-[8px] font-sans tracking-wider <?php echo $product['stock'] > 5 ? 'text-stone-500' : 'text-cyber-danger font-semibold'; ?> block">
                                                STOCK: <?php echo $product['stock']; ?>
                                            </span>
                                            
                                            <?php if ($out_of_stock): ?>
                                                <button disabled class="mt-2 text-[9px] bg-stone-900 text-stone-600 font-cyber px-4 py-1.5 rounded cursor-not-allowed uppercase tracking-wider" data-lang-key="out_of_stock">
                                                    RESERVED
                                                </button>
                                            <?php else: ?>
                                                <a href="product-detail.php?id=<?php echo $product['id']; ?>" 
                                                   class="inline-block mt-2 text-[9px] bg-cyber-accent hover:bg-cyber-accentGlow text-black font-cyber font-semibold px-4 py-1.5 rounded transition shadow-sm uppercase tracking-[0.1em]" data-lang-key="acquire">
                                                    ACQUIRE
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <!-- Empty State -->
                    <div class="bg-cyber-card border border-cyber-border rounded-xl p-12 text-center shadow-lg">
                        <svg class="w-10 h-10 text-stone-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <h3 class="font-cyber font-medium text-sm text-white tracking-widest">NO_ACQUISITIONS_FOUND</h3>
                        <p class="text-xs text-stone-400 mt-2">ไม่พบรายการสินค้าที่ตรงตามเงื่อนไขของท่าน</p>
                        <a href="index.php" class="inline-block mt-4 text-[9px] bg-cyber-accent hover:bg-cyber-accentGlow text-black font-cyber font-bold px-4 py-2 rounded transition uppercase tracking-wider">
                            RESET_FILTERS
                        </a>
                    </div>
                <?php endif; ?>
            </section>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-[#050506] border-t border-cyber-border text-stone-500 py-8 mt-12 text-xs">
        <div class="w-full px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
            <div>
                <p data-lang-key="footer_rights">⚜️ <span class="font-cyber tracking-[0.25em] text-white">NON LUXURY</span> // CONCIERGE SERVICES. สงวนลิขสิทธิ์</p>
                <p class="text-[10px] text-stone-600 mt-1" data-lang-key="footer_port">ระบบฐานข้อมูล PDO MySQL // รหัสพอร์ต 014</p>
            </div>
            <div class="text-right">
                <p data-lang-key="footer_developer">VIP CLIENT SERVICES: <span class="text-white font-bold">Nontawat 014</span></p>
                <p class="text-[10px] text-stone-600 mt-1">© 2026 Simulation Server. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>
