<?php
// includes/header.php
// Usage: include this at top of every front-end page
// Variables available: $pageTitle (optional)
if (!isset($pageTitle)) $pageTitle = getSetting('site_name');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?= sanitize($pageTitle) ?> | <?= sanitize(getSetting('site_name')) ?></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- 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=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries -->
    <link href="<?= SITE_URL ?>/assets/lib/animate/animate.min.css" rel="stylesheet">
    <link href="<?= SITE_URL ?>/assets/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="<?= SITE_URL ?>/assets/lib/lightbox/css/lightbox.min.css" rel="stylesheet">

    <!-- Bootstrap & Custom CSS -->
    <link href="<?= SITE_URL ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= SITE_URL ?>/assets/css/style.css" rel="stylesheet">
    <link href="<?= SITE_URL ?>/assets/css/custom.css" rel="stylesheet">

    <style>
        .whatsapp-btn { background-color: #25D366; border-color: #25D366; }
        .whatsapp-btn:hover { background-color: #1ebe5a; border-color: #1ebe5a; }
        .call-btn { background-color: #FF6B35; border-color: #FF6B35; }
        .call-btn:hover { background-color: #e85a27; }
        .product-status-badge { font-size: 0.8rem; }
        .product-color-swatch { width: 24px; height: 24px; border-radius: 50%; display: inline-block; border: 2px solid #ddd; }
    </style>
</head>
<body>

<!-- Spinner -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-border text-primary" style="width:3rem;height:3rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

<!-- Topbar -->
<div class="container-fluid px-5 d-none border-bottom d-lg-block">
    <div class="row gx-0 align-items-center">
        <div class="col-lg-4 text-center text-lg-start mb-lg-0">
            <div class="d-inline-flex align-items-center" style="height:45px;">
                <a href="#" class="text-muted me-2">Help</a><small>/</small>
                <a href="#" class="text-muted mx-2">Support</a><small>/</small>
                <a href="<?= SITE_URL ?>/contact.php" class="text-muted ms-2">Contact</a>
            </div>
        </div>
        <div class="col-lg-4 text-center d-flex align-items-center justify-content-center">
            <small class="text-dark me-1">Call Us:</small>
            <?php
            $phones = getAllPhones();
            if (!empty($phones)) {
                echo '<a href="tel:' . sanitize($phones[0]['phone_number']) . '" class="text-muted">' . sanitize($phones[0]['phone_number']) . '</a>';
            }
            ?>
        </div>
        <div class="col-lg-4 text-center text-lg-end">
            <div class="d-inline-flex align-items-center" style="height:45px;">
                <a href="<?= SITE_URL ?>/admin/" class="text-muted ms-2"><small><i class="fa fa-lock me-1"></i> Admin Panel</small></a>
            </div>
        </div>
    </div>
</div>

<!-- Navbar -->
<div class="container-fluid px-5 py-4 d-none d-lg-block">
    <div class="row gx-0 align-items-center text-center">
        <div class="col-md-4 col-lg-3 text-center text-lg-start">
            <a href="<?= SITE_URL ?>/" class="navbar-brand p-0">
                <h1 class="display-5 text-primary m-0">
                    <i class="fas fa-shopping-bag text-secondary me-2"></i><?= sanitize(getSetting('site_name')) ?>
                </h1>
            </a>
        </div>
        <div class="col-md-4 col-lg-6 text-center">
            <form action="<?= SITE_URL ?>/shop.php" method="GET">
                <div class="position-relative ps-4">
                    <div class="d-flex border rounded-pill">
                        <input class="form-control border-0 rounded-pill w-100 py-3" type="text" name="search" placeholder="Search products..." value="<?= sanitize($_GET['search'] ?? '') ?>">
                        <button type="submit" class="btn btn-primary rounded-pill py-2 px-4 ms-2">Search</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4 col-lg-3 text-end">
            <a href="<?= SITE_URL ?>/shop.php" class="btn btn-outline-primary">
                <i class="fas fa-store me-2"></i>All Products
            </a>
        </div>
    </div>
</div>

<!-- Mobile Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-4 px-lg-5 py-3 py-lg-0 d-lg-none">
    <a href="<?= SITE_URL ?>/" class="navbar-brand p-0">
        <h1 class="text-primary m-0 fs-4"><i class="fas fa-shopping-bag text-secondary me-2"></i><?= sanitize(getSetting('site_name')) ?></h1>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a class="nav-link" href="<?= SITE_URL ?>/">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= SITE_URL ?>/shop.php">Shop</a></li>
        </ul>
    </div>
</nav>
