/* ============================================================
   INTRO — name "written out" then zoom-through into the site
   Paper-on-paper so the page emerges from inside the name.
   Driven by `stage` from App: "intro" -> "zoom" -> (unmounted)
   ============================================================ */
function Intro({ zooming, onSkip }) {
  // split a string into per-letter masked spans, with stagger delays
  const letters = (text, base, opts = {}) =>
    text.split("").map((ch, i) => (
      <span className="il" key={i}>
        <span
          className={"il-g" + (opts.serif ? " serif" : "")}
          style={{ animationDelay: base + i * 0.045 + "s" }}
        >
          {ch === " " ? "\u00A0" : ch}
        </span>
      </span>
    ));

  return (
    <div
      className={"intro" + (zooming ? " intro-zoom" : "")}
      onClick={onSkip}
      role="presentation"
    >
      {/* corner chrome, echoes the site header */}
      <div className="intro-chrome intro-tl mono">DJ — 2026</div>
      <div className="intro-chrome intro-tr mono">London, UK</div>

      <div className="intro-center">
        <h1 className="intro-name">
          <span className="intro-word">{letters("Dylan", 0.15)}</span>
          <span className="intro-word">{letters("Jeppesen", 0.34, { serif: true })}</span>
        </h1>
        <div className="intro-rule"></div>
        <div className="intro-cap mono">Security · Research · Architecture</div>
      </div>
    </div>
  );
}

window.Intro = Intro;