/* Rust Truck — site header. Ink bar with the wordmark, nav, language
   toggle and Instagram link. On mobile the nav collapses behind a
   hamburger that opens a dropdown panel. */
(function () {
  const { Wordmark, LangToggle } = window.RustTruckDesignSystem_a832c6;

  function Header({ active = 'home', onNavigate, lang, onLang }) {
    const I = window.RTIcons;
    const bp = window.useViewport();
    const [open, setOpen] = React.useState(false);

    // close the mobile menu whenever we grow past the breakpoint
    React.useEffect(() => { if (!bp.mobile) setOpen(false); }, [bp.mobile]);

    const nav = [
      { id: 'home', en: 'Home', el: 'Αρχική' },
      { id: 'about', en: 'About', el: 'Σχετικά' },
      { id: 'drinks', en: 'Drinks', el: 'Ποτά' },
      { id: 'faq', en: 'FAQ', el: 'Ερωτήσεις' },
      { id: 'book', en: 'Book', el: 'Κράτηση' },
    ];
    const t = (n) => (lang === 'EL' ? n.el : n.en);
    const go = (id) => { setOpen(false); onNavigate(id); };

    const navBtn = (n, block) => (
      <button key={n.id} onClick={() => go(n.id)}
        style={{
          fontFamily: 'var(--font-label)', fontSize: 'var(--text-2xs)',
          letterSpacing: '0.14em', textTransform: 'uppercase',
          background: 'none', border: 'none', cursor: 'pointer',
          padding: block ? '14px 4px' : '8px 12px', borderRadius: 'var(--radius-sm)',
          textAlign: 'left', width: block ? '100%' : 'auto',
          color: active === n.id ? 'var(--amber-400)' : 'var(--paper-300)',
          borderBottom: block
            ? '1px solid color-mix(in srgb, var(--paper-50) 10%, transparent)'
            : (active === n.id ? '2px solid var(--amber-400)' : '2px solid transparent'),
          transition: 'color var(--dur-fast) var(--ease-out)',
        }}>
        {t(n)}
      </button>
    );

    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 20,
        background: 'var(--ink-900)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)',
        borderBottom: '1px solid color-mix(in srgb, var(--paper-50) 12%, transparent)',
      }}>
        <div style={{
          maxWidth: 'var(--container-lg)', margin: '0 auto',
          padding: bp.mobile ? '12px 20px' : '14px 32px', display: 'flex', alignItems: 'center', gap: bp.mobile ? 12 : 24,
        }}>
          <button onClick={() => go('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
            <Wordmark variant="ink" size="sm" stacked={false} />
          </button>

          {!bp.mobile && (
            <nav style={{ display: 'flex', gap: 4, marginLeft: 'auto' }}>
              {nav.map((n) => navBtn(n, false))}
            </nav>
          )}

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginLeft: bp.mobile ? 'auto' : 0 }}>
            <LangToggle value={lang} onChange={onLang} />
            {!bp.mobile && (
              <a href="https://www.instagram.com/rusttruck" target="_blank" rel="noopener noreferrer"
                aria-label="Instagram" style={{ display: 'inline-flex', color: 'var(--paper-300)' }}>
                <I.Instagram size={20} />
              </a>
            )}
            {bp.mobile && (
              <button onClick={() => setOpen((o) => !o)} aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--paper-100)' }}>
                {open ? <I.X size={24} /> : <I.Menu size={24} />}
              </button>
            )}
          </div>
        </div>

        {/* mobile dropdown panel */}
        {bp.mobile && open && (
          <div style={{
            background: 'var(--ink-900)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)',
            borderTop: '1px solid color-mix(in srgb, var(--paper-50) 10%, transparent)',
            padding: '8px 20px 20px',
          }}>
            <nav style={{ display: 'flex', flexDirection: 'column' }}>
              {nav.map((n) => navBtn(n, true))}
            </nav>
            <a href="https://www.instagram.com/rusttruck" target="_blank" rel="noopener noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginTop: 16, textDecoration: 'none',
                color: 'var(--paper-200)', fontFamily: 'var(--font-label)', fontSize: 12, letterSpacing: '0.08em' }}>
              <I.Instagram size={18} stroke="var(--amber-400)" /> @rusttruck
            </a>
          </div>
        )}
      </header>
    );
  }

  window.RTHeader = Header;
})();