const Header = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <>
      <header className="header">
        <div className="header-inner">
          <div className="logo-block">
            <div className="logo-tag">小・中・高生対象　総合進学塾・個別指導塾</div>
            <img className="logo-img" src="assets/sg_logo_brand.png?v=2" alt="SG 正学館 SEIGAKU" />
          </div>
          <nav className="nav-main">
            <a href="#about"><span>正学館の想い</span></a>
            <a href="#work"><span>SG正学館の仕事</span></a>
            <a href="#interview"><span>社員インタビュー</span></a>
            <a href="#recruit"><span>募集要項</span></a>
            <a href="#schools"><span>校舎一覧</span></a>
          </nav>
          <a href="#entry" className="nav-entry-cta">
            <span>エントリー</span>
            <span className="nav-entry-arrow">→</span>
          </a>
          <button className="menu-btn" onClick={() => setMenuOpen(!menuOpen)}>
            <div className="burger"><span/></div>
            <span className="menu-label">メニュー</span>
          </button>
        </div>
      </header>
      {menuOpen && (
        <div className="menu-overlay">
          <div>
            <div className="menu-overlay-eyebrow">— MENU</div>
            {[
              {label:'正学館の想い', href:'#about'},
              {label:'SG正学館の仕事', href:'#work'},
              {label:'社員インタビュー', href:'#interview'},
              {label:'募集要項', href:'#recruit'},
              {label:'校舎一覧', href:'#schools'},
              {label:'よくある質問', href:'#contact'},
              {label:'エントリー', href:'#entry'},
            ].map((m,i)=>(
              <a key={i} href={m.href} onClick={()=>setMenuOpen(false)} className="menu-overlay-link">{m.label} <span>→</span></a>
            ))}
          </div>
          <div className="menu-overlay-contact">
            <div className="menu-overlay-eyebrow">— CONTACT</div>
            <div className="menu-overlay-tel">0120-879-869</div>
            <div className="menu-overlay-hours">受付時間：平日 10:00 〜 20:00</div>
          </div>
        </div>
      )}
      {/* Floating mobile-friendly CTA - always visible after scroll */}
      <a href="#entry" className="floating-entry-cta" aria-label="エントリーする">
        <span>エントリー</span>
        <span className="floating-entry-arrow">→</span>
      </a>
    </>
  );
};
window.Header = Header;