/* ===== Header / sticky nav ===== */
function Header({ onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [pastHero, setPastHero] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    const h = () => { setScrolled(window.scrollY > 20); setPastHero(window.scrollY > 260); };
    window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h);
  }, []);
  const links = [['Services', '#services'], ['Consultants', '#consultants'], ['Rooms', '#rooms'], ['About', '#about'], ['Contact', '#contact']];
  const go = (e, href) => { e.preventDefault(); setMenu(false); document.querySelector(href)?.scrollTo; const el = document.querySelector(href); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,.88)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--hs-line-soft)' : '1px solid transparent',
      transition: 'all .3s var(--ease-soft)',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" onClick={(e) => go(e, '#top')} style={{ display: 'flex', opacity: pastHero || menu ? 1 : 0, pointerEvents: pastHero || menu ? 'auto' : 'none', transform: pastHero || menu ? 'none' : 'translateY(-6px)', transition: 'opacity .35s var(--ease-soft), transform .35s var(--ease-soft)' }}><Logo height={52} /></a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }} className="hs-desktop-nav">
          {links.map(([t, h]) => (
            <a key={h} href={h} onClick={(e) => go(e, h)} style={{
              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15,
              color: 'var(--hs-teal)', textDecoration: 'none',
            }} onMouseEnter={(e) => e.target.style.color = 'var(--hs-sky)'} onMouseLeave={(e) => e.target.style.color = 'var(--hs-teal)'}>{t}</a>
          ))}
          <Btn kind="primary" size="sm" icon="calendar-heart" onClick={onBook}>Book a session</Btn>
        </nav>
        <button className="hs-mobile-toggle" onClick={() => setMenu(!menu)} style={{ display: 'none', background: 'none', border: 0, cursor: 'pointer', color: 'var(--hs-teal)' }}>
          <Icon name={menu ? 'x' : 'menu'} size={26} />
        </button>
      </div>
      {menu && (
        <div className="hs-mobile-menu" style={{ background: '#fff', borderTop: '1px solid var(--hs-line-soft)', padding: '12px 32px 22px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {links.map(([t, h]) => (
            <a key={h} href={h} onClick={(e) => go(e, h)} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--hs-teal)', textDecoration: 'none', padding: '12px 0', borderBottom: '1px solid var(--hs-line-soft)' }}>{t}</a>
          ))}
          <Btn kind="primary" icon="calendar-heart" onClick={() => { setMenu(false); onBook(); }} style={{ marginTop: 14, justifyContent: 'center' }}>Book a session</Btn>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { Header });