<?php
// Get the current page name to highlight the active link
$current_page = basename($_SERVER['PHP_SELF']);
$site_url = defined('SITE_URL') ? SITE_URL : ''; 

// Fetch Global Content for Header and SEO
try {
    $header_stmt = $pdo->query("SELECT content_key, content_value FROM page_content WHERE page_slug = 'global'");
    $global_data = $header_stmt->fetchAll(PDO::FETCH_KEY_PAIR);
} catch (PDOException $e) {
    $global_data = [];
}

// Fallback helper
$get_global = function($key, $default) use ($global_data) {
    return isset($global_data[$key]) && trim($global_data[$key]) !== '' 
        ? $global_data[$key] 
        : $default;
};
?>
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title><?php echo htmlspecialchars($get_global('site_title', 'tipspac - AI Prediction Engine')); ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($get_global('site_meta_description', 'High-fidelity predictive analytics driven by autonomous machine learning.')); ?>">
    <meta name="keywords" content="<?php echo htmlspecialchars($get_global('site_meta_keywords', 'football predictions, ai betting, soccer tips')); ?>">
    
    <?php if(!empty($global_data['site_favicon'])): ?>
        <link rel="icon" type="image/x-icon" href="<?php echo $site_url . '/' . htmlspecialchars($global_data['site_favicon']); ?>">
    <?php endif; ?>

    <link rel="stylesheet" href="<?php echo $site_url; ?>/assets/css/output.css?v=<?php echo time(); ?>">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style> 
        body { font-family: 'Inter', sans-serif; } 
        /* Master not-too-dark base with glowing accents */
        .matrix-bg {
            background-color: #020617;
            background-image: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
                              radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
        }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        
        /* LOGO STYLES - MUCH LARGER */
        .logo-link {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        .logo-image {
            height: 80px;  /* Increased from 45px to 70px */
            width: auto;
            max-width: 200px;
            transition: transform 0.3s ease;
            filter: brightness(0) invert(1); /* White logo for dark theme */
            object-fit: contain;
        }
        .logo-image:hover {
            transform: scale(1.08);
        }
        
        /* Adjust nav height for larger logo */
        nav .h-20 {
            height: 97px !important; /* Increased from 80px to 85px */
        }
        
        @media (max-width: 768px) {
            .logo-image {
                height: 70px; /* Slightly smaller on mobile but still visible */
            }
            nav .h-20 {
                height: 70px !important;
            }
        }
    </style>
</head>

<body class="matrix-bg text-slate-200 antialiased min-h-screen flex flex-col transition-colors duration-300">

<nav class="w-full sticky top-0 z-50 bg-slate-950/80 backdrop-blur-lg border-b border-slate-800/60 shadow-2xl shadow-slate-900/50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between" style="height: 85px;">
            
            <!-- LOGO - MUCH LARGER NOW -->
            <a href="index.php" class="logo-link">
                <img src="<?php echo $site_url; ?>/assets/images/tipspac trans.png" 
                     alt="tipspac" 
                     class="logo-image">
            </a>

            <!-- Navigation Menu -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="bet-of-the-day.php" class="<?php echo $current_page == 'bet-of-the-day.php' ? 'text-emerald-400' : 'text-slate-400 hover:text-white'; ?> text-[11px] font-bold tracking-widest uppercase transition-colors duration-300">Bet of the day</a>
                <a href="predictions.php" class="<?php echo $current_page == 'predictions.php' ? 'text-emerald-400' : 'text-slate-400 hover:text-white'; ?> text-[11px] font-bold tracking-widest uppercase transition-colors duration-300">Live Matches</a>
                <a href="bet-builder.php" class="<?php echo $current_page == 'bet-builder.php' ? 'text-emerald-400' : 'text-slate-400 hover:text-white'; ?> text-[11px] font-bold tracking-widest uppercase transition-colors duration-300">AI Algorithm</a>
                <a href="tutorial.php" class="<?php echo $current_page == 'tutorial.php' ? 'text-emerald-400' : 'text-slate-400 hover:text-white'; ?> text-[11px] font-bold tracking-widest uppercase transition-colors duration-300">How it work</a>
                <a href="blog.php" class="<?php echo $current_page == 'blog.php' ? 'text-emerald-400' : 'text-slate-400 hover:text-white'; ?> text-[11px] font-bold tracking-widest uppercase transition-colors duration-300">Blog</a>
            </div>

            <!-- Client Portal Button -->
            <div class="hidden md:flex items-center space-x-4">
                <a href="login-register.php" class="bg-blue-600/10 hover:bg-blue-600/20 text-blue-400 border border-blue-500/30 px-5 py-2.5 rounded-xl text-[11px] font-extrabold tracking-widest uppercase transition-all duration-300 shadow-[0_0_15px_rgba(59,130,246,0.1)]">
                    <?php echo htmlspecialchars($get_global('header_cta_text', 'Client Portal')); ?>
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden flex items-center">
                <button id="mobile-menu-btn" class="text-slate-400 hover:text-white focus:outline-none transition-colors">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path id="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="md:hidden hidden bg-slate-950 border-t border-slate-800/60 shadow-2xl absolute w-full left-0 transition-all duration-300">
        <div class="px-4 pt-4 pb-6 space-y-2">
            <a href="bet-of-the-day.php" class="<?php echo $current_page == 'bet-of-the-day.php' ? 'bg-slate-900 text-emerald-400 border-l-2 border-emerald-400' : 'text-slate-400 hover:bg-slate-900 hover:text-white'; ?> block px-4 py-3 text-xs font-bold tracking-widest uppercase transition-colors rounded-r-lg">Bet of the day</a>
            <a href="predictions.php" class="<?php echo $current_page == 'predictions.php' ? 'bg-slate-900 text-emerald-400 border-l-2 border-emerald-400' : 'text-slate-400 hover:bg-slate-900 hover:text-white'; ?> block px-4 py-3 text-xs font-bold tracking-widest uppercase transition-colors rounded-r-lg">Live Matches</a>
            <a href="bet-builder.php" class="<?php echo $current_page == 'bet-builder.php' ? 'bg-slate-900 text-emerald-400 border-l-2 border-emerald-400' : 'text-slate-400 hover:bg-slate-900 hover:text-white'; ?> block px-4 py-3 text-xs font-bold tracking-widest uppercase transition-colors rounded-r-lg">AI Algorithm</a>
            <a href="tutorial.php" class="<?php echo $current_page == 'tutorial.php' ? 'bg-slate-900 text-emerald-400 border-l-2 border-emerald-400' : 'text-slate-400 hover:bg-slate-900 hover:text-white'; ?> block px-4 py-3 text-xs font-bold tracking-widest uppercase transition-colors rounded-r-lg">How it work</a>
            <a href="blog.php" class="<?php echo $current_page == 'blog.php' ? 'bg-slate-900 text-emerald-400 border-l-2 border-emerald-400' : 'text-slate-400 hover:bg-slate-900 hover:text-white'; ?> block px-4 py-3 text-xs font-bold tracking-widest uppercase transition-colors rounded-r-lg">Blog</a>
            <div class="pt-4 mt-2 border-t border-slate-800/60 space-y-3">
                <a href="pricing.php" class="block w-full text-center bg-gradient-to-r from-amber-600/20 to-orange-600/20 border border-amber-500/30 text-amber-500 px-4 py-3 rounded-xl text-xs font-black uppercase tracking-widest">👑 Upgrade to VIP</a>
                <a href="login-register.php" class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-xl text-xs font-extrabold uppercase tracking-widest transition-colors">
                    <?php echo htmlspecialchars($get_global('header_cta_text', 'Client Portal')); ?> Login
                </a>
            </div>
        </div>
    </div>
</nav>

<script>
    // JS to handle Mobile Menu Toggle
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
        var menu = document.getElementById('mobile-menu');
        var icon = document.getElementById('menu-icon');
        if (menu.classList.contains('hidden')) {
            menu.classList.remove('hidden');
            icon.setAttribute('d', 'M6 18L18 6M6 6l12 12');
        } else {
            menu.classList.add('hidden');
            icon.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
        }
    });
</script>