<?php require_once 'db.php'; ?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Good boy shop | ร้านค้าออนไลน์ครบวงจร</title>
    <meta name="description" content="Good boy shop – ร้านค้าออนไลน์ที่คุณไว้วางใจ พร้อมสินค้าหลากหลายทั้งอิเล็กทรอนิกส์ แฟชั่น และเครื่องสำอาง ส่งฟรีเมื่อซื้อครบ 1,000 บาท">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
</head>
<body>

    <!-- TOP ANNOUNCEMENT BAR -->
    <div class="announcement-bar">
        🎉 Good boy shop! ลดราคาพิเศษ 10% เมื่อสั่งซื้อครบ 1,000 บาท <span>GOODBOY10</span> | ลดสูงสุด 1,000 บาท
    </div>

    <!-- MAIN HEADER -->
    <header id="main-header">
        <div class="container">
            <div class="header-main">
                <!-- Hamburger Menu for Mobile -->
                <button class="mobile-nav-btn" id="mobile-menu-btn">
                    <i data-lucide="menu"></i>
                </button>

                <!-- Website Brand Logo -->
                <a href="#" class="logo" onclick="navigateTo('home')">
                    <div class="logo-icon">
                        <!-- Head + ฿ logo SVG -->
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Good boy Shop Logo">
                            <!-- Head outline -->
                            <path d="M12 2C8.686 2 6 4.686 6 8c0 2.21.895 4.21 2.343 5.657C5.672 14.765 4 17.187 4 20a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1c0-2.813-1.672-5.235-4.343-6.343A7.965 7.965 0 0 0 18 8c0-3.314-2.686-6-6-6z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                            <!-- ฿ symbol in face -->
                            <text x="12" y="11.5" text-anchor="middle" dominant-baseline="middle" font-size="7" font-weight="700" fill="currentColor" font-family="sans-serif">฿</text>
                        </svg>
                    </div>
                    Good boy<span> Shop</span>
                </a>

                <!-- Search Products Bar -->
                <div class="search-container">
                    <div class="search-wrapper">
                        <input id="search-input" type="text" placeholder="ค้นหาสินค้า..." autocomplete="off">
                        <button class="search-btn" id="search-btn">
                            <i data-lucide="search" style="width: 16px; height: 16px;"></i> ค้นหา
                        </button>
                    </div>
                    <!-- Suggestion drop panel -->
                    <div class="search-suggestions" id="search-suggestions"></div>
                </div>

                <!-- Navigation Action Buttons & Badges -->
                <div class="header-actions">
                    <!-- Wishlist button -->
                    <button class="action-icon-btn" onclick="navigateTo('wishlist')" title="รายการโปรด">
                        <i data-lucide="heart"></i>
                        <span class="badge" id="wishlist-count" style="display:none;">0</span>
                    </button>

                    <!-- Shopping Cart button -->
                    <button class="action-icon-btn" onclick="navigateTo('cart')" title="ตะกร้าสินค้า">
                        <i data-lucide="shopping-cart"></i>
                        <span class="badge" id="cart-count" style="display:none;">0</span>
                    </button>

                    <!-- Dynamic auth state -->
                    <div id="header-auth-wrapper" style="position:relative;"></div>
                </div>
            </div>

            <!-- Navigation bar -->
            <nav class="nav-menu" id="nav-menu">
                <ul class="nav-links">
                    <li><a href="#" data-category="all" class="active" onclick="filterByCategory('all');return false;">🎀 ทั้งหมด</a></li>
                    <li><a href="#" data-category="electronics" onclick="filterByCategory('electronics');return false;">🎧 อิเล็กทรอนิกส์</a></li>
                    <li><a href="#" data-category="fashion" onclick="filterByCategory('fashion');return false;">👗 แฟชั่น</a></li>
                    <li><a href="#" data-category="cosmetics" onclick="filterByCategory('cosmetics');return false;">💄 เครื่องสำอาง</a></li>
                    <li><a href="#" data-category="home" onclick="filterByCategory('home');return false;">🧸 ของใช้ในบ้าน</a></li>
                    <li><a href="#" data-category="food" onclick="filterByCategory('food');return false;">🧋 อาหาร</a></li>
                    <li><a href="#" data-category="sports" onclick="filterByCategory('sports');return false;">🏸 กีฬา</a></li>
                </ul>
                <div class="hotline">
                    <i data-lucide="phone-call" style="width:16px;height:16px;"></i>
                    <span>Hotline: 1777 (24 ชม.)</span>
                </div>
            </nav>
        </div>
    </header>

    <!-- MAIN BODY SPA DYNAMIC VIEWS -->
    <main class="container" style="min-height:60vh;">

        <!-- HOME VIEW -->
        <section id="home-view" class="view-section active">

            <!-- Hero Slider (slides populated dynamically by app.js via API) -->
            <div class="hero-slider">
                <div class="slide-track" id="slide-track">
                    <!-- Slides injected dynamically by initSlider() -->
                </div>
                <button class="slider-arrow slider-prev" id="slider-prev"><i data-lucide="chevron-left"></i></button>
                <button class="slider-arrow slider-next" id="slider-next"><i data-lucide="chevron-right"></i></button>
                <div class="slider-dots" id="slider-dots"></div>
            </div>

            <!-- Category Quick Links -->

            <div class="section-header">
                <h2 class="section-title">สินค้าหมวดหมู่</h2>
                <p class="section-sub">ค้นหาสินค้าที่คุณต้องการได้อย่างง่ายดาย</p>
            </div>
            <div class="category-grid" id="category-grid"></div>

            <!-- Flash Sale -->
            <div class="flash-sale-header">
                <div class="flash-title"></div>
            </div>
            <div class="product-grid" id="product-grid"></div>
            <div class="no-results hidden" id="no-results">
                <i data-lucide="search-x" style="width:64px;height:64px;color:var(--gray-300);"></i>
                <h3>ขออภัย ไม่พบรายการสินค้าที่ตรงกับการค้นหาของคุณ</h3>
                <p>ลองค้นหาด้วยคีย์เวิร์ดอื่น หรือเลือกหมวดหมู่สินค้าที่ต้องการ</p>
                <button onclick="filterByCategory('all')" class="primary-btn">ดูสินค้าทั้งหมด</button>
            </div>
        </section>

        <!-- PRODUCT DETAIL VIEW -->
        <section id="product-view" class="view-section">
            <div id="product-detail-content"></div>
        </section>

        <!-- CART VIEW -->
        <section id="cart-view" class="view-section">
            <div id="cart-content"></div>
        </section>

        <!-- WISHLIST VIEW -->
        <section id="wishlist-view" class="view-section">
            <div id="wishlist-content"></div>
        </section>

        <!-- PROFILE VIEW -->
        <section id="profile-view" class="view-section">
            <div id="profile-content"></div>
        </section>

        <!-- ADMIN VIEW -->
        <section id="admin-view" class="view-section">
            <div id="admin-content"></div>
        </section>

        <!-- SELLER VIEW -->
        <section id="seller-view" class="view-section">
            <div id="seller-content"></div>
        </section>

        <!-- CHECKOUT VIEW -->
        <section id="checkout-view" class="view-section">
            <div id="checkout-content"></div>
        </section>

    </main>

    <!-- FOOTER -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#" class="logo footer-logo" onclick="navigateTo('home')">
                        <div class="logo-icon"><i data-lucide="shopping-bag" style="width:18px;height:18px;"></i></div>
                        Good boy<span> Shop</span>
                    </a>
                    <p>Good boy shop – ร้านค้าออนไลน์ที่คุณไว้วางใจ เรานำเสนอสินค้าคุณภาพจากทั่วโลก พร้อมบริการจัดส่งฟรีและโปรโมชั่นพิเศษทุกวัน</p>
                    <div class="social-links">
                        <a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-btn"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-btn"><i class="fab fa-line"></i></a>
                        <a href="#" class="social-btn"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                <div class="footer-links-col">
                    <h4>บริษัท</h4>
                    <ul>
                        <li><a href="#">เกี่ยวกับเรา</a></li>
                        <li><a href="#">นโยบายความเป็นส่วนตัว</a></li>
                        <li><a href="#">เงื่อนไขการใช้บริการ</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">ติดต่อเรา</a></li>
                    </ul>
                </div>
                <div class="footer-links-col">
                    <h4>บริการของเรา</h4>
                    <ul>
                        <li><a href="#">สินค้าต่างๆ</a></li>
                        <li><a href="#">โปรโมชั่น</a></li>
                        <li><a href="#">ข่าวสาร</a></li>
                        <li><a href="#">บล็อก</a></li>
                        <li><a href="#">สมัครสมาชิก</a></li>
                    </ul>
                </div>
                <div class="footer-payment">
                    <h4>ช่องทางชำระเงิน</h4>
                    <div class="payment-icons">
                        <span class="payment-icon"><i class="fab fa-cc-visa"></i></span>
                        <span class="payment-icon"><i class="fab fa-cc-mastercard"></i></span>
                        <span class="payment-icon"><i class="fab fa-cc-paypal"></i></span>
                        <span class="payment-icon"><i class="fab fa-promptpay" style="font-size:20px;">฿</i></span>
                        <span class="payment-icon"><i class="fas fa-mobile-alt"></i></span>
                        <span class="payment-icon"><i class="fas fa-university"></i></span>
                    </div>
                    <h4 style="margin-top:20px;">ดาวน์โหลดแอป</h4>
                    <div class="app-btns">
                        <a href="#" class="app-dl-btn"><i class="fab fa-apple"></i> App Store</a>
                        <a href="#" class="app-dl-btn"><i class="fab fa-google-play"></i> Google Play</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2024 Good boy shop. สงวนลิขสิทธิ์ทุกประการ</p>
                <p>🏪 ให้บริการทั่วประเทศไทย | Made with ❤️ in Thailand</p>
            </div>
        </div>
    </footer>

    <!-- LOGIN/REGISTER MODAL -->
    <div class="modal-overlay" id="auth-modal">
        <div class="modal-box" id="auth-modal-box">
            <button class="modal-close" onclick="closeModal('auth-modal')"><i data-lucide="x"></i></button>
            <div id="auth-modal-content"></div>
        </div>
    </div>

    <!-- PRODUCT QUICK VIEW MODAL -->
    <div class="modal-overlay" id="quickview-modal">
        <div class="modal-box modal-wide" id="quickview-modal-box">
            <button class="modal-close" onclick="closeModal('quickview-modal')"><i data-lucide="x"></i></button>
            <div id="quickview-content"></div>
        </div>
    </div>

    <!-- CONFIRMATION MODAL (e.g. Delete Product) -->
    <div class="modal-overlay" id="confirm-modal">
        <div class="modal-box" id="confirm-modal-box" style="max-width:440px;">
            <button class="modal-close" onclick="closeModal('confirm-modal')"><i data-lucide="x"></i></button>
            <div id="confirm-modal-content"></div>
        </div>
    </div>

    <!-- TOAST NOTIFICATION -->
    <div class="toast-container" id="toast-container"></div>

    <script src="app.js"></script>
</body>
</html>