<?php
declare(strict_types=1);
// Admin dashboard layout wrapper
// Usage: include this and set $pageTitle, $pageSection before including
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($pageTitle ?? 'Admin Dashboard'); ?> - Herbal Wellness Care</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="flex h-screen bg-gray-100">
        <!-- Sidebar Navigation -->
        <aside class="w-64 bg-gradient-to-b from-emerald-900 to-emerald-800 text-white shadow-lg overflow-y-auto">
            <!-- Logo/Brand -->
            <div class="p-6 border-b border-emerald-700">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-emerald-300 rounded-lg flex items-center justify-center">
                        <i class="fas fa-leaf text-emerald-900 text-lg"></i>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg">Herbal Admin</h1>
                        <p class="text-emerald-200 text-xs">Management Portal</p>
                    </div>
                </div>
            </div>

            <!-- Navigation Menu -->
            <nav class="p-4 space-y-1">
                <!-- Main Sections -->
                <a href="/atasteofafricanmarketplace/dashboard/admin/" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'home' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-chart-line w-5"></i>
                    <span>Dashboard</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/bookings.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'bookings' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-calendar-check w-5"></i>
                    <span>Booking Calendar</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/sales.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'sales' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-chart-bar w-5"></i>
                    <span>Sales</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/catalog.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'catalog' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-boxes w-5"></i>
                    <span>Catalog</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/products.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'products' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-plus-circle w-5"></i>
                    <span>Products</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/coaches.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'coaches' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-user-md w-5"></i>
                    <span>Coaches</span>
                </a>

                <!-- Divider -->
                <div class="my-4 border-t border-emerald-700"></div>

                <!-- Customers & Marketing -->
                <a href="/atasteofafricanmarketplace/dashboard/admin/customers.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'customers' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-users w-5"></i>
                    <span>Customers & Leads</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/contacts.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'contacts' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-address-book w-5"></i>
                    <span>Contacts</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/loyalty.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'loyalty' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-gift w-5"></i>
                    <span>Loyalty Program</span>
                </a>

                <!-- Divider -->
                <div class="my-4 border-t border-emerald-700"></div>

                <!-- Analytics & Insights -->
                <a href="/atasteofafricanmarketplace/dashboard/admin/analytics.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'analytics' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-chart-pie w-5"></i>
                    <span>Analytics</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/automations.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'automations' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-robot w-5"></i>
                    <span>Automations</span>
                </a>

                <!-- Divider -->
                <div class="my-4 border-t border-emerald-700"></div>

                <!-- Admin Tools -->
                <a href="/atasteofafricanmarketplace/dashboard/admin/settings.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'settings' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-cog w-5"></i>
                    <span>Settings</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/cms.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'cms' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-file-alt w-5"></i>
                    <span>CMS</span>
                </a>

                <a href="/atasteofafricanmarketplace/dashboard/admin/developers.php" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors <?php echo ($pageSection === 'developers' ? 'bg-emerald-700 text-white' : 'text-emerald-100 hover:bg-emerald-700/50'); ?>">
                    <i class="fas fa-code w-5"></i>
                    <span>Developer Tools</span>
                </a>
            </nav>

            <!-- User Profile Footer -->
            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-emerald-700 bg-emerald-800">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-emerald-300 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-emerald-900"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold truncate">Admin User</p>
                        <p class="text-xs text-emerald-200 truncate">admin@herbalwellness.local</p>
                    </div>
                    <a href="/atasteofafricanmarketplace/api/auth/logout.php" class="text-emerald-200 hover:text-white">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Top Header Bar -->
            <header class="bg-white border-b border-gray-200 px-8 py-4 shadow-sm">
                <div class="flex items-center justify-between">
                    <h1 class="text-2xl font-bold text-gray-900"><?php echo htmlspecialchars($pageTitle ?? 'Dashboard'); ?></h1>
                    <div class="flex items-center gap-4">
                        <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                            <i class="fas fa-bell text-lg"></i>
                        </button>
                        <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                            <i class="fas fa-envelope text-lg"></i>
                        </button>
                        <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-700">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Content Area -->
            <main class="flex-1 overflow-auto">
                <div class="p-8">
                    <?php
                    // Content will be inserted here by individual pages
                    ?>
                </div>
            </main>
        </div>
    </div>
</body>
</html>
