<?php
// Gestión de sesión - SIN REDIRECCIONES
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$username = isset($_SESSION['username']) ? $_SESSION['username'] : 'Usuario';
$current_page = basename($_SERVER['PHP_SELF']);
?>

<style>
    *{margin:0;padding:0;box-sizing:border-box}
    
    .netflix-header{position:fixed;top:0;left:0;right:0;background:linear-gradient(to bottom,#000 0%,transparent 100%);z-index:1000;padding:15px 4%;display:flex;justify-content:space-between;align-items:center;height:65px;transition:background .3s}
    .netflix-header.scrolled{background:#141414;padding:10px 4%;box-shadow:0 2px 10px rgba(0,0,0,0.5)}
    .logo-text{font-size:24px;font-weight:800;color:#E50914;text-decoration:none}
    .header-left{display:flex;align-items:center;gap:25px}
    
    /* Navegación desktop */
    .nav-menu{display:flex;gap:20px}
    .nav-link{color:#e5e5e5;text-decoration:none;font-size:13px;font-weight:500;transition:color .2s}
    .nav-link:hover,.nav-link.active{color:#fff}
    
    /* Buscador desktop */
    .search-wrapper{background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);border-radius:50px;padding:5px 12px;display:flex;align-items:center}
    .search-wrapper:focus-within{background:#000;border-color:#E50914}
    .search-icon{color:#ccc;font-size:12px;margin-right:8px}
    .search-input{background:transparent;border:none;color:#fff;outline:none;font-size:12px;width:140px}
    .search-input::placeholder{color:#666}
    
    /* Menú usuario */
    .user-menu{position:relative;cursor:pointer}
    .avatar-icon{width:32px;height:32px;background:#0378d5;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff}
    .dropdown-menu{display:none;position:absolute;top:100%;right:0;background:#1a1a1a;min-width:170px;border-radius:8px;z-index:1001}
    .user-menu:hover .dropdown-menu{display:block}
    .dropdown-item{padding:8px 16px;color:#bbb;text-decoration:none;font-size:12px;display:flex;align-items:center;gap:10px}
    .dropdown-item:hover{background:#333;color:#fff}
    .dropdown-item.logout{color:#E50914;border-top:1px solid #333}
    
    /* Botón hamburguesa (solo móvil) */
    .hamburger-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
    
    /* Barra inferior móvil */
    .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#121212;border-top:1px solid #222;height:60px;z-index:1000;justify-content:space-around;align-items:center}
    .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#888;text-decoration:none;font-size:10px;gap:3px}
    .bottom-nav-item i{font-size:18px}
    .bottom-nav-item.active{color:#fff}
    .bottom-nav-item.active i{color:#E50914}
    
    /* Menú lateral móvil */
    .menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:2000}
    .side-menu-mobile{position:fixed;top:0;right:-280px;width:280px;height:100%;background:#141414;z-index:2001;transition:right .3s;padding:80px 20px 30px}
    .side-menu-mobile.open{right:0}
    .mobile-nav-link{display:flex;align-items:center;gap:15px;color:#fff;padding:12px;text-decoration:none;border-bottom:1px solid #222}
    .mobile-nav-link i{width:25px}
    .mobile-logout{color:#E50914;margin-top:30px;border-top:1px solid #333}
    
    /* RESPONSIVE MÓVIL */
    @media (max-width:768px){
        .nav-menu{display:none}
        .hamburger-btn{display:block}
        .bottom-nav{display:flex}
        body{padding-bottom:60px}
        
        /* Buscador móvil - se muestra en el menú lateral */
        .mobile-search{margin-bottom:20px;padding:0 12px}
        .mobile-search .search-wrapper-mobile{background:rgba(255,255,255,0.1);border:1px solid #444;border-radius:8px;padding:10px 15px;display:flex;align-items:center}
        .mobile-search .search-wrapper-mobile .search-icon{color:#ccc;margin-right:10px}
        .mobile-search .search-wrapper-mobile .search-input-mobile{background:transparent;border:none;color:#fff;outline:none;font-size:14px;width:100%}
        .mobile-search .search-wrapper-mobile .search-input-mobile::placeholder{color:#666}
    }
</style>

<header class="netflix-header" id="netflixHeader">
    <div class="header-left">
        <a href="dashboard.php" class="logo-text">JTECH TV</a>
        <nav class="nav-menu">
            <a href="dashboard.php" class="nav-link <?= $current_page == 'dashboard.php' ? 'active' : '' ?>">Inicio</a>
            <a href="movies.php" class="nav-link <?= $current_page == 'movies.php' ? 'active' : '' ?>">Películas</a>
            <a href="series.php" class="nav-link <?= $current_page == 'series.php' ? 'active' : '' ?>">Series</a>
            <a href="livetv.php" class="nav-link <?= $current_page == 'livetv.php' ? 'active' : '' ?>">En vivo</a>
            <form action="search.php" method="GET" class="search-wrapper">
                <i class="fas fa-search search-icon"></i>
                <input type="text" name="q" class="search-input" placeholder="Buscar...">
            </form>
        </nav>
    </div>
    <div class="header-right">
        <div class="user-menu">
            <div class="avatar-icon"><i class="fas fa-user"></i></div>
            <span style="font-size:13px;font-weight:600"><?= htmlspecialchars($username) ?></span>
            <i class="fas fa-caret-down"></i>
            <div class="dropdown-menu">
                <a href="dashboard.php" class="dropdown-item"><i class="fas fa-home"></i> Inicio</a>
                <a href="movies.php" class="dropdown-item"><i class="fas fa-film"></i> Películas</a>
                <a href="series.php" class="dropdown-item"><i class="fas fa-tv"></i> Series</a>
                <a href="multiscreen.php" class="dropdown-item"><i class="fas fa-th-large"></i> Multipantalla</a>
                <a href="settings.php" class="dropdown-item"><i class="fas fa-cog"></i> Configuración</a>
                <a href="logout.php" class="dropdown-item logout"><i class="fas fa-sign-out-alt"></i> Salir</a>
            </div>
        </div>
        <button class="hamburger-btn" id="mobileMenuBtn"><i class="fas fa-bars"></i></button>
    </div>
</header>

<!-- Barra inferior móvil -->
<nav class="bottom-nav">
    <a href="dashboard.php" class="bottom-nav-item <?= $current_page == 'dashboard.php' ? 'active' : '' ?>"><i class="fas fa-home"></i><span>Inicio</span></a>
    <a href="movies.php" class="bottom-nav-item <?= $current_page == 'movies.php' ? 'active' : '' ?>"><i class="fas fa-film"></i><span>Películas</span></a>
    <a href="series.php" class="bottom-nav-item <?= $current_page == 'series.php' ? 'active' : '' ?>"><i class="fas fa-tv"></i><span>Series</span></a>
    <a href="livetv.php" class="bottom-nav-item <?= $current_page == 'livetv.php' ? 'active' : '' ?>"><i class="fas fa-play"></i><span>En Vivo</span></a>
    <div class="bottom-nav-item" id="openMoreBtn"><i class="fas fa-bars"></i><span>Más</span></div>
</nav>

<!-- Menú lateral móvil (ÚNICO, sin duplicados) -->
<div class="menu-overlay" id="menuOverlay"></div>
<div class="side-menu-mobile" id="sideMenu">
    <div style="margin-bottom:25px;border-bottom:2px solid #E50914;padding-bottom:15px;display:flex;align-items:center;gap:10px">
        <div class="avatar-icon"><i class="fas fa-user"></i></div>
        <span style="font-weight:800;color:#fff;font-size:18px"><?= htmlspecialchars($username) ?></span>
    </div>
    
    <!-- Buscador en menú móvil -->
    <div class="mobile-search">
        <form action="search.php" method="GET" class="search-wrapper-mobile">
            <i class="fas fa-search search-icon"></i>
            <input type="text" name="q" class="search-input-mobile" placeholder="Buscar películas, series...">
        </form>
    </div>
    
    <a href="dashboard.php" class="mobile-nav-link"><i class="fas fa-home"></i> Inicio</a>
    <a href="movies.php" class="mobile-nav-link"><i class="fas fa-film"></i> Películas</a>
    <a href="series.php" class="mobile-nav-link"><i class="fas fa-tv"></i> Series</a>
    <a href="livetv.php" class="mobile-nav-link"><i class="fas fa-play"></i> En Vivo</a>
    <a href="multiscreen.php" class="mobile-nav-link"><i class="fas fa-th-large"></i> Multipantalla</a>
    <a href="settings.php" class="mobile-nav-link"><i class="fas fa-cog"></i> Configuración</a>
    <a href="logout.php" class="mobile-nav-link mobile-logout"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a>
</div>

<script>
(function(){
    var sideMenu = document.getElementById('sideMenu');
    var overlay = document.getElementById('menuOverlay');
    var mobileBtn = document.getElementById('mobileMenuBtn');
    var openMoreBtn = document.getElementById('openMoreBtn');
    
    function toggleMenu(){
        if(sideMenu){
            var isOpen = sideMenu.classList.contains('open');
            if(isOpen) {
                sideMenu.classList.remove('open');
                if(overlay) overlay.style.display = 'none';
                document.body.style.overflow = '';
            } else {
                sideMenu.classList.add('open');
                if(overlay) overlay.style.display = 'block';
                document.body.style.overflow = 'hidden';
            }
        }
    }
    
    function closeMenu(){
        if(sideMenu){
            sideMenu.classList.remove('open');
            if(overlay) overlay.style.display = 'none';
            document.body.style.overflow = '';
        }
    }
    
    if(mobileBtn) mobileBtn.addEventListener('click', toggleMenu);
    if(openMoreBtn) openMoreBtn.addEventListener('click', toggleMenu);
    if(overlay) overlay.addEventListener('click', closeMenu);
    
    window.addEventListener('scroll', function(){
        var header = document.getElementById('netflixHeader');
        if(header) header.classList.toggle('scrolled', window.scrollY > 20);
    });
})();
</script>