// header.jsx
const { useState, useEffect } = React;

const NAV_ITEMS = [
  ['#philosophy', '00', '理念'],
  ['#themes', '01', 'サービス'],
  ['#approach', '02', '進め方'],
  ['#note', '03', 'コラム'],
  ['#company', '04', '会社情報'],
];

function Header({ onContactClick }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // メニュー展開中は背面スクロールを固定
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  return (
    <header className={`site-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="inner">
        <a href="#top" className="brand" onClick={() => setMenuOpen(false)}>
          <img className="brand-logo" src="assets/skyidea-logo-light.svg" alt="SKYIDEA 合同会社スカイイデア" />
        </a>
        <nav className="nav">
          {NAV_ITEMS.map(([href, n, label]) => (
            <a key={href} href={href}><small>{n}</small>{label}</a>
          ))}
        </nav>
        <div className="header-actions">
          {window.CONTACT_ENABLED && (
            <button className="btn btn-primary header-contact" onClick={onContactClick}>
              お問い合わせ
              <span className="arrow">→</span>
            </button>
          )}
          <button
            className={`nav-toggle ${menuOpen ? 'is-open' : ''}`}
            aria-label={menuOpen ? 'メニューを閉じる' : 'メニューを開く'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      <div className={`mobile-menu ${menuOpen ? 'is-open' : ''}`}>
        <nav className="mobile-nav">
          {NAV_ITEMS.map(([href, n, label]) => (
            <a key={href} href={href} onClick={() => setMenuOpen(false)}>
              <small>{n}</small>
              <span>{label}</span>
            </a>
          ))}
        </nav>
        {window.CONTACT_ENABLED && (
          <button
            className="btn btn-primary mobile-menu-cta"
            onClick={() => { setMenuOpen(false); onContactClick(); }}
          >
            お問い合わせ
            <span className="arrow">→</span>
          </button>
        )}
      </div>
      <div
        className={`mobile-menu-scrim ${menuOpen ? 'is-open' : ''}`}
        onClick={() => setMenuOpen(false)}
        aria-hidden="true"
      ></div>
    </header>
  );
}

window.Header = Header;