<?php
/**
 * Dirt Track Masters - Global Header
 * Variables expected: $pageTitle, $metaDescription, $canonicalUrl (optional), $ogType (optional)
 */
$pageTitle       = $pageTitle ?? (SITE_NAME . ' | Premium Aftermarket Dirt Bike Parts, Engine Rebuilds & Race Components');
$metaDescription = $metaDescription ?? (SITE_NAME . ' is the premier online destination for premium aftermarket dirt bike parts. Shop pistons, exhaust systems, handlebars, sprockets, and engine rebuild kits with exact year-make-model fitment guaranteed. Free shipping on orders over $99.');
$canonicalUrl    = $canonicalUrl ?? currentUrl();
$ogType          = $ogType ?? 'website';
$brands          = getAllBrands();
$categories      = getAllCategories();
?>
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle) ?></title>
    <meta name="description" content="<?= e($metaDescription) ?>">
    <link rel="canonical" href="<?= e($canonicalUrl) ?>">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="/images/favicon.png">
    <link rel="apple-touch-icon" href="/images/favicon.png">

    <!-- Open Graph -->
    <meta property="og:type" content="<?= e($ogType) ?>">
    <meta property="og:site_name" content="<?= e(SITE_NAME) ?>">
    <meta property="og:title" content="<?= e($pageTitle) ?>">
    <meta property="og:description" content="<?= e($metaDescription) ?>">
    <meta property="og:url" content="<?= e($canonicalUrl) ?>">
    <meta property="og:image" content="<?= siteUrl('images/logo.png') ?>">
    <?php if (!empty($ogExtra)) echo $ogExtra; ?>

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?= e($pageTitle) ?>">
    <meta name="twitter:description" content="<?= e($metaDescription) ?>">
    <meta name="twitter:image" content="<?= siteUrl('images/logo.png') ?>">

    <!-- Schema: Organization + WebSite -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "<?= SITE_NAME ?>",
      "url": "<?= SITE_URL ?>",
      "logo": "<?= siteUrl('images/logo.png') ?>",
      "description": "Dirt Track Masters is the premier online platform for premium aftermarket dirt bike parts, engine rebuilds, and race-ready components with guaranteed exact fitment for all major motocross brands.",
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-800-DIRT-BIKE",
        "contactType": "customer service",
        "availableLanguage": ["English"],
        "areaServed": "US"
      },
      "sameAs": []
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "<?= SITE_NAME ?>",
      "url": "<?= SITE_URL ?>",
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "<?= SITE_URL ?>/?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }
    }
    </script>
    <?php if (!empty($schemaMarkup)) echo $schemaMarkup; ?>

    <!-- 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=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet">

    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Outfit', 'sans-serif'] },
                    colors: {
                        brand: {
                            orange: '#FF4500', red: '#D50000', blue: '#0047AB',
                            dark: '#0B0C10', gray: '#1F2833', light: '#C5C6C7'
                        }
                    }
                }
            }
        }
    </script>
    <style>body { background-color: #0B0C10; color: #C5C6C7; }</style>
</head>
<body class="antialiased min-h-screen flex flex-col">

    <!-- Navbar -->
    <nav class="bg-brand-gray/80 backdrop-blur-md border-b border-gray-800 sticky top-0 z-50" aria-label="Main Navigation">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-3">
                    <a href="/" class="flex items-center gap-3">
                        <img src="/images/logo.png" alt="<?= SITE_NAME ?> Logo" class="h-10 w-10 rounded-lg object-contain">
                        <span class="text-xl font-black text-white tracking-tighter uppercase hidden sm:inline">Dirt Track<span class="text-brand-orange">Masters</span></span>
                    </a>
                </div>
                <div class="hidden md:flex flex-1 ml-10 space-x-6 items-center">
                    <a href="/" class="text-gray-300 hover:text-white px-3 py-2 rounded-md font-semibold transition-all">Store</a>
                    <!-- Brands Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-300 hover:text-white px-3 py-2 rounded-md font-semibold transition-all inline-flex items-center" aria-haspopup="true">
                            Brands <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="absolute left-0 mt-2 w-64 bg-black border border-gray-800 rounded-md shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50" role="menu">
                            <?php foreach ($brands as $b): ?>
                                <a href="/brand/<?= e($b['slug']) ?>" class="block px-4 py-3 text-sm text-gray-300 hover:bg-gray-800 hover:text-white font-semibold" role="menuitem"><?= e($b['name']) ?></a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <!-- Categories Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-300 hover:text-white px-3 py-2 rounded-md font-semibold transition-all inline-flex items-center" aria-haspopup="true">
                            Categories <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="absolute left-0 mt-2 w-64 bg-black border border-gray-800 rounded-md shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50" role="menu">
                            <?php foreach ($categories as $cat): ?>
                                <a href="/category/<?= e($cat['slug']) ?>" class="block px-4 py-3 text-sm text-gray-300 hover:bg-gray-800 hover:text-white font-semibold" role="menuitem"><?= e($cat['name']) ?></a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <a href="/cart.php" class="relative text-gray-300 hover:text-white transition-colors group" aria-label="Shopping Cart">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        <?php if (cartCount() > 0): ?>
                            <span class="absolute -top-2 -right-2 bg-brand-orange text-white text-xs font-bold px-1.5 py-0.5 rounded-full border border-black shadow"><?= cartCount() ?></span>
                        <?php endif; ?>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="flex-grow">
        <?php if (!empty($_SESSION['success'])): ?>
            <div class="max-w-7xl mx-auto mt-4 px-4 sm:px-6 lg:px-8 relative z-50" role="alert">
                <div class="bg-green-500 text-white font-bold px-4 py-3 rounded-lg shadow-lg flex items-center justify-between">
                    <span><?= e($_SESSION['success']) ?></span>
                    <button onclick="this.parentElement.style.display='none'" aria-label="Dismiss notification">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            </div>
        <?php unset($_SESSION['success']); endif; ?>
