<!-- Modern Mobile-Responsive Navbar Component -->
<link rel="stylesheet" href="{{ url_for('static', filename='navbar.css') }}">

{# Define a mapping from language codes to human‑readable names so the
   navbar can display the current language rather than the generic
   "Language" label.  Fallback to the uppercased code if an entry
   doesn't exist. #}
{% set language_names = {
  'en': 'English',
  'fr': 'Français',
  'ar': 'العربية',
  'ja': '日本語',
  'th': 'ภาษาไทย',
  'id': 'Bahasa Indonesia',
  'de': 'Deutsch',
  'es': 'Español',
  'tr': 'Türkçe',
  'it': 'Italiano'
} %}

<nav class="modern-navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar-container">
    <!-- Logo Section -->
    <div class="navbar-logo">
      <!-- Include current language in home link -->
      <a href="{{ url_for('index', lang=lang) }}" aria-label="Home">
        <img src="{{ url_for('static', filename='SSSTiktok.png') }}" alt="SSSTikTok Logo" width="200" height="56">
      </a>
    </div>

    {# Desktop-only navigation links for Stories and MP3 download tools.  These
       links are inserted between the logo and the language/theme controls and
       are hidden on smaller viewports via CSS.  They reuse the existing
       nav-link styling defined in navbar.css. #}
    <div class="navbar-links desktop-only">
      <a href="{{ url_for('story_downloader', lang=lang) }}" class="nav-link">
        {{ translations.download_tiktok_stories }}
      </a>
      <a href="{{ url_for('mp3_page', lang=lang) }}" class="nav-link">
        {{ translations.download_tiktok_mp3 }}
      </a>
    </div>

    <!-- Right Side Controls -->
    <div class="navbar-controls">
      <!-- Language Selector -->
      <div class="navbar-lang-wrap">
        <button class="navbar-lang-btn" id="navLangBtn" aria-haspopup="listbox" aria-expanded="false">
          <svg viewBox="0 0 24 24" width="18" height="18" 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 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
          </svg>
          {# Use the language_names mapping to display a friendly language name #}
          <span id="navLangLabel">{{ language_names.get(lang, lang.upper()) }}</span>
          <svg viewBox="0 0 24 24" width="14" height="14" class="dropdown-icon">
            <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </button>

        <!-- Language Dropdown -->
        <div class="navbar-lang-dropdown" id="navLangDropdown" hidden>
          <ul class="lang-list" role="listbox">
            <li><a class="lang-option" href="{{ url_for('index', lang='en') }}" role="option">English</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='fr') }}" role="option">Français</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='ar') }}" role="option">العربية</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='ja') }}" role="option">日本語</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='th') }}" role="option">ภาษาไทย</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='id') }}" role="option">Bahasa Indonesia</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='de') }}" role="option">Deutsch</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='es') }}" role="option">Español</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='tr') }}" role="option">Türkçe</a></li>
            <li><a class="lang-option" href="{{ url_for('index', lang='it') }}" role="option">Italiano</a></li>
          </ul>
        </div>
      </div>

      <!-- Mobile Menu Button -->
      <button class="navbar-hamburger mobile-only" id="navHamburger" aria-label="Toggle menu" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Overlay -->
  <div class="mobile-menu-overlay" id="navMobileMenu" aria-hidden="true">
    <div class="mobile-menu-content">
      <button class="mobile-menu-close" id="navMobileClose" aria-label="Close menu">
        <svg viewBox="0 0 24 24" width="24" height="24" 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>

      <ul class="mobile-menu-links">
        <li><a href="{{ url_for('video_page', lang=lang) }}" class="mobile-nav-link">
            <span>{{ translations.video }}</span>
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
          </a></li>
        <li><a href="{{ url_for('story_viewer_mode', lang=lang) }}" class="mobile-nav-link">
            <span>{{ translations.story_viewer }}</span>
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
          </a></li>
        <li><a href="{{ url_for('mp3_page', lang=lang) }}" class="mobile-nav-link">
            <span>{{ translations.mp3 }}</span>
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
          </a></li>
        <li><a href="{{ url_for('story_downloader', lang=lang) }}" class="mobile-nav-link">
            <span>{{ translations.story_downloader }}</span>
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
          </a></li>
        <li><a href="{{ url_for('photos_page', lang=lang) }}" class="mobile-nav-link">
            <span>{{ translations.photo }}</span>
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" />
            </svg>
          </a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="{{ url_for('static', filename='navbar.js') }}"></script>