// Header + drawer
function Header(){
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const nav = [
    { href: '#before-after', ja: 'BEFORE / AFTER', en: '仕上がり' },
    { href: '#menu', ja: 'MENU', en: '施術' },
    { href: '#voice', ja: 'VOICE', en: 'お客様の声' },
    { href: '#salon', ja: 'SALON', en: '店舗' },
  ];

  const onNavClick = (href) => (e) => {
    setOpen(false);
  };

  return (
    <React.Fragment>
      <header className={`site-header ${scrolled || open ? 'is-scrolled' : ''}`}>
        <div className="site-header__inner">
          <a href="#top" className="brand">LUMIeRE</a>
          <nav className="nav-pc">
            {nav.map(n => <a key={n.href} href={n.href} onClick={onNavClick(n.href)}>{n.ja}</a>)}
            <a className="cta" href="#diagnosis" onClick={() => track('reservation_click', { location: 'header' })}>RESERVE</a>
          </nav>
          <button
            className={`menu-btn ${open ? 'open' : ''}`}
            aria-label="メニュー"
            aria-expanded={open}
            onClick={() => setOpen(v => !v)}
          >
            <span/><span/><span/>
          </button>
        </div>
      </header>
      <div className={`drawer ${open ? 'open' : ''}`} role="dialog" aria-hidden={!open}>
        <ul>
          {nav.map(n => (
            <li key={n.href}>
              <a href={n.href} onClick={onNavClick(n.href)}>
                {n.ja}
                <span className="eng-small">{n.en}</span>
              </a>
            </li>
          ))}
          <li>
            <a href="#diagnosis" className="drawer-cta" onClick={() => { setOpen(false); track('diagnosis_start', { location: 'drawer' }); }}>30秒診断を始める</a>
          </li>
        </ul>
      </div>
    </React.Fragment>
  );
}

window.Header = Header;