---
import { useTranslations, getLocale } from '../lib/i18n';
import { amenitizUrl } from '../lib/urls';
import { getRelativeLocaleUrl } from 'astro:i18n';
const lang = getLocale(Astro);
const t = useTranslations(lang);
const link = (p: string) => getRelativeLocaleUrl(lang, p);
---
<header class="site-header">
  <div class="container bar">
    <a class="brand" href={link('/')} aria-label="Simon's Guest House Rome, home">
      <span class="brand-words">
        <span class="brand-script">Simon's</span>
        <span class="brand-caps">Guesthouse&nbsp;Rome</span>
      </span>
    </a>

    <!-- Hamburger toggle (visible < 900px) -->
    <button
      class="nav-toggle"
      aria-controls="primary-nav"
      aria-expanded="false"
      aria-label="Toggle navigation menu"
      type="button"
    >
      <span class="burger" aria-hidden="true"></span>
    </button>

    <nav id="primary-nav" class="primary-nav" aria-label="Primary">
      <a href={link('/camere')}>{t('nav.rooms')}</a>
      <a href={link('/chi-siamo')}>{t('nav.about')}</a>
      <a href={link('/contatti')}>{t('nav.contact')}</a>
    </nav>

    <div class="actions">
      <a class="btn-book" href={amenitizUrl(lang)} target="_blank" rel="noopener">{t('cta.book')}</a>
    </div>
  </div>
</header>

<script>
  // Header logo is enlarged at the top of the page and shrinks on scroll.
  const applyHeaderState = () => {
    const h = document.querySelector('.site-header');
    if (h) h.classList.toggle('is-scrolled', window.scrollY > 16);
  };
  const enableHeaderAnim = () => {
    const h = document.querySelector('.site-header');
    if (h && !h.classList.contains('hdr-ready')) h.classList.add('hdr-ready');
  };
  applyHeaderState();
  window.addEventListener('scroll', applyHeaderState, { passive: true });

  // Enable the shrink ANIMATION only after a deliberate user scroll/interaction.
  // On load — including the browser's scroll restoration after a reload while
  // scrolled — the header snaps straight to the correct size with NO animation.
  window.addEventListener('wheel', enableHeaderAnim, { passive: true });
  window.addEventListener('touchmove', enableHeaderAnim, { passive: true });
  window.addEventListener('keydown', enableHeaderAnim);

  document.addEventListener('astro:page-load', () => {
    const h = document.querySelector('.site-header');
    if (h) h.classList.remove('hdr-ready'); // re-arm: the next user scroll re-enables the animation
    applyHeaderState();
  });

  const toggle = document.querySelector<HTMLButtonElement>('.nav-toggle');
  const nav = document.getElementById('primary-nav');

  if (toggle && nav) {
    toggle.addEventListener('click', () => {
      const expanded = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!expanded));
      nav.classList.toggle('is-open', !expanded);
    });

    // Close nav when a link is clicked (SPA transitions / mobile UX)
    nav.querySelectorAll('a').forEach((a) => {
      a.addEventListener('click', () => {
        toggle.setAttribute('aria-expanded', 'false');
        nav.classList.remove('is-open');
      });
    });

    // Close on Escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && nav.classList.contains('is-open')) {
        toggle.setAttribute('aria-expanded', 'false');
        nav.classList.remove('is-open');
        toggle.focus();
      }
    });
  }
</script>

<style>
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--c-cream) 88%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--c-line);
  }

  .bar {
    display: flex;
    align-items: center;
    column-gap: var(--space-s);
    row-gap: 0; /* no phantom gap above the wrapped (hidden) mobile nav */
    /* Roomy at the top of the page; shrinks once the user starts scrolling. */
    padding-block: 1.5rem;
  }
  .site-header.is-scrolled .bar {
    padding-block: var(--space-s);
  }

  /* Brand — Great Vibes wordmark over Fraunces small-caps (no icon; full name reads it) */
  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--c-ink);
    flex-shrink: 0;
  }

  .brand-words {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* shrink each line to its content so the auto-fit can measure widths */
    line-height: 1;
  }

  .brand-script {
    font-family: var(--font-script);
    font-size: 4.76rem; /* measured to match the width of "GUESTHOUSE ROME" exactly (no JS) */
    line-height: .85;
    color: var(--c-ink);
    /* Great Vibes has a deep descender — give it room so it never clips */
    padding-block: .12em .06em;
  }
  .site-header.is-scrolled .brand-script { font-size: 1.95rem; }

  .brand-caps {
    font-family: var(--font-display);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .92rem;
    color: var(--c-muted);
    padding-inline-start: .26em;
  }
  .site-header.is-scrolled .brand-caps { font-size: .6rem; }

  /* Animate size/padding ONLY after the first fit (class added by JS), so the
     initial render is already at its final size — no "grow on load" glitch. */
  @media (prefers-reduced-motion: no-preference) {
    .site-header.hdr-ready .bar { transition: padding-block .3s var(--ease); }
    .site-header.hdr-ready .brand-script,
    .site-header.hdr-ready .brand-caps { transition: font-size .3s var(--ease); }
  }

  /* Phones: smaller brand lockup so it fits next to the CTA + hamburger
     (keeps the Simon's / GUESTHOUSE ROME width match: ratio ≈ 5.17). */
  @media (max-width: 480px) {
    .brand-script { font-size: 3.4rem; }
    .brand-caps { font-size: .66rem; }
    .site-header.is-scrolled .brand-script { font-size: 1.7rem; }
    .site-header.is-scrolled .brand-caps { font-size: .53rem; }
  }

  /* Desktop nav */
  .primary-nav {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-m);
    align-items: center;
  }

  .primary-nav a {
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--c-ink);
    padding-block: .35em;
    border-block-end: 2px solid transparent;
    transition: border-color .15s, color .15s;
  }

  .primary-nav a:hover,
  .primary-nav a[aria-current="page"] {
    color: var(--c-coral);
    border-block-end-color: var(--c-coral);
  }

  /* Actions bar */
  .actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  /* Book CTA */
  .btn-book {
    background: var(--c-coral);
    color: #fff;
    padding: .6em 1.1em;
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  .btn-book:hover {
    background: var(--c-coral-700);
  }

  /* Hamburger button — hidden by default on desktop */
  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: .5em;
    cursor: pointer;
    min-block-size: 44px;
    min-inline-size: 44px;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    order: 3; /* keep after brand, before actions */
    margin-inline-start: auto;
    transition: border-color .15s;
  }

  .nav-toggle:hover {
    border-color: var(--c-coral);
  }

  /* Three-line burger icon via box-shadow */
  .burger,
  .burger::before,
  .burger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s;
  }

  .burger {
    position: relative;
  }

  .burger::before,
  .burger::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
  }

  .burger::before { inset-block-start: -6px; }
  .burger::after  { inset-block-start:  6px; }

  /* Animated to X when open */
  [aria-expanded="true"] .burger {
    background: transparent;
  }

  [aria-expanded="true"] .burger::before {
    transform: rotate(45deg) translate(4px, 4px);
  }

  [aria-expanded="true"] .burger::after {
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* ─── Mobile layout ─────────────────────────────────────────── */
  @media (max-width: 899px) {
    .nav-toggle {
      display: inline-flex;
    }

    /* Keep the booking CTA always visible in the bar; the nav wraps below it. */
    .bar {
      flex-wrap: wrap;
    }

    /* Nav hidden by default on mobile */
    .primary-nav {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      inline-size: 100%;
      order: 10; /* below the bar row */
      max-block-size: 0;
      overflow: hidden;
      transition: max-block-size .3s var(--ease), padding .3s var(--ease);
      padding-block: 0;
      margin-inline-start: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .primary-nav {
        transition: none;
      }
    }

    .primary-nav.is-open {
      max-block-size: 400px; /* large enough for all items */
      padding-block: var(--space-s);
    }

    .primary-nav a {
      padding: .75em var(--space-m);
      border-block-end: 1px solid var(--c-line);
      font-size: var(--step-0);
      min-block-size: 44px;
      display: flex;
      align-items: center;
    }

    .primary-nav a:last-child {
      border-block-end: none;
    }

    /* CTA + hamburger grouped on the right; brand pushed to the left. Smaller CTA. */
    .brand { margin-inline-end: auto; }
    .actions { order: 4; }
    .nav-toggle { order: 5; margin-inline-start: 0; }
    .btn-book {
      padding: .42em .9em;
      font-size: .78rem;
      min-block-size: 40px;
    }
  }

  /* ─── Desktop layout ─────────────────────────────────────────── */
  @media (min-width: 900px) {
    .bar {
      column-gap: var(--space-m);
    }

    .primary-nav {
      /* Ensure nav is visible regardless of .is-open class */
      max-block-size: none !important;
      overflow: visible !important;
      padding-block: 0 !important;
    }
  }
</style>