<?php 
// File: header.php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
include_once 'db.php'; 

$cart_item_count = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;

// --- Fetch Latest News ---
$latest_news = [];
$news_result = $conn->query("SELECT id, title FROM articles ORDER BY created_at DESC LIMIT 3");
if ($news_result) {
    $latest_news = $news_result->fetch_all(MYSQLI_ASSOC);
}

// --- Fetch Latest Competitions ---
$latest_comps = [];
$comp_result = $conn->query("SELECT id, title FROM competitions WHERE end_date > NOW() ORDER BY start_date DESC LIMIT 3");
if ($comp_result) {
    $latest_comps = $comp_result->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://unitedculturalforum.com/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>United Cultural Forum</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ucf-green-light': '#F0FFF4',
                        'ucf-green': '#5A8B48',
                        'ucf-green-dark': '#406D3E',
                        'ucf-charcoal': '#2D3748',
                    }
                }
            }
        }
    </script>
    <style>
        /* Smooth horizontal scroll animation for the ticker */
        @keyframes marquee {
          0% { transform: translateX(100%); }
          100% { transform: translateX(-100%); }
        }
        .animate-marquee {
          display: inline-block;
          animation: marquee 30s linear infinite;
          white-space: nowrap;
        }
        .animate-marquee:hover {
          animation-play-state: paused;
        }
        
        /* Custom Nav Link Style from your original design */
        .nav-link {
            color: #e2e8f0; /* gray-300 */
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition-property: color, background-color;
            transition-duration: 150ms;
        }
        .nav-link:hover {
            color: white;
            background-color: #4a5568; /* gray-700 */
        }
        .nav-link-mobile {
            display: block;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 1rem;
            font-weight: 500;
            color: #e2e8f0;
        }
        .nav-link-mobile:hover {
            color: white;
            background-color: #4a5568;
        }
    </style>
    <base href="https://unitedculturalforum.com/">
</head>
<body class="bg-gray-50 flex flex-col min-h-screen">

<header class="sticky top-0 z-50">
    <div class="bg-ucf-green-light text-ucf-charcoal text-sm">
        <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-2 gap-6 overflow-hidden">
            
            <div class="flex items-center space-x-4 shrink-0">
                <a href="tel:+919490026977" class="hover:text-ucf-green">
                    <i class="fas fa-phone-alt mr-1"></i> +91-9490026977
                </a>
                <a href="mailto:contact@unitedculturalforum.com" class="hover:text-ucf-green">
                    <i class="fas fa-envelope mr-1"></i> contact@unitedculturalforum.com
                </a>
            </div>

            <div class="hidden md:block flex-1 overflow-hidden whitespace-nowrap">
                <div class="animate-marquee inline-block">
                    <?php foreach ($latest_news as $news): ?>
                        <a href="news_single.php?id=<?= $news['id'] ?>" class="mx-6 text-ucf-charcoal hover:text-ucf-green font-medium">
                            📰 <?= htmlspecialchars($news['title']) ?>
                        </a>
                    <?php endforeach; ?>

                    <?php foreach ($latest_comps as $comp): ?>
                        <a href="competition.php#comp<?= $comp['id'] ?>" class="mx-6 text-ucf-charcoal hover:text-ucf-green-dark font-medium">
                            🏆 <?= htmlspecialchars($comp['title']) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

    <nav class="bg-ucf-charcoal shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                
                <div class="flex-shrink-0 flex items-center">
                    <a href="index.php" class="flex items-center">
                        <img src="images/ucf_logo.png" alt="UCF Logo" class="h-14 w-auto object-contain bg-white rounded p-1 shadow-sm hover:opacity-90 transition">
                    </a>
                </div>

                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-2">
                        <a href="index.php" class="nav-link">HOME</a>
                        <a href="about.php" class="nav-link">ABOUT US</a>
                        <a href="paintings.php" class="nav-link">PAINTINGS</a>
                        <a href="profiles.php" class="nav-link">PROFILES</a>
                        <a href="ucf_team.php" class="nav-link">UCF-Team</a>
                        <a href="news.php" class="nav-link">NEWS</a>
                        <a href="competition.php" class="nav-link">COMPETITION</a>
                        <a href="contact.php" class="nav-link">CONTACT US</a>
                    </div>
                </div>

                <div class="hidden md:flex items-center space-x-4">
                    <a href="cart.php" class="relative text-gray-300 hover:text-white transition-colors">
                        <i class="fas fa-shopping-cart text-2xl"></i>
                        <?php if ($cart_item_count > 0): ?>
                            <span class="absolute -top-2 -right-3 bg-red-600 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">
                                <?php echo $cart_item_count; ?>
                            </span>
                        <?php endif; ?>
                    </a>
                    <?php if (isset($_SESSION['user_id'])):
                        if ($_SESSION['role'] === 'admin'): ?>
                            <a href="/admin/index.php" class="bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700">
                                Admin Dashboard
                            </a>
                        <?php else: ?>
                            <a href="/artist/index.php" class="bg-ucf-green text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-ucf-green-dark">
                                My Dashboard
                            </a>
                        <?php endif; ?>
                        <a href="logout.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Logout</a>
                    <?php else: ?>
                        <a href="login.php" class="bg-ucf-green text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-ucf-green-dark">
                            ARTIST LOGIN
                        </a>
                        <a href="/admin/login.php" class="border border-ucf-green text-gray-300 px-4 py-2 rounded-md text-sm font-medium hover:bg-ucf-green hover:text-white">
                            Admin
                        </a>
                    <?php endif; ?>
                </div>

                <div class="-mr-2 flex md:hidden">
                    <button type="button" id="mobile-menu-button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.php" class="nav-link-mobile">HOME</a>
                <a href="about.php" class="nav-link-mobile">ABOUT US</a>
                <a href="paintings.php" class="nav-link-mobile">PAINTINGS</a>
                <a href="profiles.php" class="nav-link-mobile">PROFILES</a>
                <a href="ucf_team.php" class="nav-link-mobile">UCF-Team</a>
                <a href="news.php" class="nav-link-mobile">NEWS</a>
                <a href="competition.php" class="nav-link-mobile">COMPETITION</a>
                <a href="contact.php" class="nav-link-mobile">CONTACT US</a>
            </div>
            <div class="pt-4 pb-3 border-t border-gray-700">
                <div class="flex items-center justify-around px-5">
                    <a href="cart.php" class="relative text-gray-300 hover:text-white">
                        <i class="fas fa-shopping-cart text-2xl"></i>
                    </a>
                    <div class="flex flex-col space-y-2 w-full px-4">
                        <?php if (isset($_SESSION['user_id'])): ?>
                            <a href="/artist/index.php" class="w-full text-center block bg-ucf-green text-white px-4 py-2 rounded-md">My Dashboard</a>
                            <a href="logout.php" class="w-full text-center block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Logout</a>
                        <?php else: ?>
                            <a href="login.php" class="w-full text-center block bg-ucf-green text-white px-4 py-2 rounded-md">ARTIST LOGIN</a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>

<main class="flex-grow">

<script>
    const btn = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if(btn && menu) {
        btn.addEventListener('click', () => {
            menu.classList.toggle('hidden');
        });
    }
</script>