<?php
// PHP 7.4 compatible Header Component
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once 'products.php';
require_once 'analytics.php';
track_visitor();

// Calculate total item count in bag
$cart_count = 0;
if (isset($_SESSION['bag']) && is_array($_SESSION['bag'])) {
    foreach ($_SESSION['bag'] as $item) {
        $cart_count += isset($item['quantity']) ? $item['quantity'] : 0;
    }
}

// Simple logic to check current page for active class
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimalist T-Shirt Store</title>
  
  <!-- Global Stylesheet -->
  <link rel="stylesheet" href="style.css">
  
  <!-- Prevent dark mode flash -->
  <script>
    (function() {
      var savedTheme = localStorage.getItem('theme') || 'light';
      document.documentElement.setAttribute('data-theme', savedTheme);
    })();
  </script>
</head>
<body>

  <!-- Minimal Navigation Bar -->
  <header>
    <div class="container nav-container">
      <a href="index.php" class="logo">Tee Store.</a>
      
      <nav class="nav-center">
        <a href="index.php">Collection</a>
      </nav>
      
      <div class="nav-actions">
        <a href="bag.php" class="bag-icon-container" aria-label="Shopping Bag">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bag-icon-svg">
            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <path d="M16 10a4 4 0 0 1-8 0"></path>
          </svg>
          <?php if ($cart_count > 0): ?>
            <span class="bag-count" id="header-bag-count"><?php echo $cart_count; ?></span>
          <?php endif; ?>
        </a>
        
        <button class="theme-toggle-btn" id="theme-toggle" aria-label="Toggle light/dark theme">
          <!-- SVG icon representing theme toggle -->
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon-sun">
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="1" x2="12" y2="3"></line>
            <line x1="12" y1="21" x2="12" y2="23"></line>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
            <line x1="1" y1="12" x2="3" y2="12"></line>
            <line x1="21" y1="12" x2="23" y2="12"></line>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
          </svg>
        </button>
      </div>
    </div>
  </header>
  
  <main>
