// Site header — fixed, transparent at top, frosted on scroll.
// Items can mix LP-internal anchors and external pages. Use absolute paths
// for external pages so they work from sub-pages (/concept/, /research/).
function SiteHeader({ base = '' }) {
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // base: '' from LP (pure anchor), '../' from sub-pages (index.html#anchor)
  const lp = (anchor) => base ? `${base}index.html${anchor}` : anchor;
  const items = [
    [lp('#about'),    'About'],
    [`${base}concept/`, 'Concept'],
    [lp('#fields'),   'Fields'],
    [`${base}research/`, 'Research'],
    [lp('#profile'),  'Profile'],
    [lp('#works'),    'Works'],
    [lp('#contact'),  'Contact'],
  ];

  return (
    <header className={'site-hd' + (stuck ? ' stuck' : '')}>
      <a href={`${base}index.html`} className="logo hot" aria-label="CONEN home">
        <img src={`${base}assets/conen_logo.svg`} alt="CONEN" style={{ height: 18, width: 'auto', display: 'block' }} />
      </a>
      <nav>
        {items.map(([href, label]) => (
          <a key={href} href={href} className="hot">{label}</a>
        ))}
        <span className="lang">JA / EN</span>
      </nav>
    </header>
  );
}
window.SiteHeader = SiteHeader;