function StickyNav() {
  const links = [
    { id: 'video', label: 'Video' },
    { id: 'auftritte', label: 'Auftritte' },
    { id: 'themen', label: 'Themen' },
    { id: 'pressefotos', label: 'Fotos' },
    { id: 'kontakt', label: 'Kontakt' },
  ];
  const [visible, setVisible] = React.useState(false);
  const [active, setActive] = React.useState('');

  React.useEffect(() => {
    const hero = document.querySelector('.press-hero');
    const onScroll = () => {
      const threshold = hero ? hero.offsetHeight - 80 : 360;
      setVisible(window.scrollY > threshold);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);

    const sections = links
      .map((l) => document.getElementById(l.id))
      .filter(Boolean);
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: '-45% 0px -50% 0px', threshold: 0 }
    );
    sections.forEach((s) => obs.observe(s));

    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      obs.disconnect();
    };
  }, []);

  // <base href="/presse/"> würde reine #-Links zu /presse/#id auflösen (≠ aktuelle
  // URL /presse) → Full Reload. Klick abfangen und sanft scrollen statt navigieren.
  const jump = (id) => (e) => {
    e.preventDefault();
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      history.replaceState(null, '', window.location.pathname);
      return;
    }
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top, behavior: 'smooth' });
      history.replaceState(null, '', '#' + id);
    }
  };

  return (
    <div className={'sticky-nav' + (visible ? ' is-visible' : '')}>
      <div className="sticky-nav-inner">
        <a className="sticky-nav-brand" href="#top" onClick={jump('top')}>
          Philipp Raasch <span>· Presse</span>
        </a>
        <ul className="sticky-nav-links">
          {links.map((l) => (
            <li key={l.id}>
              <a
                className={active === l.id ? 'is-active' : ''}
                href={'#' + l.id}
                onClick={jump(l.id)}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a className="sticky-nav-cta" href="mailto:team@autopreneur.de">
          Anfrage
        </a>
      </div>
    </div>
  );
}
window.StickyNav = StickyNav;