---
import type { Profile } from '../content/schemas';

interface Props {
  profile: Profile;
}
const { profile } = Astro.props;

const navItems = [
  { href: '/', label: 'Accueil', tag: 'home' },
  { href: '/projets', label: 'Projets', tag: 'crate' },
  { href: '/experience', label: 'Expérience', tag: 'setlist' },
  { href: '/formations', label: 'Formations', tag: 'log' },
];

const current = Astro.url.pathname;
---

<header
  class="fixed top-0 inset-x-0 z-50 backdrop-blur-xl bg-[rgba(10,10,15,0.75)] border-b border-[color:var(--color-border)]"
  transition:animate="none"
>
  <!-- Scroll progress bar -->
  <div
    id="scroll-progress"
    class="absolute bottom-0 left-0 h-px bg-[color:var(--color-acid)] shadow-[0_0_8px_rgba(198,255,0,0.7)] origin-left transition-[width] duration-100 ease-out"
    style="width: 0%"
  >
  </div>

  <div class="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
    <!-- Logo "JL" stencil + ON AIR -->
    <a href="/" class="flex items-center gap-3 group shrink-0" aria-label="Johan Leroy — accueil">
      <span
        class="stencil text-2xl leading-none tracking-wider flex items-baseline gap-0.5 group-hover:scale-[1.02] transition-transform"
      >
        <span class="text-[color:var(--color-cyan)] glow-text-cyan">J</span>
        <span class="text-[color:var(--color-acid)] glow-text-acid">L</span>
        <span class="text-[color:var(--color-magenta)] glow-text-magenta text-xs">•</span>
      </span>
      {
        profile.available && (
          <span class="hidden sm:inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-[0.2em] text-[color:var(--color-text-muted)]">
            <span class="led led-green animate-led-green" aria-hidden="true" />
            on&nbsp;air
          </span>
        )
      }
    </a>

    <!-- Nav desktop -->
    <nav
      class="hidden md:flex items-center gap-1 font-mono text-[11px] uppercase tracking-[0.18em]"
    >
      {
        navItems.map((item) => {
          const active =
            current === item.href || (item.href !== '/' && current.startsWith(item.href));
          return (
            <a
              href={item.href}
              class:list={[
                'relative group flex items-center gap-2 px-3 py-2 transition-colors',
                active
                  ? 'text-[color:var(--color-cyan)]'
                  : 'text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)]',
              ]}
            >
              <span
                class:list={[
                  'led transition-all',
                  active ? 'led-cyan' : 'bg-[color:var(--color-border)] shadow-none',
                ]}
                aria-hidden="true"
              />
              <span class="flex flex-col items-start leading-tight">
                <span class="font-display text-xs tracking-[0.15em]">{item.label}</span>
                <span
                  class:list={[
                    'text-[9px] opacity-60',
                    active && 'text-[color:var(--color-acid)] opacity-100',
                  ]}
                >
                  // {item.tag}
                </span>
              </span>
              {active && (
                <span
                  class="absolute -bottom-px left-3 right-3 h-px bg-[color:var(--color-cyan)]"
                  aria-hidden="true"
                />
              )}
            </a>
          );
        })
      }
    </nav>

    <!-- Controls (sound toggle + mobile menu) -->
    <div class="flex items-center gap-2 shrink-0">
      <!-- Sound toggle -->
      <button
        id="sound-toggle"
        class="p-2 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition-colors group"
        aria-label="Activer/désactiver les sons"
        aria-pressed="false"
        title="Sons"
      >
        <svg
          class="sound-on hidden w-5 h-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.75"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
          />
        </svg>
        <svg
          class="sound-off w-5 h-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.75"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15zM17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
          />
        </svg>
      </button>

      <!-- Mobile menu button -->
      <button
        id="mobile-menu-btn"
        class="md:hidden p-2 text-[color:var(--color-text)]"
        aria-label="Menu"
        aria-expanded="false"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile menu -->
  <div
    id="mobile-menu"
    class="md:hidden hidden border-t border-[color:var(--color-border)] bg-[rgba(10,10,15,0.97)]"
  >
    <nav class="container mx-auto px-4 py-4 flex flex-col gap-1 font-mono uppercase tracking-wider">
      {
        navItems.map((item) => {
          const active =
            current === item.href || (item.href !== '/' && current.startsWith(item.href));
          return (
            <a
              href={item.href}
              class:list={[
                'flex items-center gap-3 px-3 py-3 transition-colors',
                active
                  ? 'text-[color:var(--color-cyan)] bg-[rgba(0,240,255,0.04)]'
                  : 'text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)]',
              ]}
            >
              <span
                class:list={[
                  'led',
                  active ? 'led-cyan' : 'bg-[color:var(--color-border)] shadow-none',
                ]}
                aria-hidden="true"
              />
              <span class="font-display text-sm">{item.label}</span>
              <span class="ml-auto text-[10px] opacity-50">// {item.tag}</span>
            </a>
          );
        })
      }
    </nav>
  </div>
</header>

<script is:inline data-astro-rerun>
  // Mobile menu
  const btn = document.getElementById('mobile-menu-btn');
  const menu = document.getElementById('mobile-menu');
  btn?.addEventListener('click', () => {
    const open = menu?.classList.toggle('hidden') === false;
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });

  // Scroll progress bar
  const progress = document.getElementById('scroll-progress');
  function updateProgress() {
    if (!progress) return;
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const pct = docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0;
    progress.style.width = `${pct}%`;
  }
  window.addEventListener('scroll', updateProgress, { passive: true });
  window.addEventListener('resize', updateProgress);
  updateProgress();

  // Sound toggle (state in localStorage, off by default)
  const soundBtn = document.getElementById('sound-toggle');
  const onIcon = soundBtn?.querySelector('.sound-on');
  const offIcon = soundBtn?.querySelector('.sound-off');

  function applySoundState(on) {
    if (!soundBtn || !onIcon || !offIcon) return;
    soundBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
    onIcon.classList.toggle('hidden', !on);
    offIcon.classList.toggle('hidden', on);
    window.__soundOn = on;
  }

  const stored = localStorage.getItem('portfolio:sound');
  applySoundState(stored === 'on');

  soundBtn?.addEventListener('click', () => {
    const next = soundBtn.getAttribute('aria-pressed') !== 'true';
    localStorage.setItem('portfolio:sound', next ? 'on' : 'off');
    applySoundState(next);
  });
</script>
