<?php

$l       = $lang ?? 'fr';
$prefix  = "/{$l}";
$other   = $l === 'fr' ? 'en' : 'fr';
$switchUrl = $langService->switchUrl($other);
$actBase   = $l === 'fr' ? '/fr/activites' : '/en/activities';
$newsBase  = $l === 'fr' ? '/fr/actualites' : '/en/news';
$cur       = $page ?? '';


$mega = [
  'group' => [
    'label' => $t('nav.group'),
    'cols'  => [
      [
        'title' => $l === 'fr' ? 'Le Groupe' : 'The Group',
        'links' => [
          ['href' => $prefix . ($l==='fr' ? '/qui-sommes-nous' : '/about'),
           'label' => $t('nav.about'),
           'desc'  => $l==='fr' ? 'Notre histoire & notre ADN' : 'Our history & DNA'],
          ['href' => $prefix . '/vision',
           'label' => $t('nav.vision'),
           'desc'  => $l==='fr' ? 'Relier, inspirer, transformer' : 'Connect, inspire, transform'],
        ],
      ],
      [
        'title' => $l === 'fr' ? 'Présence' : 'Presence',
        'links' => [
          ['href' => '#', 'label' => 'Togo — Lomé',        'desc' => $l==='fr' ? 'Siège stratégique' : 'Strategic HQ'],
          ['href' => '#', 'label' => 'Bénin · Niger',      'desc' => $l==='fr' ? 'Opérations Afrique de l\'Ouest' : 'West Africa ops'],
          ['href' => '#', 'label' => 'Guinée · Gabon',     'desc' => $l==='fr' ? 'Afrique Centrale' : 'Central Africa'],
          ['href' => '#', 'label' => 'Dubai — EAU',        'desc' => $l==='fr' ? 'Bureau International' : 'International office'],
        ],
      ],
    ],
  ],
  'activities' => [
    'label' => $t('nav.activities'),
    'cols'  => [
      [
        'title' => $l==='fr' ? 'Communication & Événementiel' : 'Communication & Events',
        'pole'  => 'communication',
        'links' => [
          ['href' => $actBase.'/communication/integraale',   'label' => 'Integraale',   'desc' => $l==='fr' ? 'Conseil en communication' : 'Communication consulting'],
          ['href' => $actBase.'/communication/danesso',      'label' => 'Danesso',      'desc' => $l==='fr' ? 'Logistique événementielle' : 'Event logistics'],
        ],
      ],
      [
        'title' => $l==='fr' ? 'Médias' : 'Media',
        'pole'  => 'medias',
        'links' => [
          ['href' => $actBase.'/medias/one-radio',  'label' => 'One Radio',   'desc' => '102.7 FM — Lomé'],
          ['href' => $actBase.'/medias/one-tv',     'label' => 'One TV',      'desc' => $l==='fr' ? 'TV continentale, Canal+ 439' : 'Continental TV, Canal+ 439'],
          ['href' => $actBase.'/medias/miiddle-tv', 'label' => 'Miiddle TV',  'desc' => $l==='fr' ? 'Chine–Afrique' : 'China–Africa'],
        ],
      ],
      [
        'title' => $l==='fr' ? 'Télécoms' : 'Telecoms',
        'pole'  => 'telecoms',
        'links' => [
          ['href' => $actBase.'/telecoms/luft', 'label' => 'Luft', 'desc' => 'Linking Us'],
        ],
      ],
      [
        'title' => $l==='fr' ? 'Industrie & Logistique' : 'Industry & Logistics',
        'pole'  => 'industrie',
        'links' => [
          ['href' => $actBase.'/industrie/piologis-city', 'label' => 'PioLogis City', 'desc' => $l==='fr' ? 'Cité industrielle' : 'Industrial city'],
        ],
      ],
    ],
  ],
];

$poleColors = [
  'communication' => '#FFCE00',
  'medias'        => '#1A6B8A',
  'telecoms'      => '#2E7D4F',
  'divertissement'=> '#8B2FC9',
  'industrie'     => '#C94B2F',
];
?>

<header id="site-header" class="site-header" role="banner">
<div class="nav-bar">
  <div class="nav-bar-inner">

  
    <button class="nav-hamburger" id="nav-hamburger"
            aria-label="<?= $l==='fr' ? 'Ouvrir le menu' : 'Open menu' ?>"
            aria-expanded="false" aria-controls="mobile-drawer">
      <span class="ham-line"></span>
      <span class="ham-line"></span>
      <span class="ham-line"></span>
    </button>

  
    <a href="<?= $prefix ?>/" class="nav-logo-wrap" aria-label="QUAADRAA — Accueil">
      <img src="/assets/images/logo-quaadra.png" alt="QUAADRAA logo" class="nav-logo-img">
      <span class="nav-slogan">Growth Accelerator</span>
    </a>


    <nav class="nav-desktop" aria-label="Navigation principale" id="nav-desktop">
      <ul class="nav-list" role="list">

      
        <li class="nav-item <?= $cur==='home' ? 'is-active' : '' ?>">
          <a href="<?= $prefix ?>/" class="nav-link"><?= $t('nav.home') ?></a>
        </li>

      
        <li class="nav-item has-mega <?= in_array($cur,['about','vision']) ? 'is-active' : '' ?>"
            data-mega="group">
          <button class="nav-link nav-mega-btn" aria-expanded="false" aria-haspopup="true">
            <?= $mega['group']['label'] ?>
            <svg class="nav-chevron" viewBox="0 0 20 20" width="12" height="12" aria-hidden="true">
              <path d="M5 7l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
            </svg>
          </button>
        </li>

      
        <li class="nav-item has-mega <?= $cur==='activities' ? 'is-active' : '' ?>"
            data-mega="activities">
          <button class="nav-link nav-mega-btn" aria-expanded="false" aria-haspopup="true">
            <?= $mega['activities']['label'] ?>
            <svg class="nav-chevron" viewBox="0 0 20 20" width="12" height="12" aria-hidden="true">
              <path d="M5 7l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
            </svg>
          </button>
        </li>

      
        <li class="nav-item <?= $cur==='news' ? 'is-active' : '' ?>">
          <a href="<?= $newsBase ?>" class="nav-link"><?= $t('nav.news') ?></a>
        </li>

     
        <li class="nav-item <?= $cur==='contact' ? 'is-active' : '' ?>">
          <a href="<?= $prefix ?>/contact" class="nav-link"><?= $t('nav.contact') ?></a>
        </li>

      </ul>
    </nav>

  
    <a href="<?= htmlspecialchars($switchUrl) ?>" class="nav-lang" aria-label="Switch language">
      <?= strtoupper($other) ?>
    </a>

  </div>
</div>


<?php foreach ($mega as $key => $menu): ?>
<div class="mega-panel" id="mega-<?= $key ?>" aria-hidden="true" role="region" aria-label="<?= htmlspecialchars($menu['label']) ?>">
  <div class="mega-inner">
    <?php foreach ($menu['cols'] as $col): ?>
    <div class="mega-col" <?= isset($col['pole']) ? 'style="--col-color:' . ($poleColors[$col['pole']] ?? '#C9A84C') . '"' : '' ?>>
      <p class="mega-col-title"><?= htmlspecialchars($col['title']) ?></p>
      <ul class="mega-links" role="list">
        <?php foreach ($col['links'] as $link): ?>
        <li>
          <a href="<?= htmlspecialchars($link['href']) ?>" class="mega-link">
            <span class="mega-link-label"><?= htmlspecialchars($link['label']) ?></span>
            <?php if (!empty($link['desc'])): ?>
            <span class="mega-link-desc"><?= htmlspecialchars($link['desc']) ?></span>
            <?php endif; ?>
          </a>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>
    <?php endforeach; ?>

  
    <div class="mega-cta-col">
      <?php if ($key === 'group'): ?>
      <a href="<?= $prefix . ($l==='fr' ? '/qui-sommes-nous' : '/about') ?>" class="mega-cta-card">
        <span class="mega-cta-icon">◈</span>
        <span class="mega-cta-text"><?= $l==='fr' ? 'Découvrir le groupe' : 'Discover the group' ?></span>
        <span class="mega-cta-arrow">→</span>
      </a>
      <?php else: ?>
      <a href="<?= $actBase ?>" class="mega-cta-card">
        <span class="mega-cta-icon">◈</span>
        <span class="mega-cta-text"><?= $l==='fr' ? 'Toutes nos activités' : 'All our activities' ?></span>
        <span class="mega-cta-arrow">→</span>
      </a>
      <?php endif; ?>
    </div>

  </div>
</div>
<?php endforeach; ?>


<div class="mega-overlay" id="mega-overlay" aria-hidden="true"></div>


<div class="mobile-drawer" id="mobile-drawer" aria-hidden="true" role="dialog"
     aria-label="<?= $l==='fr' ? 'Menu mobile' : 'Mobile menu' ?>">

  <div class="drawer-header">
    <a href="<?= $prefix ?>/" class="drawer-logo">
      <img src="/assets/images/logo-quaadra.png" alt="QUAADRAA" height="36">
      <span class="drawer-slogan">Growth Accelerator</span>
    </a>
    <button class="drawer-close" id="drawer-close" aria-label="Fermer">
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>

  <nav class="drawer-nav">
    <ul class="drawer-list">

      <li class="drawer-item">
        <a href="<?= $prefix ?>/" class="drawer-link"><?= $t('nav.home') ?></a>
      </li>

      
      <li class="drawer-item drawer-has-sub">
        <button class="drawer-link drawer-acc-btn" aria-expanded="false">
          <?= $mega['group']['label'] ?>
          <svg class="drawer-chevron" viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
            <path d="M5 7l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="drawer-sub">
          <?php foreach ($mega['group']['cols'] as $col): ?>
            <?php foreach ($col['links'] as $link): ?>
            <a href="<?= htmlspecialchars($link['href']) ?>" class="drawer-sub-link">
              <?= htmlspecialchars($link['label']) ?>
            </a>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </div>
      </li>


      <li class="drawer-item drawer-has-sub">
        <button class="drawer-link drawer-acc-btn" aria-expanded="false">
          <?= $mega['activities']['label'] ?>
          <svg class="drawer-chevron" viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
            <path d="M5 7l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="drawer-sub">
          <?php foreach ($mega['activities']['cols'] as $col): ?>
          <p class="drawer-sub-cat" style="color:<?= $poleColors[$col['pole'] ?? ''] ?? '#FFCE00' ?>">
            <?= htmlspecialchars($col['title']) ?>
          </p>
            <?php foreach ($col['links'] as $link): ?>
            <a href="<?= htmlspecialchars($link['href']) ?>" class="drawer-sub-link">
              <?= htmlspecialchars($link['label']) ?>
            </a>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </div>
      </li>

      <li class="drawer-item">
        <a href="<?= $newsBase ?>" class="drawer-link"><?= $t('nav.news') ?></a>
      </li>

      <li class="drawer-item">
        <a href="<?= $prefix ?>/contact" class="drawer-link"><?= $t('nav.contact') ?></a>
      </li>

    </ul>
  </nav>

  <div class="drawer-footer">
    <a href="<?= htmlspecialchars($switchUrl) ?>" class="drawer-lang">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
      <?= strtoupper($other) ?> — Switch language
    </a>
  </div>
</div>
<div class="drawer-backdrop" id="drawer-backdrop" aria-hidden="true"></div>

</header>
