// Shared bits + Nav rail
function SectionHead({ num, title, sub }) {
  return (
    <header className="sec-head">
      <div className="sec-head-l">
        <div className="sec-head-num">{num}</div>
        <div className="sec-head-rule" />
      </div>
      <div className="sec-head-r">
        <h2 className="sec-head-title">{title}</h2>
        <div className="sec-head-sub dim">{sub}</div>
      </div>
    </header>
  );
}

function NavRail({ t }) {
  const items = [
    ['index', '01', 'INDEX'],
    ['releases', '02', 'RELEASES'],
    ['live', '03', 'LIVE RECORDINGS'],
    ['radio', '04', 'RHYTHMIC OSCILLATIONS'],
    ['dj-mixes', '05', 'DJ MIXES'],
    ['about', '06', 'ABOUT'],
    ['contact', '07', 'CONTACT'],
    ['listen', '08', 'LISTEN'],
  ];
  const [active, setActive] = React.useState('index');
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) setActive(e.target.id);
        }
      },
      { rootMargin: '-40% 0px -55% 0px', threshold: 0 }
    );
    items.forEach(([id]) => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <nav className="nav-top">
        <a href="#index" className="nav-mark">HTXEDIFICE</a>
      </nav>
      <aside className="nav-rail">
        <ol>
          {items.map(([id, num, label]) => (
            <li key={id} data-active={active === id}>
              <a href={`#${id}`}>
                <span className="nav-num num">{num}</span>
                <span className="nav-label">{label}</span>
                <span className="nav-tick" />
              </a>
            </li>
          ))}
        </ol>
        <div className="nav-foot dim">
          <div>96kHz / 24-bit</div>
          <div>HOU · {new Date().getFullYear()}</div>
        </div>
      </aside>
    </>
  );
}

window.SectionHead = SectionHead;
window.NavRail = NavRail;