<header>
  <div class="container-fluid nav" style="display:flex; justify-content:space-between; align-items:center; padding:10px 20px;">

    <!-- Gauche : Logo + Horloge + Pays + Langue -->
    <div class="nav-left" style="display:flex; align-items:center; gap:15px;">
      <div class="logo">
        <a href="index.php" style="text-decoration:none; color:inherit; font-weight:bold; font-size:1.2em;"><img src="img/logo.png" width="150px"/></a>
      </div>

      <!-- Horloge -->
      <div id="mini-analog-clock" class="analog-clock">
          <div class="hand hour"></div>
          <div class="hand minute"></div>
          <div class="hand second"></div>
          <div class="center-dot"></div>
      </div>

      <!-- Sélecteur de pays -->
      <a class="btn" href="index.php?p=selectcountry" style="text-decoration:none; color:inherit;">
        <?php
        $alpha2 = $_SESSION['COUNTRY']['alpha2'] ?? null;
        if ($alpha2) {
            $countryicone = "https://flagcdn.com/w40/" . strtolower($alpha2) . ".png";
            echo '<img src="' . $countryicone . '" class="country-flag" alt="'.ucfirst(strtolower($_SESSION['COUNTRY']['nom_pays'] ?? "World")).'">';
        } else {
            echo '🌍';
        }
        ?>
      </a>

      <!-- Sélecteur de langue -->
        <?php
        
$languages = [
    'en' => ['name'=>'English','svg'=>'<svg viewBox="0 0 60 30"><rect width="60" height="30" fill="#012169"/><path fill="#FFF" d="M0 0l60 30M60 0L0 30"/><path fill="#C8102E" d="M0 0l60 30M60 0L0 30" stroke-width="6"/></svg>'],
    'fr' => ['name'=>'Français','svg'=>'<svg viewBox="0 0 3 2"><rect width="1" height="2" fill="#0055A4"/><rect x="1" width="1" height="2" fill="#FFF"/><rect x="2" width="1" height="2" fill="#EF4135"/></svg>'],
    'ar' => ['name'=>'العربية','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#006C35"/></svg>'],
    'es' => ['name'=>'Español','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#AA151B"/><rect y="0.67" width="3" height="0.66" fill="#F1BF00"/></svg>'],
    'de' => ['name'=>'Deutsch','svg'=>'<svg viewBox="0 0 5 3"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#DD0000"/><rect y="2" width="5" height="1" fill="#FFCE00"/></svg>'],
    'it' => ['name'=>'Italiano','svg'=>'<svg viewBox="0 0 3 2"><rect width="1" height="2" fill="#009246"/><rect x="1" width="1" height="2" fill="#FFF"/><rect x="2" width="1" height="2" fill="#CE2B37"/></svg>'],
    'pt' => ['name'=>'Português','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#006600"/><rect width="1.5" height="2" fill="#FFCC00"/></svg>'],
    'ru' => ['name'=>'Русский','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><rect y="0.67" width="3" height="0.66" fill="#0039A6"/><rect y="1.33" width="3" height="0.67" fill="#D52B1E"/></svg>'],
    'zh' => ['name'=>'中文','svg'=>'<svg viewBox="0 0 30 20"><rect width="30" height="20" fill="#DE2910"/><polygon fill="#FF0" points="5,2 6,4 8,4 6.5,5 7.5,7 5,5.5 2.5,7 3.5,5 2,4 4,4"/></svg>'],
    'ja' => ['name'=>'日本語','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><circle cx="1.5" cy="1" r="0.6" fill="#BC002D"/></svg>'],
    'ko' => ['name'=>'한국어','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><circle cx="1.5" cy="1" r="0.5" fill="#CD2E3A"/><circle cx="1.5" cy="1" r="0.3" fill="#0047A0"/></svg>'],
    'hi' => ['name'=>'हिन्दी','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#FF9933"/><rect y="0.67" width="3" height="0.66" fill="#138808"/><circle cx="1.5" cy="1" r="0.33" fill="#000"/></svg>'],
    'bn' => ['name'=>'বাংলা','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#F42A41"/><circle cx="1.5" cy="1" r="0.33" fill="#FFF"/></svg>'],
    'ur' => ['name'=>'اردو','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#01411C"/><crescent cx="1.5" cy="1" r="0.5" fill="#FFF"/></svg>'],
    'tr' => ['name'=>'Türkçe','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#E30A17"/><circle cx="1" cy="1" r="0.5" fill="#FFF"/><circle cx="1.25" cy="1" r="0.4" fill="#E30A17"/></svg>'],
    'vi' => ['name'=>'Tiếng Việt','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#DA251D"/><polygon fill="#FF0" points="1.5,0.4 1.62,0.72 1.95,0.72 1.68,0.88 1.79,1.2 1.5,1 1.21,1.2 1.32,0.88 1.05,0.72 1.38,0.72"/></svg>'],
    'th' => ['name'=>'ไทย','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="0.4" y="0" fill="#A51931"/><rect width="3" height="0.8" y="0.4" fill="#FFF"/><rect width="3" height="0.4" y="1.2" fill="#A51931"/><rect width="3" height="0.4" y="1.6" fill="#0055A4"/></svg>'],
    'ms' => ['name'=>'Bahasa Melayu','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#CC0000"/><rect width="3" height="1" y="0.66" fill="#FFF"/><crescent cx="0.75" cy="1" r="0.4" fill="#FFF"/></svg>'],
    'id' => ['name'=>'Bahasa Indonesia','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="1" fill="#FF0000"/><rect y="1" width="3" height="1" fill="#FFF"/></svg>'],
    'fa' => ['name'=>'فارسی','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#239F40"/><rect y="0.67" width="3" height="0.66" fill="#FFF"/><rect y="1.33" width="3" height="0.67" fill="#DA1212"/></svg>'],
    'he' => ['name'=>'עברית','svg'=>'<svg viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><polygon fill="#0038B8" points="0,0 3,0 1.5,2"/></svg>'],
    // ... tu peux continuer pour les autres langues majeures
];


        $currentLangCode = strtolower($_SESSION['LANGUAGE'] ?? 'en');
        $currentLang = $languages[$currentLangCode] ?? $languages['en'];
      ?>
      <a class="btn" href="index.php?p=selectlanguage" style="text-decoration:none; color:inherit;">
        <?= $currentLang['name'] ?>
      </a>
    </div>

    <!-- Droite : Boutons -->
    <div class="nav-right" style="display:flex; align-items:center; gap:10px;">
       <a class="btn" href="index.php?p=learn">📚 Learn</a>
         <a class="btn" href="index.php?p=propertymanager">🏢 Property Manager</a>
      <?php if(!$_SESSION['user']['connected']): ?>
        <a class="btn" href="index.php?p=login"><?= trad('Sign in'); ?></a>
      <?php else: ?>
        <a class="btn" href="index.php?p=dashboard"><?= trad('Dashboard'); ?></a>
      <?php endif; ?>

      <a class="btn btn-danger" href="?p=newlisting"><?= trad('New post'); ?></a>
    </div>

  </div>
</header>

<!-- Horloge JS -->
<script>
function updateAnalogClock() {
    const tz = "<?= $_SESSION['TIMEZONE'] ?? 'UTC' ?>";
    const now = new Date();
    const timeParts = new Intl.DateTimeFormat('en-US', {
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        timeZone: tz
    }).formatToParts(now);

    const getPart = (type) => parseInt(timeParts.find(p => p.type === type).value, 10);
    const hr  = (getPart('hour') % 12) - 4;
    const min = getPart('minute') - 15;
    const sec = getPart('second');

    const secondDeg = sec * 6;
    const minuteDeg = (min * 6) + (sec * 0.1);
    const hourDeg   = (hr * 30) + (min * 0.5);

    const clock = document.querySelector(".analog-clock");
    if(!clock) return;

    clock.querySelector(".hand.second").style.transform = `rotate(${secondDeg}deg)`;
    clock.querySelector(".hand.minute").style.transform = `rotate(${minuteDeg}deg)`;
    clock.querySelector(".hand.hour").style.transform = `rotate(${hourDeg}deg)`;
}

setInterval(updateAnalogClock, 1000);
updateAnalogClock();
</script>

<!-- Horloge CSS -->
<style>

  .logo a {
    font-size: 15px !important;
  }
.analog-clock {
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 4px rgba(0,0,0,0.3) inset;
}
.analog-clock .hand {
    position: absolute;
    width: 50%;
    height: 2px;
    background: #3d08ffff;
    top: 50%;
    left: 50%;
    transform-origin: 0% 50%;
    transform: rotate(90deg);
}
.analog-clock .hand.hour { width: 35%; height: 2.5px; }
.analog-clock .hand.minute { width: 45%; }
.analog-clock .hand.second { width: 48%; height: 1.5px; background:red; }
.analog-clock .center-dot {
    width: 4px; height: 4px; background:red; border-radius:50%;
    position: absolute; top:calc(50% - 2px); left:calc(50% - 2px);
}
header a { text-decoration:none; color:inherit; }
header a:hover { text-decoration:none; color:inherit; }
</style>
