<nav x-data="{ open:false, scrolled:false }" x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 20)"
     :class="scrolled ? 'bg-ink/90 backdrop-blur-xl border-b border-white/5 shadow-2xl shadow-ink/50' : 'bg-transparent'"
     class="fixed top-0 inset-x-0 z-40 transition-all duration-500">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <!-- Logo + socials -->
    <div class="flex items-center gap-4">
      <a href="<?= url('/') ?>" class="flex items-center group">
        <img src="<?= asset('img/logo/mystic-art.png') ?>" alt="Mystic Art Tattoo" class="h-12 md:h-14 w-auto group-hover:opacity-80 transition">
      </a>
      <div class="hidden sm:flex items-center gap-2 pl-3 border-l border-white/10">
        <a href="https://www.facebook.com/people/Lorenzodiazink/100090372032572/" target="_blank" rel="noopener"
           class="text-bone/30 hover:text-gold transition-colors" aria-label="Facebook">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
        </a>
        <a href="https://www.instagram.com/tattoostudiomysticart/" target="_blank" rel="noopener"
           class="text-bone/30 hover:text-gold transition-colors" aria-label="Instagram">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
        </a>
      </div>
    </div>

    <!-- Desktop nav -->
    <div class="hidden md:flex items-center gap-8 text-[13px] uppercase tracking-[0.15em] font-medium">
      <a href="<?= url('/') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.home')) ?></a>
      <a href="<?= url('/about') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.about')) ?></a>
      <a href="<?= url('/artists') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.artists')) ?></a>
      <a href="<?= url('/portfolio') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.portfolio')) ?></a>
      <a href="<?= url('/aftercare') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.aftercare')) ?></a>
      <a href="<?= url('/contact') ?>" class="text-bone/50 hover:text-gold transition-colors"><?= e(t('nav.contact')) ?></a>
    </div>

    <!-- Right side: lang + CTA -->
    <div class="hidden md:flex items-center gap-4">
      <?= view('partials.lang-toggle') ?>
      <a href="<?= url('/book') ?>" class="btn-gold text-[11px] px-6 py-3"><?= e(t('nav.book')) ?></a>
    </div>

    <!-- Mobile hamburger -->
    <button @click="open = !open" class="md:hidden text-bone/60 hover:text-bone transition-colors p-1" aria-label="menu">
      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
  </div>

  <!-- Mobile dropdown -->
  <div x-show="open" x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2"
       class="md:hidden bg-ink/95 backdrop-blur-xl border-t border-white/5" style="display:none">
    <div class="px-6 py-6 flex flex-col gap-4 text-sm uppercase tracking-[0.15em]">
      <a href="<?= url('/') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.home')) ?></a>
      <a href="<?= url('/about') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.about')) ?></a>
      <a href="<?= url('/artists') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.artists')) ?></a>
      <a href="<?= url('/portfolio') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.portfolio')) ?></a>
      <a href="<?= url('/aftercare') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.aftercare')) ?></a>
      <a href="<?= url('/contact') ?>" @click="open=false" class="text-bone/70 hover:text-gold transition-colors"><?= e(t('nav.contact')) ?></a>
      <div class="flex items-center justify-between pt-4 border-t border-white/5">
        <?= view('partials.lang-toggle') ?>
        <a href="<?= url('/book') ?>" class="btn-gold text-[11px] px-6 py-3"><?= e(t('nav.book')) ?></a>
      </div>
    </div>
  </div>
</nav>
