/* ============================================================
   v2 sections — stats, selected work (AP2 featured), writing, contact
   ============================================================ */

function StatsV2() {
  const stats = [
    { n: "10", suf: "+", label: "Years at Google" },
    { n: "8", suf: "", label: "Published books" },
    { n: "200", suf: "+", label: "Podcast episodes produced" },
    { n: "60", suf: "+", label: "Partners at AP2 launch" },
    { n: "450", suf: "+", label: "Help-center & DevSite articles" },
    { n: "30", suf: "+", label: "Years of PowerPage, daily" },
  ];
  return (
    <section className="stats" data-screen-label="01b Stats">
      <dl className="stats-grid wrap" style={{ margin: 0, padding: 0 }}>
        {stats.map((s, i) => (
          <div className="stat" data-rev="" key={i}>
            <dd>{s.n}<em>{s.suf}</em></dd>
            <dt>{s.label}</dt>
          </div>
        ))}
      </dl>
    </section>
  );
}

function WorkV2() {
  const rows = [
    {
      yr: "2004 — 2011", ti: "Eight published books", role: "Author · Peachpit, Pearson, Greenwood — Mac, Apple Inc., Garmin, Droid, Nexus",
      kind: "Long-form", href: "/portfolio#books", track: "work-books",
    },
    {
      yr: "2017 — 2023", ti: "Google Optimize", role: "Scripted & produced a 7-video education series + developer site & help center",
      kind: "Video · DevEd", href: "/portfolio#developer-docs", track: "work-optimize",
    },
    {
      yr: "c. 2008", ti: "The PowerPage Podcast", role: "Host & producer · 200+ episodes, plus product videos on YouTube",
      kind: "Audio · Video", href: "https://www.powerpage.org/powerpage-podcast-episode-109/", track: "work-podcast",
    },
    {
      yr: "1995 — now", ti: "O'Grady's PowerPage", role: "Founder & editor · daily Apple coverage since 1995",
      kind: "Editorial", href: "https://www.powerpage.org/", track: "work-powerpage",
    },
    {
      yr: "2014 — 2026", ti: "Google Pay & Wallet API", role: "Technical Communicator · 12-year platform lead",
      kind: "Developer docs", href: "https://developers.google.com/pay/api", track: "work-googlepay",
    },
    {
      yr: "2024 — 2026", ti: "Google Merchant API", role: "REST reference + how-to guides",
      kind: "API reference", href: "https://developers.google.com/merchant/api", track: "work-merchant",
    },
  ];
  return (
    <section id="work" className="sec wrap" data-screen-label="03 Selected work">
      <div className="sec-head" data-rev="">
        <span className="sec-num">01</span>
        <h2>Selected work</h2>
        <span className="sub">featured · AP2 — Sept 2025</span>
      </div>

      <div className="feat" data-rev="">
        <div>
          <div className="feat-tag">★ Featured · Launched Sept 16, 2025</div>
          <h3>Agent Payments Protocol — Google's open standard for agent-led commerce.</h3>
          <div className="feat-body">
            <p>
              When Google announced AP2, the announcement blog post, the protocol
              website at <em>ap2-protocol.org</em>, and the GitHub repository all
              shipped with my words on them. The brief: explain a brand-new
              cryptographic-payment standard so clearly that any developer could
              implement it on day one.
            </p>
            <p>
              Spec prose, code-comment voice, README architecture, and the
              on-stage narrative — one story, produced end-to-end across every
              surface it needed, on a launch deadline.
            </p>
            <p>
              AP2 is infrastructure for the agentic era — the trust and
              payment rails that let AI agents transact on a human's behalf.
              Making frontier AI legible enough to build on is exactly the
              work I want to be doing.
            </p>
          </div>
          <div className="feat-links">
            <a href="https://cloud.google.com/blog/products/ai-machine-learning/announcing-agents-to-payments-ap2-protocol" data-track="ap2-blog">Announcement post</a>
            <a href="https://ap2-protocol.org/" data-track="ap2-site">Protocol site</a>
            <a href="https://github.com/google-agentic-commerce/AP2" data-track="ap2-repo">GitHub repo</a>
          </div>
          <dl className="feat-meta">
            <dt>Client</dt><dd>Google · Agentic Commerce</dd>
            <dt>Role</dt><dd>Content lead — launch blog, spec site, repo</dd>
            <dt>Surfaces</dt><dd>Press release · developer docs · README · sample code</dd>
          </dl>
        </div>
        <figure className="feat-fig">
          <img src="assets/ap2-hero.jpg" alt="Announcing Agent Payments Protocol (AP2) — Google Cloud" />
          <figcaption><span className="fig">FIG.01</span>Launch announcement · Google Cloud · Sept 2025 — coordinated across a 60+ partner ecosystem.</figcaption>
        </figure>
      </div>

      <div className="work-rows" data-rev="">
        {rows.map((r, i) => (
          <a className="work-row spot" key={i} href={r.href} data-track={r.track}>
            <span className="work-yr">{r.yr}</span>
            <span className="work-ti">{r.ti}<span className="role">{r.role}</span></span>
            <span className="work-kind">{r.kind}</span>
            <span className="work-arr">→</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function WritingV2() {
  const items = [
    {
      kicker: ["Google Cloud Blog", "2025"],
      title: "Announcing Agent Payments Protocol",
      dek: "The launch post for AP2 — explaining cryptographic trust flows for agent-led commerce in plain English.",
      href: "https://cloud.google.com/blog/products/ai-machine-learning/announcing-agents-to-payments-ap2-protocol",
      track: "writing-ap2-blog",
    },
    {
      kicker: ["ap2-protocol.org", "2025"],
      title: "AP2 Protocol Specification",
      dek: "The full reference site — architecture, trust model, sample integrations, and the open governance plan.",
      href: "https://ap2-protocol.org/",
      track: "writing-ap2-spec",
    },
    {
      kicker: ["PowerPage Podcast", "c. 2008"],
      title: "The PowerPage Podcast — 200+ episodes",
      dek: "Apple news and analysis from podcasting's first decade — found, recorded, edited, and shipped by one producer, two hundred-plus times.",
      href: "https://www.powerpage.org/powerpage-podcast-episode-109/",
      track: "writing-podcast",
    },
    {
      kicker: ["PowerPage.org", "1995 — now"],
      title: "Thirty years of daily Apple coverage",
      dek: "An independent Apple blog published continuously since 1995. Older than most of the sites that link to it.",
      href: "https://www.powerpage.org/",
      track: "writing-powerpage",
    },
    {
      kicker: ["YouTube", "Series"],
      title: "Working with Google Optimize",
      dek: "A complete video series on A/B testing, multivariate tests, and personalization — scripted and produced as developer education.",
      href: "https://www.youtube.com/playlist?list=PLI5YfMzCfRtbgHPUPVBhIMzHbdJNvq8kN",
      track: "writing-optimize-yt",
    },
    {
      kicker: ["Peachpit", "2004"],
      title: "The Macintosh Bible, 9th Edition",
      dek: "Co-author on the canonical Mac reference — the book a generation of Apple users learned the platform from.",
      href: "https://www.peachpit.com/store/macintosh-bible-9780321213495",
      track: "writing-mac-bible",
    },
  ];
  return (
    <section id="writing" className="sec wrap" data-screen-label="04 Writing">
      <div className="sec-head" data-rev="">
        <span className="sec-num">03</span>
        <h2>Writing &amp; talks</h2>
        <span className="sub">selected pieces · 1995 — 2026</span>
      </div>
      <div className="writing-grid-v2" data-rev="">
        {items.map((it, i) => (
          <a key={i} className="wcard spot" href={it.href} data-track={it.track}>
            <div className="kick"><span>{it.kicker[0]}</span><span>{it.kicker[1]}</span></div>
            <h3>{it.title}</h3>
            <p className="dek">{it.dek}</p>
            <div className="go">READ →</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function ContactV2() {
  // Email assembled from parts at runtime so the served HTML carries no
  // scrapeable address / mailto: literal.
  const u = "jason", d = "ogrady.ai", addr = u + "@" + d;
  return (
    <section id="contact" className="contact-v2" data-screen-label="05 Contact">
      <div className="contact-grid wrap">
        <div data-rev="">
          <div className="sec-num" style={{ marginBottom: 20 }}>04 · Get in touch</div>
          <h2>Start a conversation<em>.</em></h2>
          <p className="contact-lede">Open to content-production and editorial roles — finding the
            story and shipping it in whatever medium it needs. Tell me what you’re building.</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn primary magnetic" href="/contact" data-track="cta-contact-primary">Get in touch →</a>
            <a className="btn magnetic" href="/portfolio" data-track="cta-portfolio">Full portfolio</a>
          </div>
        </div>
        <div className="contact-links" data-rev="">
          <a href={"mailto:" + addr} data-track="email-link"><span>Email</span><span className="ext">{addr}</span></a>
          <a href="/contact" data-track="contact-page"><span>Contact form</span><span className="ext">ogrady.ai/contact</span></a>
          <a href="https://www.linkedin.com/in/ogrady/" target="_blank" rel="noopener noreferrer" data-track="li-link"><span>LinkedIn ↗</span><span className="ext">/in/ogrady</span></a>
          <a href="https://github.com/jasonogrady" target="_blank" rel="noopener noreferrer" data-track="gh-link"><span>GitHub ↗</span><span className="ext">@jasonogrady</span></a>
          <p className="offclock">
            <span className="k">Off the clock</span>
            <a href="https://crispydigitals.com" target="_blank" rel="noopener noreferrer" data-track="photo-portfolio">
              Photographer &amp; Getty Images contributor ↗
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatsV2, WorkV2, WritingV2, ContactV2 });