/* ============================================================
   v2 timeline — scrubbable career timeline, 1995 → 2026
   ============================================================ */

const TL_MILESTONES = [
  {
    year: 1995, kicker: "Founded · Editorial",
    title: "O'Grady's PowerPage goes live.",
    body: "An independent Apple blog, published daily ever since — older than most of the sites that link to it. Thirty-plus years of editorial reps, one post at a time.",
    href: "https://www.powerpage.org/", link: "powerpage.org",
  },
  {
    year: 2004, kicker: "Peachpit · Co-author",
    title: "The Macintosh Bible, 9th Edition.",
    body: "Co-author on the canonical Mac reference — the book a generation of Apple users learned the platform from. The start of an eight-book run.",
    href: "https://www.peachpit.com/store/macintosh-bible-9780321213495", link: "peachpit.com",
  },
  {
    year: 2008, kicker: "Greenwood · Author",
    title: "Apple Inc. — a corporate history.",
    body: "A book-length history of Apple for the Corporations That Changed the World series, written as the iPhone was rewriting the company it described — all while hosting the PowerPage Podcast, 200+ episodes of independent Apple audio.",
    href: "https://amzn.to/3Mcm0ID", link: "View on Amazon",
  },
  {
    year: 2014, kicker: "Google · Technical Communicator",
    title: "Joins Google — Ads, Security & Payments.",
    body: "Twelve years and counting across Ads, Security, Payments, and Analytics — hundreds of help-center and DevSite articles, plus the Google Pay & Wallet API documentation.",
    href: "https://developers.google.com/pay/api", link: "developers.google.com/pay",
  },
  {
    year: 2017, kicker: "Google Optimize · DevEd",
    title: "A full developer-education stack.",
    body: "Developer site, help center, and a seven-video YouTube series for Google's A/B-testing platform — scripted, produced, and shipped as one coherent curriculum.",
    href: "https://www.youtube.com/playlist?list=PLI5YfMzCfRtbgHPUPVBhIMzHbdJNvq8kN", link: "Video series",
  },
  {
    year: 2024, kicker: "Google · API reference",
    title: "Merchant API reference & guides.",
    body: "REST reference and how-to guides for the next generation of Google's merchant data platform — the unglamorous, high-traffic docs developers actually live in.",
    href: "https://developers.google.com/merchant/api", link: "developers.google.com/merchant",
  },
  {
    year: 2025, kicker: "★ AP2 · Launch — Sept 16",
    title: "Agent Payments Protocol ships.",
    body: "The announcement blog, protocol website, and GitHub repo for Google's open standard for agent-led commerce — launched to a 60+ partner ecosystem with my words on every surface.",
    href: "https://ap2-protocol.org/", link: "ap2-protocol.org",
  },
  {
    year: 2026, kicker: "Now · Open to",
    title: "Content production & editorial.",
    body: "Open to senior content-production and editorial roles at companies building serious AI systems — finding the stories worth telling and producing them end-to-end, in whatever medium fits, on real deadlines.",
    href: "/contact", link: "Start a conversation",
  },
];

function TimelineV2() {
  const Y0 = 1994, Y1 = 2027;
  const [idx, setIdx] = React.useState(6); // default: AP2
  const trackRef = React.useRef(null);
  const pos = (y) => ((y - Y0) / (Y1 - Y0)) * 100;

  const pick = (clientX) => {
    const r = trackRef.current.getBoundingClientRect();
    const f = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
    const yr = Y0 + f * (Y1 - Y0);
    let best = 0, bd = Infinity;
    TL_MILESTONES.forEach((m, i) => {
      const d = Math.abs(m.year - yr);
      if (d < bd) { bd = d; best = i; }
    });
    setIdx(best);
  };

  const onPointerDown = (e) => {
    e.preventDefault();
    pick(e.clientX);
    const mv = (ev) => pick(ev.clientX);
    const up = () => {
      window.removeEventListener("pointermove", mv);
      window.removeEventListener("pointerup", up);
    };
    window.addEventListener("pointermove", mv);
    window.addEventListener("pointerup", up);
  };

  const onKey = (e) => {
    if (e.key === "ArrowLeft") { setIdx((i) => Math.max(0, i - 1)); e.preventDefault(); }
    if (e.key === "ArrowRight") { setIdx((i) => Math.min(TL_MILESTONES.length - 1, i + 1)); e.preventDefault(); }
  };

  const m = TL_MILESTONES[idx];
  const years = [];
  for (let y = 1995; y <= 2026; y++) years.push(y);

  return (
    <section id="timeline" className="sec wrap tl" data-screen-label="02 Timeline">
      <div className="sec-head" data-rev="">
        <span className="sec-num">02</span>
        <h2>Three decades, scrubbable</h2>
        <span className="sub">drag the track · ← → keys work too</span>
      </div>

      <div className="tl-stage" data-rev="">
        <div className="tl-year" aria-live="polite">
          {String(m.year).slice(0, 2)}<span className="tick">{String(m.year).slice(2)}</span>
        </div>
        <div className="tl-card" key={idx}>
          <div className="tl-kicker">{m.kicker}</div>
          <h3>{m.title}</h3>
          <p>{m.body}</p>
          <a className="tl-link" href={m.href} data-track={`tl-${m.year}`}>{m.link} →</a>
        </div>
      </div>

      <div
        className="tl-track-zone"
        data-rev=""
        onPointerDown={onPointerDown}
        onKeyDown={onKey}
        tabIndex={0}
        role="slider"
        aria-label="Career timeline"
        aria-valuemin={TL_MILESTONES[0].year}
        aria-valuemax={TL_MILESTONES[TL_MILESTONES.length - 1].year}
        aria-valuenow={m.year}
        aria-valuetext={`${m.year} — ${m.title}`}
      >
        <div className="tl-track" ref={trackRef}>
          <div className="tl-rail"></div>
          <div className="tl-rail-fill" style={{ width: `${pos(m.year)}%` }}></div>
          {years.map((y) => (
            <div key={y} className="tl-tick" style={{ left: `${pos(y)}%` }}></div>
          ))}
          {TL_MILESTONES.map((ms, i) => (
            <React.Fragment key={ms.year}>
              <div
                className={`tl-node${i === idx ? " on" : ""}`}
                style={{ left: `${pos(ms.year)}%` }}
                onClick={() => setIdx(i)}
                title={`${ms.year} — ${ms.title}`}
              ></div>
              <div className="tl-node-yr" style={{ left: `${pos(ms.year)}%`, color: i === idx ? "var(--acc)" : undefined }}>
                {ms.year}
              </div>
            </React.Fragment>
          ))}
          <div className="tl-scrub" style={{ left: `${pos(m.year)}%` }}></div>
        </div>
      </div>

      <div className="tl-nav" data-rev="">
        <button onClick={() => setIdx((i) => Math.max(0, i - 1))} aria-label="Previous milestone">←</button>
        <button onClick={() => setIdx((i) => Math.min(TL_MILESTONES.length - 1, i + 1))} aria-label="Next milestone">→</button>
        <span className="tl-hint">{String(idx + 1).padStart(2, "0")} / {String(TL_MILESTONES.length).padStart(2, "0")}</span>
      </div>
    </section>
  );
}

window.TimelineV2 = TimelineV2;