<?php
/**
 * Theme Header Template
 * 
 * Premium dark glassmorphic header with navigation.
 *
 * @package Jeesh_Starter
 * @since 2.0.0
 */

$data = jeesh_get_template_data();
$nav_items = jeesh_get_nav_items();
$current_slug = jeesh_get_current_slug();
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
    <?php wp_head(); ?>
    
    <!-- Editorial Fonts for Nav -->
    <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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Critical Layout CSS -->
    <style>
    /* Force Grid Layouts */
    .j-nav-logo {
        flex-shrink: 0 !important;
    }
    .j-nav-logo img {
        height: 70px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70px !important;
        object-fit: contain !important;
    }
    .j-hero-content {
        display: grid !important;
        grid-template-columns: 1.2fr 1fr !important;
        gap: 64px !important;
        align-items: center !important;
    }
    .j-events-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    .j-booths-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 32px !important;
    }
    .j-process-grid {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .j-pricing-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 32px !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
    }
    .j-testimonials-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
    .j-features-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
    .j-faq-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
    }
    .j-footer-grid {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
        gap: 48px !important;
    }
    .j-hero-trust {
        display: flex !important;
        gap: 32px !important;
        flex-wrap: wrap !important;
    }
    .j-hero-trust-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .j-hero-ctas {
        display: flex !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }
    .j-cta-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }
    .j-cta-trust {
        display: flex !important;
        justify-content: center !important;
        gap: 32px !important;
        flex-wrap: wrap !important;
    }
    
    /* Cards */
    .j-event-card,
    .j-booth-card,
    .j-price-card,
    .j-testimonial-card,
    .j-feature-card,
    .j-faq-item,
    .j-hero-card {
        background: var(--j-bg-glass, rgba(255, 255, 255, 0.05)) !important;
        border: 1px solid var(--j-border, rgba(255, 255, 255, 0.07)) !important;
        border-radius: 8px !important;
        padding: 32px !important;
    }
    
    /* Feature Icon Box */
    .j-feature-icon {
        width: 56px !important;
        height: 56px !important;
        background: var(--j-primary-light, rgba(245, 158, 11, 0.1)) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 24px !important;
    }
    
    /* Process Steps */
    .j-process-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        max-width: 220px !important;
        padding: 0 16px !important;
    }
    .j-process-number {
        width: 56px !important;
        height: 56px !important;
        background: transparent !important;
        border: 1px solid var(--j-primary, #f59e0b) !important;
        color: var(--j-primary, #f59e0b) !important;
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 24px !important;
    }
    .j-process-connector {
        width: 80px !important;
        height: 1px !important;
        background: var(--j-border, rgba(255,255,255,0.07)) !important;
        margin-top: 28px !important;
    }
    
    /* Hide hero card on mobile */
    @media (max-width: 1024px) {
        .j-hero-content {
            grid-template-columns: 1fr !important;
            text-align: center !important;
        }
        .j-hero-right {
            display: none !important;
        }
        .j-hero-ctas,
        .j-hero-trust,
        .j-hero-location {
            justify-content: center !important;
        }
        .j-events-grid,
        .j-testimonials-grid,
        .j-features-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
        .j-footer-grid {
            grid-template-columns: 1fr 1fr !important;
        }
        .j-process-connector {
            display: none !important;
        }
    }
    @media (max-width: 768px) {
        .j-events-grid,
        .j-booths-grid,
        .j-testimonials-grid,
        .j-features-grid,
        .j-faq-grid,
        .j-footer-grid {
            grid-template-columns: 1fr !important;
        }
        .j-cta-buttons,
        .j-cta-trust {
            flex-direction: column !important;
            align-items: center !important;
        }
        .j-process-grid {
            flex-direction: column !important;
            gap: 32px !important;
        }
    }

    /* Light Mode Nav — dark enough for logo, light enough for hamburger */
    body.jeesh-light .j-nav {
        background: rgba(30, 41, 59, 0.85) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    body.jeesh-light .j-nav.scrolled {
        background: rgba(30, 41, 59, 0.92) !important;
        box-shadow: 0 1px 12px rgba(0,0,0,0.1) !important;
    }
    body.jeesh-light #nav-toggle {
        background-color: rgba(255,255,255,0.15) !important;
        border-color: rgba(255,255,255,0.25) !important;
    }
    </style>
</head>
<body <?php body_class($data['theme_mode'] === 'light' ? 'jeesh-light' : 'jeesh-dark'); ?>>
<?php wp_body_open(); ?>

<!-- Navigation -->
<nav class="j-nav" id="main-nav">
    <div class="j-container">
        <div class="j-nav-inner">
            <!-- Logo -->
            <a href="<?php echo home_url('/'); ?>" class="j-nav-logo">
                <?php if (!empty($data['logo'])): ?>
                    <img src="<?php echo esc_url($data['logo']); ?>" alt="<?php echo esc_attr($data['company_name']); ?>">
                <?php else: ?>
                    <span>📸</span>
                    <span><?php echo esc_html($data['company_name']); ?></span>
                <?php endif; ?>
            </a>
            
            <!-- Hamburger Toggle -->
            <div id="nav-toggle" onclick="var m=document.getElementById('nav-menu');if(m){m.style.display='flex';this.style.display='none';document.body.style.overflow='hidden';}" style="width:48px;height:48px;background:rgba(255,255,255,0.06) url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IndoaXRlIi8+PHJlY3QgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSJ3aGl0ZSIvPjxyZWN0IHk9IjEyIiB3aWR0aD0iMTQiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IndoaXRlIi8+PC9zdmc+') no-repeat center center;border:1px solid rgba(255,255,255,0.1);border-radius:12px;cursor:pointer;z-index:10000;position:relative;"></div>
        </div>
    </div>
</nav>

<!-- Fullscreen Menu Overlay (outside nav for proper z-index stacking) -->
<div class="j-nav-menu" id="nav-menu" style="display:none;">
    <!-- Close Button -->
    <div id="nav-close" style="position:absolute;top:28px;right:32px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;cursor:pointer;z-index:10001;color:rgba(255,255,255,0.5);font-size:1.4rem;" onclick="var m=document.getElementById('nav-menu');var t=document.getElementById('nav-toggle');if(m){m.style.display='none';}if(t){t.style.display='block';}document.body.style.overflow='';">✕</div>
    
    <!-- Logo in overlay -->
    <?php if (!empty($data['logo'])): ?>
    <div class="j-nav-menu-logo">
        <img src="<?php echo esc_url($data['logo']); ?>" alt="<?php echo esc_attr($data['company_name']); ?>">
    </div>
    <?php endif; ?>
    
    <ul class="j-nav-menu-list">
        <?php foreach ($nav_items as $item): ?>
            <li>
                <a href="<?php echo esc_url($item['url']); ?>" 
                   class="<?php echo $current_slug === $item['slug'] ? 'active' : ''; ?>"
                   onclick="document.getElementById('nav-menu').style.display='none';document.getElementById('nav-toggle').style.display='block';document.body.style.overflow='';">
                    <?php echo esc_html($item['title']); ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
    
    <div class="j-nav-cta-wrap">
        <?php 
        $_jh_s = get_option('jeesh_settings', array());
        $_jh_burl = !empty($_jh_s['booking']['url']) ? $_jh_s['booking']['url'] : '';
        $_jh_btxt = !empty($_jh_s['booking']['button_text']) ? $_jh_s['booking']['button_text'] : 'Book Now';
        $_jh_bshow = !empty($_jh_s['booking']['show_in_nav']) && !empty($_jh_burl);
        ?>
        <?php if ($_jh_bshow): ?>
        <a href="<?php echo esc_url($_jh_burl); ?>" class="j-nav-cta" target="_blank" rel="noopener">
            📅 <?php echo esc_html($_jh_btxt); ?>
        </a>
        <?php endif; ?>
        <a href="<?php echo home_url('/contact/'); ?>" class="j-nav-cta">
            Get a Quote
        </a>
    </div>
</div>

<script>
window.addEventListener('scroll', function() {
    var nav = document.getElementById('main-nav');
    if (nav) {
        if (window.scrollY > 50) nav.classList.add('scrolled');
        else nav.classList.remove('scrolled');
    }
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        var m = document.getElementById('nav-menu');
        var t = document.getElementById('nav-toggle');
        if (m) { m.style.display = 'none'; }
        if (t) { t.style.display = 'block'; }
        document.body.style.overflow = '';
    }
});
</script>