/* global React */

function Wordmark() {
  return (
    <a href="#" className="wordmark" aria-label="Synapse SDK home">
      <span className="mark" aria-hidden="true"></span>
      <span>Synapse</span>
      <span className="tag">sdk</span>
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <Wordmark />
        <nav className="nav-links" aria-label="Primary">
          <a href="#capabilities">Capabilities</a>
          <a href="#benchmarks">Benchmarks</a>
          <a href="#healthcare" className="hide-mobile">Healthcare</a>
          <a href="#pricing" className="hide-mobile">Pricing</a>
          <a href="/docs/" className="hide-mobile">Docs</a>
          <a href="#" className="nav-cta" title="Private beta, June 2026">
            Get API key <span className="arrow">→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}

function AnnounceBar() {
  return (
    <div className="announce">
      <div className="wrap announce-inner">
        <span className="dot" aria-hidden="true"></span>
        <span>Private beta · June 2026</span>
        <span className="sep">·</span>
        <span>7 providers benchmarked across 2 capabilities</span>
        <span className="sep">·</span>
        <a href="#benchmarks">Read the methodology →</a>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Wordmark, AnnounceBar });