/* Maison Silya — site header with a quiet mega-menu + EN·FR toggle.
   Transparent over the dark hero; settles to a solid ivory bar with a
   hairline on scroll, on inner pages, or whenever a menu panel is open.
   Nav labels read from i18n (t) so they follow the chosen language. */
function Header({ current, onNav, overHero = false, lang = 'en' }) {
  const [scrolled, setScrolled] = React.useState(!overHero);
  const [open, setOpen] = React.useState(null);   // open mega panel id
  const [menu, setMenu] = React.useState(false);  // mobile drawer

  React.useEffect(() => {
    if (!overHero) { setScrolled(true); return; }
    setScrolled(false);
    const el = document.getElementById('ms-scroll');
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 80);
    const target = el || window;
    target.addEventListener('scroll', onScroll);
    return () => target.removeEventListener('scroll', onScroll);
  }, [overHero, current]);

  const NAV = [
    { id: 'collections', label: t('nav.collections'), children: [
      { label: t('nav.signature'), route: 'signature', desc: t('nav.signature_d') },
      { label: t('nav.bespoke'), route: 'bespoke', desc: t('nav.bespoke_d') },
      { label: t('nav.materials'), route: 'materials', desc: t('nav.materials_d') },
      { label: t('nav.tufted'), route: 'tufted', desc: t('nav.tufted_d') },
    ]},
    { id: 'maison', label: t('nav.maison'), children: [
      { label: t('nav.philosophy'), route: 'philosophy', desc: t('nav.philosophy_d') },
      { label: t('nav.craftsmanship'), route: 'craftsmanship', desc: t('nav.craftsmanship_d') },
      { label: t('nav.process'), route: 'process', desc: t('nav.process_d') },
    ]},
    { id: 'journal', label: t('nav.journal'), route: 'journal' },
    { id: 'contact', label: t('nav.contact'), route: 'contact' },
  ];
  const activeOf = { signature: 'collections', bespoke: 'collections', materials: 'collections', philosophy: 'maison', craftsmanship: 'maison', process: 'maison', journal: 'journal', contact: 'contact' };

  const solid = scrolled || !!open;
  const light = overHero && !solid;
  const ink = light ? C('ivory') : C('ink');
  const openItem = NAV.find((n) => n.id === open);

  return (
    <React.Fragment>
    <header onMouseLeave={() => setOpen(null)}
      style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: solid ? 'rgba(247,243,236,0.94)' : 'transparent',
        backdropFilter: solid ? 'saturate(120%) blur(8px)' : 'none',
        borderBottom: `1px solid ${solid ? C('line') : 'transparent'}`,
        transition: 'background 600ms var(--ms-ease), border-color 600ms var(--ms-ease)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 clamp(1.5rem, 5vw, 4rem)',
        height: 84, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>

        <button onClick={() => onNav('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          color: ink, transition: 'color 600ms var(--ms-ease)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
          <span style={{ fontFamily: C('font-sans'), fontSize: 17, letterSpacing: '0.52em', textTransform: 'uppercase', lineHeight: 1, paddingLeft: '0.52em' }}>Silya</span>
          <span style={{ fontFamily: C('font-sans'), fontSize: 9, letterSpacing: '0.46em', textTransform: 'uppercase', lineHeight: 1, opacity: 0.62, paddingLeft: '0.46em' }}>Paris</span>
        </button>

        <nav style={{ display: 'flex', gap: 38, alignItems: 'center', height: '100%' }} className="ms-nav-desktop">
          {NAV.map((n) => {
            const active = activeOf[current] === n.id;
            return (
              <button key={n.id}
                onMouseEnter={() => setOpen(n.children ? n.id : null)}
                onClick={() => { if (n.route) { onNav(n.route); setOpen(null); } }}
                onMouseOver={(e) => e.currentTarget.style.opacity = 0.6}
                onMouseOut={(e) => e.currentTarget.style.opacity = 1}
                style={{ background: 'none', border: 'none', cursor: 'pointer', height: '100%',
                  fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
                  color: ink, borderBottom: `1px solid ${active ? ink : 'transparent'}`,
                  transition: 'color 600ms var(--ms-ease), opacity 220ms var(--ms-ease)' }}>{n.label}</button>
            );
          })}
        </nav>

        <div style={{ display: 'flex', gap: 20, alignItems: 'center', color: ink, transition: 'color 600ms var(--ms-ease)' }}>
          <LangToggle lang={lang} color={ink} />
          <button style={{ ...iconBtn, display: 'none' }} className="ms-menu-btn" onClick={() => setMenu(true)}><Icon name="menu" /></button>
        </div>
      </div>

      {/* Mega panel */}
      <div style={{ overflow: 'hidden', maxHeight: open ? 280 : 0, transition: 'max-height 520ms var(--ms-ease-veil)',
        borderTop: open ? `1px solid ${C('line')}` : '1px solid transparent', background: 'rgba(247,243,236,0.98)' }}
        className="ms-nav-desktop">
        {openItem && openItem.children && (
          <div style={{ maxWidth: 1440, margin: '0 auto', padding: '48px clamp(1.5rem,5vw,4rem) 56px',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
            {openItem.children.map((c) => (
              <button key={c.route} onClick={() => { onNav(c.route); setOpen(null); }}
                onMouseOver={(e) => e.currentTarget.querySelector('h4').style.color = C('accent')}
                onMouseOut={(e) => e.currentTarget.querySelector('h4').style.color = C('ink')}
                style={{ background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer', padding: 0 }}>
                <h4 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 26, margin: 0, color: C('ink'), transition: C('transition') }}>{c.label}</h4>
                <p style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontSize: 16, color: C('ink-secondary'), margin: '8px 0 0' }}>{c.desc}</p>
              </button>
            ))}
          </div>
        )}
      </div>

    </header>
      {/* Mobile / tablet drawer — rendered as a SIBLING of <header> so the header's
         backdrop-filter (which becomes a containing block for position:fixed children
         on iOS Safari) can't trap this panel inside the 84px bar. */}
      <div style={{ position: 'fixed', inset: 0, zIndex: 60, pointerEvents: menu ? 'auto' : 'none' }}>
        <div onClick={() => setMenu(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(21,17,12,0.45)', opacity: menu ? 1 : 0, transition: 'opacity 420ms var(--ms-ease)' }} />
        <nav style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(82vw, 380px)', background: C('canvas'),
          transform: menu ? 'translate3d(0,0,0)' : 'translate3d(101%,0,0)', transition: 'transform 600ms var(--ms-ease-veil)', willChange: 'transform',
          padding: '28px clamp(1.5rem,5vw,2.5rem)', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
          <button onClick={() => setMenu(false)} style={{ ...iconBtn, color: C('ink'), alignSelf: 'flex-end' }}><Icon name="close" size={22} /></button>
          <div style={{ display: 'flex', flexDirection: 'column', marginTop: 24 }}>
            {NAV.flatMap((n) => n.children ? n.children : [n]).map((c) => (
              <button key={c.route} onClick={() => { onNav(c.route); setMenu(false); }}
                style={{ background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer', padding: '15px 0',
                  borderBottom: `1px solid ${C('line-faint')}`, fontFamily: C('font-serif'), fontWeight: 400,
                  fontSize: 24, color: C('ink') }}>{c.label}</button>
            ))}
            <div style={{ marginTop: 24 }}><LangToggle lang={lang} color={C('ink')} /></div>
          </div>
        </nav>
      </div>
    </React.Fragment>
  );
}
const iconBtn = { background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 4, display: 'flex' };

Object.assign(window, { Header });