/* ============================================================
   Hero variants — Dispatch / Console / Manual
   Each is a React component, all sized for the same content.
   Headshot uses <image-slot> so the user can drag their photo on.
   ============================================================ */

// -------------------- DISPATCH (magazine) --------------------
function HeroDispatch() {
  return (
    <section className="hero hero-dispatch" data-screen-label="01 Hero · Dispatch">
      <div className="ornament fade-up">
        <span>Vol. XXX</span>
        <span className="ornament-glyph">·</span>
        <span>No. 01</span>
        <span className="ornament-rule draw-rule"></span>
        <span>Bay Area · MMXXVI</span>
      </div>

      <div className="portrait-row">
        <h1 className="word-reveal">
          <span className="w">Jason</span>{" "}
          <span className="w">O'Grady,</span>{" "}<br/>
          <span className="w ital">technical</span>{" "}
          <span className="w ital">communicator.</span>
        </h1>
        <image-slot
          id="headshot-dispatch"
          shape="rect"
          placeholder="Drop headshot"
        ></image-slot>
      </div>

      <p className="deck fade-up d3">
        A Bay Area writer documenting AI systems, developer tooling, APIs,
        and the complex technical infrastructure underneath them.
      </p>

      <div className="lede fade-up d4">
        <div className="by">
          <span>By</span>
          <strong>Jason O'Grady</strong>
          <span>Sr. Technical Writer</span>
          <span>at Expert Support (Google)</span>
        </div>
        <div className="body">
          Fifteen years inside Google documenting Ads, Security, and Payments —
          most recently shipping the blog post, protocol website, and GitHub
          repository for <em>Agent Payments Protocol (AP2)</em>, Google's
          open standard for agent-led commerce. Eight published books, an
          Apple blog called <em>PowerPage</em> that has shipped daily since
          1995, and a working theory that good documentation is the
          difference between a developer platform and a science project.
        </div>
      </div>
    </section>
  );
}

// -------------------- CONSOLE (terminal) --------------------
const ASCII_NAME = `   ____   _____ ____      _    ______   __  ___    ___
  / __ \\ / ____|  _ \\    / \\  |  _ \\ \\ / / / _ \\  |_ _|
 | |  | | |  __| |_) |  / _ \\ | | | \\ V / | |_| |  | |
 | |  | | | |_ |  _ <  / ___ \\| |_| || |  |  _  | _| |_
  \\____/ \\_____|_| \\_\\/_/   \\_\\____/ |_|  |_| |_| _____|`;

function useTyped(steps, startDelay = 200) {
  const [out, setOut] = React.useState([]);
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    let cancelled = false;
    let i = 0; // step index
    let j = 0; // char within step
    let timer = null;
    const tick = () => {
      if (cancelled) return;
      if (i >= steps.length) { setDone(true); return; }
      const s = steps[i];
      if (s.kind === 'pause') {
        timer = setTimeout(() => { i++; tick(); }, s.ms || 250);
        return;
      }
      if (j === 0) {
        setOut((prev) => [...prev, { kind: s.kind, text: '' }]);
      }
      if (j < s.text.length) {
        setOut((prev) => {
          const copy = prev.slice();
          copy[copy.length - 1] = { kind: s.kind, text: s.text.slice(0, j + 1) };
          return copy;
        });
        j++;
        const speed = s.kind === 'output' ? 6 : 22;
        timer = setTimeout(tick, speed + Math.random() * 8);
      } else {
        i++; j = 0;
        timer = setTimeout(tick, s.after || 120);
      }
    };
    timer = setTimeout(tick, startDelay);
    return () => { cancelled = true; clearTimeout(timer); };
    // eslint-disable-next-line
  }, []);
  return { out, done };
}

function HeroConsole() {
  const steps = React.useMemo(() => ([
    { kind: 'prompt', text: '$ whoami', after: 280 },
    { kind: 'output', text: 'jason o\'grady  ·  sr. technical writer  ·  bay area, ca', after: 280 },
    { kind: 'prompt', text: '$ cat ./about.md', after: 240 },
    { kind: 'output', text: 'technical communicator for ai systems, developer tooling,\napis, and complex technical infrastructure.', after: 320 },
    { kind: 'prompt', text: '$ ls -la ./shipped/', after: 220 },
    { kind: 'output', text: '2025-09   ap2  — agent payments protocol  (blog · site · repo)\n2010-25   google docs — ads · security · payments · merchant api · wallet api\n2008-11   8 books — peachpit · greenwood · pearson\n1995-→    powerpage.org — apple blog, daily since 1995', after: 360 },
    { kind: 'prompt', text: '$ grep -i "open to" ./status.md', after: 220 },
    { kind: 'output', text: 'open to:  editorial leadership · developer education · ai docs', after: 280 },
    { kind: 'prompt', text: '$ ready_', after: 200 },
  ]), []);
  const { out, done } = useTyped(steps);

  return (
    <section className="hero hero-console" data-screen-label="01 Hero · Console">
      <div className="terminal">
        <div className="term-bar">
          <div className="dots"><span className="dot"></span><span className="dot"></span><span className="dot"></span></div>
          <span>— ogrady.ai · zsh · 80×24 —</span>
        </div>
        <div className="term-body">
          <div className="ascii-name" aria-hidden="true">{ASCII_NAME}</div>
          {out.map((line, i) => (
            <div className="term-line" key={i}>
              {line.kind === 'prompt'
                ? <span className="prompt">{line.text}</span>
                : <span className="output">{line.text}</span>}
              {i === out.length - 1 && !done && <span className="cursor"></span>}
            </div>
          ))}
          {done && (
            <>
              <div className="term-line"><span className="prompt">$ </span><span className="cursor"></span></div>
              <div style={{ marginTop: 20, display: 'flex', gap: 24, alignItems: 'flex-start' }}>
                <image-slot
                  id="headshot-console"
                  shape="rect"
                  placeholder="drop ./headshot.jpg"
                ></image-slot>
                <div className="comment" style={{ fontSize: 12, lineHeight: 1.6, maxWidth: 320 }}>
                  {"// scroll for shipped work, writing, and a way to reach me."}
                  <br/>{"// or just run: ↓"}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

// -------------------- MANUAL (docs portal) --------------------
function HeroManual() {
  return (
    <section className="hero hero-manual" data-screen-label="01 Hero · Manual">
      <aside className="toc fade-up">
        <div className="toc-label">On this page</div>
        <ol>
          <li data-n="0.1" className="active">Profile</li>
          <li data-n="0.2">Now</li>
          <li data-n="0.3">Selected work</li>
          <li data-n="0.4">Writing &amp; talks</li>
          <li data-n="0.5">Contact</li>
        </ol>
      </aside>

      <div className="body">
        <div className="crumb fade-up">
          <span>ogrady.ai</span><span className="slash">/</span>
          <span>profile</span><span className="slash">/</span>
          <span style={{ color: 'var(--ink)' }}>v26</span>
        </div>

        <h1 className="word-reveal">
          <span className="w">Jason</span>{" "}
          <span className="w">O'Grady,</span>{" "}
          <span className="w"><em>writing</em></span>{" "}
          <span className="w"><em>for engineers.</em></span>
        </h1>

        <p className="deck fade-up d3">
          Bay Area technical communicator. I document AI systems, developer
          tooling, APIs, and the complex infrastructure underneath them — the
          kind of writing that turns a platform into something a developer
          can actually use.
        </p>

        <div className="status-row fade-up d4">
          <span className="pill"><span className="dot"></span>Open to editorial &amp; DevEd leadership</span>
          <span className="pill neutral">Last updated · May 2026</span>
        </div>

        <dl className="meta-grid fade-up d5">
          <div><dt>Role</dt><dd>Sr. Technical Writer</dd></div>
          <div><dt>Where</dt><dd>Expert Support · Google</dd></div>
          <div><dt>Tenure</dt><dd>15+ years writing docs at Google</dd></div>
          <div><dt>Authored</dt><dd>8 books (Peachpit · Pearson)</dd></div>
          <div><dt>Publishing</dt><dd>PowerPage · daily since 1995</dd></div>
          <div><dt>Latest</dt><dd>AP2 — Sept 2025</dd></div>
        </dl>
      </div>

      <aside className="sidecol fade-up d2">
        <image-slot
          id="headshot-manual"
          shape="rect"
          placeholder="Drop headshot"
        ></image-slot>
        <div className="caption">
          Jason at home — Bay Area, CA. <br/>
          (Drag a photo onto the slot to replace.)
        </div>
      </aside>
    </section>
  );
}

window.HeroDispatch = HeroDispatch;
window.HeroConsole = HeroConsole;
window.HeroManual = HeroManual;