<?php
/**
 * Header Component — Navigation & Drawer
 * Minimalist Luxury Editorial Theme
 */

$headerStyle = $headerStyle ?? 'solid';
$currentPage = $currentPage ?? '';

$headerClasses = $headerStyle === 'transparent' 
  ? 'fixed top-0 left-0 w-full z-50 text-white header-transparent' 
  : 'fixed top-0 left-0 w-full z-50 text-black bg-white/95 backdrop-blur-md border-b border-gray-200/50 shadow-xs';

$logoFilter = $headerStyle === 'transparent' ? 'filter: brightness(0) invert(1);' : 'filter: brightness(0);';
?>

<!-- Loading Screen -->
<div id="loading-screen" class="fixed inset-0 bg-black z-[9999] flex flex-col items-center justify-center transition-all duration-700">
  <div class="loader-bar w-28 h-px bg-white/20 relative overflow-hidden">
    <div class="absolute inset-0 bg-gold animate-pulse"></div>
  </div>
  <p class="loader-text font-sans text-[10px] tracking-[0.35em] text-gold uppercase mt-5">AJOUAMAI IMMO-BUSINESS</p>
</div>

<!-- HEADER BAR (Clean Top Bar) -->
<header id="site-header" data-header-style="<?= $headerStyle ?>" class="<?= $headerClasses ?> transition-all duration-500">
  <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">

    <!-- LEFT: Menu Burger Toggle Button -->
    <button id="sidebar-toggle" class="flex items-center gap-3 p-2 group cursor-pointer focus:outline-none" aria-label="Menu Principal">
      <div class="flex flex-col gap-1.5 w-6">
        <span class="burger-line block w-6 h-px bg-current transition-all duration-300 group-hover:w-4"></span>
        <span class="burger-line block w-4 h-px bg-current transition-all duration-300 group-hover:w-6"></span>
        <span class="burger-line block w-5 h-px bg-current transition-all duration-300"></span>
      </div>
    </button>

    <!-- CENTER: Brand Logo & Title -->
    <a href="<?= SITE_URL ?>/" class="absolute left-1/2 -translate-x-1/2 flex items-center gap-3 group">
      <img id="header-logo" src="<?= SITE_URL ?>/assets/img/logo.png" style="<?= $logoFilter ?>" class="header-logo h-12 w-auto sm:h-14 object-contain transition-all duration-500 group-hover:scale-105" alt="AJOUAMAI IMMO-BUSINESS Logo" />
      <span id="header-title" class="header-link text-sm md:text-base font-serif tracking-[0.2em] uppercase font-bold hidden sm:block transition-colors duration-300">AJOUAMAI IMMO-BUSINESS</span>
    </a>

    <!-- RIGHT: Quick Action CTA -->
    <div class="flex items-center gap-4">
      <a href="<?= SITE_URL ?>/pages/estimation" class="header-btn border border-current px-5 py-2.5 text-xs tracking-[0.2em] uppercase font-sans transition-all duration-300 font-bold <?= $currentPage === 'estimation' ? 'bg-gold border-gold text-white' : '' ?>">
        Estimer
      </a>
    </div>

  </div>
</header>

<!-- SIDEBAR OVERLAY -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] opacity-0 invisible transition-all duration-500"></div>

<!-- SIDEBAR NAVIGATION DRAWER -->
<nav id="sidebar-nav" class="fixed top-0 left-0 h-full w-80 sm:w-96 bg-white z-[70] transform -translate-x-full transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] flex flex-col shadow-2xl">

  <!-- Sidebar Top Header -->
  <div class="h-24 flex items-center justify-between px-8 border-b border-gray-100">
    <a href="<?= SITE_URL ?>/" class="flex items-center gap-3">
      <img src="<?= SITE_URL ?>/assets/img/logo.png" style="filter: brightness(0);" class="h-10 w-auto object-contain" alt="AJOUAMAI IMMO-BUSINESS" />
      <span class="text-xs font-serif tracking-[0.2em] uppercase text-black font-bold">AJOUAMAI IMMO-BUSINESS</span>
    </a>
    <button id="sidebar-close" class="p-2 text-gray-400 hover:text-black transition-colors focus:outline-none" aria-label="Fermer Le Menu">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>

  <!-- Sidebar Links & Action Buttons -->
  <div class="flex-1 overflow-y-auto py-8 px-8 flex flex-col justify-between">
    
    <!-- 5 Main Navigation Links -->
    <div class="space-y-1">
      <a href="<?= SITE_URL ?>/" class="sidebar-link block py-3.5 border-b border-gray-100 text-xs tracking-[0.25em] uppercase font-sans text-black hover:text-gold transition-colors font-bold <?= $currentPage === 'home' ? 'text-gold' : '' ?>">
        Accueil
      </a>
      <a href="<?= SITE_URL ?>/pages/properties.php" class="sidebar-link block py-3.5 border-b border-gray-100 text-xs tracking-[0.25em] uppercase font-sans text-black hover:text-gold transition-colors font-bold <?= $currentPage === 'buy' || $currentPage === 'rent' || $currentPage === 'properties' ? 'text-gold' : '' ?>">
        Propriétés
      </a>
      <a href="<?= SITE_URL ?>/pages/articles.php" class="sidebar-link block py-3.5 border-b border-gray-100 text-xs tracking-[0.25em] uppercase font-sans text-black hover:text-gold transition-colors font-bold <?= $currentPage === 'articles' ? 'text-gold' : '' ?>">
        Actualité-IMMO
      </a>
      <a href="<?= SITE_URL ?>/pages/about.php" class="sidebar-link block py-3.5 border-b border-gray-100 text-xs tracking-[0.25em] uppercase font-sans text-black hover:text-gold transition-colors font-bold <?= $currentPage === 'about' ? 'text-gold' : '' ?>">
        À Propos
      </a>
      <a href="<?= SITE_URL ?>/pages/services.php" class="sidebar-link block py-3.5 border-b border-gray-100 text-xs tracking-[0.25em] uppercase font-sans text-black hover:text-gold transition-colors font-bold <?= $currentPage === 'services' ? 'text-gold' : '' ?>">
        Nos Services
      </a>
    </div>

    <!-- 2 Action Buttons at Bottom of Navbar Drawer -->
    <div class="mt-8 pt-6 border-t border-gray-100 space-y-3">
      <a href="<?= SITE_URL ?>/pages/contact.php" class="block w-full bg-black text-white text-center text-xs tracking-[0.2em] uppercase py-3.5 hover:bg-gold transition-all font-sans font-bold">
        Contactez-nous
      </a>
      <a href="<?= SITE_URL ?>/pages/rdv.php" class="block w-full border border-black text-black text-center text-xs tracking-[0.2em] uppercase py-3.5 hover:bg-black hover:text-white transition-all font-sans font-bold">
        Prendre RDV
      </a>
    </div>

  </div>

</nav>
