<?php
// header.php - Sticky header with Jumia-inspired navbar and prominent logo
include_once 'config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doyle Enterprise - Online Shopping</title>
    <link rel="icon" href="images/moses.png" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root { 
            --jumia-orange: #F15A24; 
            --jumia-dark: #222; 
        }
        .navbar {
            background-color: var(--jumia-dark);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .navbar-brand, .nav-link {
            color: gray !important;
            font-weight: 500;
        }
        .nav-link:hover {
            color: var(--jumia-orange) !important;
        }
        .btn-primary {
            background-color: var(--jumia-orange);
            border-color: var(--jumia-orange);
        }
        .btn-primary:hover {
            background-color: #d94f1e;
        }
        .hero-banner {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero-banner.jpg');
            background-size: cover;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        .category-card {
            transition: transform 0.2s;
        }
        .category-card:hover {
            transform: scale(1.05);
        }
        .flash-sale {
            background-color: #fff3cd;
            border-left: 4px solid var(--jumia-orange);
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top: 70px; /* Prevent content overlap with fixed navbar */
        }
        .logo-img {
            max-height: 50px;
            width: auto;
            max-width: 100%;
            padding: 5px 0;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.php"><img src="images/moses.png" alt="Doyle Enterprise Logo" class="logo-img"> Doyle Enterprise</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php"><i class="fas fa-home me-1"></i>Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Categories</a>
                        <ul class="dropdown-menu">
                            <?php
                            $cats = $conn->query("SELECT * FROM categories");
                            while ($cat = $cats->fetch_assoc()): ?>
                                <li><a class="dropdown-item" href="products.php?category=<?php echo $cat['id']; ?>"><?php echo htmlspecialchars($cat['name']); ?></a></li>
                            <?php endwhile; ?>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="flash_sales.php"><i class="fas fa-fire me-1"></i>Flash Sales</a>
                    </li>

                    <!-- === NEW LINKS: About Us & Contact === -->
                    <li class="nav-item">
                        <a class="nav-link" href="about.php"><i class="fas fa-info-circle me-1"></i>About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.php"><i class="fas fa-envelope me-1"></i>Contact</a>
                    </li>
                    <!-- ===================================== -->

                    <?php if (is_admin()): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="admin.php"><i class="fas fa-cog me-1"></i>Admin</a>
                        </li>
                    <?php endif; ?>
                </ul>
                <form class="d-flex me-3" action="products.php" method="get">
                    <input class="form-control me-2" type="search" name="search" placeholder="Search products..." aria-label="Search">
                    <button class="btn btn-outline-light" type="submit"><i class="fas fa-search"></i></button>
                </form>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="cart.php"><i class="fas fa-shopping-cart me-1"></i>Cart <?php echo isset($_SESSION['cart']) ? '(' . array_sum($_SESSION['cart']) . ')' : '(0)'; ?></a>
                    </li>
                    <?php if (is_logged_in()): ?>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><?php echo htmlspecialchars($_SESSION['username']); ?></a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="profile.php">Profile</a></li>
                                <li><a class="dropdown-item" href="orders.php">My Orders</a></li>
                                <li class="nav-item"><a class="nav-link" href="faqs.php">FAQs</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="logout.php">Logout</a></li>
                            </ul>
                        </li>
                    <?php else: ?>
                        <li class="nav-item"><a class="nav-link" href="login.php">Login</a></li>
                        <li class="nav-item"><a class="nav-link" href="register.php">Register</a></li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-4">