<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($page_title) ? h($page_title) . ' - ' . APP_NAME : APP_NAME ?></title>
    <meta name="description" content="<?= isset($meta_description) ? h($meta_description) : '' ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="<?= BASE_PATH ?>/assets/css/app.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', '300': '#93c5fd', '400': '#60a5fa', '500': '#3b82f6', '600': '#2563eb', '700': '#1d4ed8', '800': '#1e40af', '900': '#1e3a8a' }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50" x-data="{ mobileNav: false, mobileSearch: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center gap-2">
                <!-- Mobile hamburger -->
                <button @click="mobileNav = !mobileNav" class="md:hidden text-gray-600 hover:text-primary-600 p-2 -ml-2">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <!-- Logo + Desktop nav -->
                <div class="flex items-center gap-6">
                    <a href="<?= BASE_PATH ?>/index.php" class="text-2xl font-bold text-primary-600 shrink-0"><?= APP_NAME ?></a>
                    <div class="hidden md:flex items-center gap-6">
                        <a href="<?= BASE_PATH ?>/index.php" class="text-gray-600 hover:text-primary-600 font-medium">Home</a>
                        <a href="<?= BASE_PATH ?>/catalog.php" class="text-gray-600 hover:text-primary-600 font-medium">Products</a>
                        <a href="<?= BASE_PATH ?>/catalog.php?category=electronics" class="text-gray-600 hover:text-primary-600 font-medium">Electronics</a>
                        <a href="<?= BASE_PATH ?>/catalog.php?category=clothing" class="text-gray-600 hover:text-primary-600 font-medium">Clothing</a>
                    </div>
                </div>
                <div class="flex items-center gap-2 sm:gap-4">
                    <!-- Mobile search toggle -->
                    <button @click="mobileSearch = !mobileSearch" class="md:hidden text-gray-600 hover:text-primary-600 p-1.5">
                        <i class="fas fa-search text-lg"></i>
                    </button>
                    <!-- Desktop search -->
                    <form action="<?= BASE_PATH ?>/catalog.php" method="GET" class="hidden md:flex items-center">
                        <input type="text" name="q" placeholder="Search products..." class="border border-gray-300 rounded-l-lg px-4 py-1.5 text-sm w-48 focus:outline-none focus:ring-1 focus:ring-primary-500" value="<?= isset($_GET['q']) ? h($_GET['q']) : '' ?>">
                        <button type="submit" class="bg-primary-600 text-white px-3 py-1.5 rounded-r-lg text-sm hover:bg-primary-700"><i class="fas fa-search"></i></button>
                    </form>
                    <a href="<?= BASE_PATH ?>/cart.php" class="relative text-gray-600 hover:text-primary-600 p-1.5">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-1 -right-0 bg-primary-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"><?= getCartCount() ?></span>
                    </a>
                    <?php if (isLoggedIn()): ?>
                        <div class="relative" x-data="{ open: false }">
                            <button @click="open = !open" class="flex items-center gap-1 text-gray-600 hover:text-primary-600 p-1.5">
                                <i class="fas fa-user text-xl"></i>
                                <span class="hidden md:inline text-sm font-medium"><?= h($_SESSION['user_name']) ?></span>
                                <i class="fas fa-chevron-down text-xs hidden md:inline"></i>
                            </button>
                            <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1" style="display: none;">
                                <a href="<?= BASE_PATH ?>/account/dashboard.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"><i class="fas fa-tachometer-alt w-5"></i> Dashboard</a>
                                <a href="<?= BASE_PATH ?>/account/orders.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"><i class="fas fa-shopping-bag w-5"></i> Orders</a>
                                <a href="<?= BASE_PATH ?>/account/wishlist.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"><i class="fas fa-heart w-5"></i> Wishlist</a>
                                <a href="<?= BASE_PATH ?>/account/profile.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"><i class="fas fa-user-cog w-5"></i> Profile</a>
                                <?php if (isAdmin()): ?>
                                    <hr class="my-1">
                                    <a href="<?= BASE_PATH ?>/admin/dashboard.php" class="block px-4 py-2 text-sm text-primary-600 font-medium hover:bg-gray-50"><i class="fas fa-shield-alt w-5"></i> Admin Panel</a>
                                <?php endif; ?>
                                <hr class="my-1">
                                <a href="<?= BASE_PATH ?>/logout.php" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-50"><i class="fas fa-sign-out-alt w-5"></i> Logout</a>
                            </div>
                        </div>
                    <?php else: ?>
                        <a href="<?= BASE_PATH ?>/login.php" class="text-gray-600 hover:text-primary-600 font-medium text-sm p-1.5">Login</a>
                        <a href="<?= BASE_PATH ?>/register.php" class="bg-primary-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-primary-700 whitespace-nowrap">Register</a>
                    <?php endif; ?>
                </div>
            </div>
            <!-- Mobile search bar (togglable) -->
            <div x-show="mobileSearch" x-transition.duration.200ms class="md:hidden pb-3 -mt-1" style="display: none;">
                <form action="<?= BASE_PATH ?>/catalog.php" method="GET" class="flex">
                    <input type="text" name="q" placeholder="Search products..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500" value="<?= isset($_GET['q']) ? h($_GET['q']) : '' ?>">
                    <button type="submit" class="bg-primary-600 text-white px-4 py-2 rounded-r-lg text-sm hover:bg-primary-700"><i class="fas fa-search"></i></button>
                </form>
            </div>
            <!-- Mobile navigation drawer -->
            <div x-show="mobileNav" x-transition.duration.200ms class="md:hidden border-t border-gray-200 py-3" style="display: none;">
                <div class="flex flex-col gap-2">
                    <a href="<?= BASE_PATH ?>/index.php" class="text-gray-700 hover:text-primary-600 font-medium px-2 py-2 rounded-lg hover:bg-gray-50">Home</a>
                    <a href="<?= BASE_PATH ?>/catalog.php" class="text-gray-700 hover:text-primary-600 font-medium px-2 py-2 rounded-lg hover:bg-gray-50">All Products</a>
                    <a href="<?= BASE_PATH ?>/catalog.php?category=electronics" class="text-gray-700 hover:text-primary-600 font-medium px-2 py-2 rounded-lg hover:bg-gray-50">Electronics</a>
                    <a href="<?= BASE_PATH ?>/catalog.php?category=clothing" class="text-gray-700 hover:text-primary-600 font-medium px-2 py-2 rounded-lg hover:bg-gray-50">Clothing</a>
                </div>
            </div>
        </div>
    </nav>
    <main class="flex-1">
    <?php if (hasFlash('success')): ?>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> <?= h(flash('success')) ?>
            </div>
        </div>
    <?php endif; ?>
    <?php if (hasFlash('error')): ?>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
                <i class="fas fa-exclamation-circle"></i> <?= h(flash('error')) ?>
            </div>
        </div>
    <?php endif; ?>
