// Hero: no placeholder PB timer — just a strong intro referencing real runs.
function Nav() {
  return (
    <nav className="nav">
      <a className="nav__brand" href="#top">
        <span className="nav__mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path d="M2 18 L22 4 L22 10 L2 22 Z" fill="currentColor" />
          </svg>
        </span>
        <span className="nav__word">mirrorsedger</span>
      </a>
      <ul className="nav__links">
        <li><a href="#runs">Runs</a></li>
        <li><a href="#connect">Connect</a></li>
      </ul>
    </nav>
  );
}

function Hero() {
  const count = window.RUN_DATA.runs.length;
  const [ref, visible] = useReveal({ threshold: 0.2 });

  return (
    <header className="hero" id="top" ref={ref}>
      <div className="hero__slash" aria-hidden="true" />
      <div className="hero__grid" aria-hidden="true" />

      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="dot" /> Mirror's Edge (2008) · speedrunning
        </div>

        <h1 className="hero__title">
          Running the<br />
          rooftops of<br />
          <span className="accent">the city.</span>
        </h1>

        <p className={`hero__lede ${visible ? "is-on" : ""}`}>
          I'm <strong>mirrorsedger</strong>. I run Mirror's Edge — individual levels,
          glitchless, the whole map. {count} runs published so far. More on the way.
        </p>

        <div className="hero__cta">
          <a className="btn btn--primary" href="#runs">See the runs ↘</a>
          <a className="btn" href="https://www.speedrun.com/users/mirrorsedger" target="_blank" rel="noreferrer">
            speedrun.com profile ↗
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Hero });