// Shared SiteHeader — routes to separate pages
function SiteHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const parts = location.pathname.split('/').filter(Boolean);
  const pageFromConfig = window.ALLIN_MUSIC_CONFIG && window.ALLIN_MUSIC_CONFIG.page;
  const here = (pageFromConfig || parts.pop() || 'index').toLowerCase();

  const navs = [
    { href:'voice.html', label:'ボイトレ', match:['voice.html', 'voice'] },
    { href:'guitar.html', label:'弾き語り', match:['guitar.html', 'guitar'] },
    { href:'dtm.html', label:'DTM', match:['dtm.html', 'dtm'] },
    { href:'flow.html', label:'流れ', match:['flow.html', 'flow'] },
    { href:'pricing.html', label:'料金', match:['pricing.html', 'pricing'] },
    { href:'teachers.html', label:'講師', match:['teachers.html', 'teachers'] },
    { href:'voices.html', label:'生徒の声', match:['voices.html', 'voices'] },
    { href:'faq.html', label:'FAQ', match:['faq.html', 'faq'] },
    { href:'column.html', label:'コラム', match:['column.html', 'column'] },
  ];
  const routeTo = (href) => {
    const routes = (window.ALLIN_MUSIC_CONFIG && window.ALLIN_MUSIC_CONFIG.routes) || {};
    return routes[href] || href;
  };

  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:100,
      display:'flex', alignItems:'center', gap:24,
      padding: scrolled ? '14px 32px' : '20px 32px',
      background: scrolled ? 'rgba(5,8,17,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition: 'all .25s ease',
    }}>
      <a href={routeTo('index.html')} style={{ display:'flex', alignItems:'center', gap:10, fontFamily:'var(--ff-display)', fontSize:18, letterSpacing:0.5 }}>
        <span style={{ width:4, height:22, background:'var(--accent)', boxShadow:'0 0 10px var(--accent)' }} />
        <span>All in Music</span>
      </a>
      <span className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--ink-3)' }}>EST. 2010 / TOKYO</span>

      <nav className="aim-desktop-nav" style={{ display:'flex', gap:18, flex:1, justifyContent:'center' }}>
        {navs.map(n => {
          const active = n.match.includes(here);
          return (
            <a key={n.href} href={routeTo(n.href)}
               style={{
                 fontSize:13, fontWeight:700,
                 color: active ? 'var(--accent-2)' : 'var(--ink-2)',
                 borderBottom: active ? '1px solid var(--accent-2)' : '1px solid transparent',
                 paddingBottom:3,
                 transition:'color .15s',
               }}
               onMouseEnter={e => { if (!active) e.currentTarget.style.color='var(--accent-2)'; }}
               onMouseLeave={e => { if (!active) e.currentTarget.style.color='var(--ink-2)'; }}>
              {n.label}
            </a>
          );
        })}
      </nav>

      <a href={routeTo('trial.html')} className="btn aim-header-cta" style={{
        padding:'11px 16px',
        background:'rgba(232,237,247,0.06)',
        border:'1px solid var(--rule-strong)',
        fontSize:13, backdropFilter:'blur(10px)',
        color:'var(--ink)',
      }}>
        <span style={{
          width:7, height:7, borderRadius:'50%',
          background:'var(--accent)', boxShadow:'0 0 8px var(--accent)',
          animation:'pulseC 1.4s infinite',
        }} />
        体験レッスン ¥0
      </a>
      <button
        type="button"
        className="aim-menu-button"
        aria-expanded={open}
        aria-label="メニューを開閉"
        onClick={() => setOpen(!open)}
      >
        <span />
        <span />
        <span />
      </button>
      <nav className="aim-mobile-nav" hidden={!open}>
        {navs.map(n => (
          <a key={n.href} href={routeTo(n.href)} onClick={() => setOpen(false)}>
            {n.label}
          </a>
        ))}
        <a href={routeTo('trial.html')} onClick={() => setOpen(false)}>体験レッスン ¥0</a>
      </nav>
    </header>
  );
}

window.SiteHeader = SiteHeader;