/* ============================================================
   Shared sections — Now, Selected Work, Writing & Talks, Contact
   These render the same content across all three aesthetic modes.
   ============================================================ */

// -------------------- NOW --------------------
function SectionNow() {
  return (
    <section id="now" className="section" data-screen-label="02 Now">
      <div className="section-head">
        <div className="num">§ 0.2 · Currently</div>
        <h2><em>Now</em> · what I'm working on</h2>
      </div>
      <div className="now-grid">
        <div className="date">May 2026 · Bay Area</div>
        <div className="body">
          <p>
            Shipping documentation, sample code, and developer-facing
            education for <strong>Agent Payments Protocol (AP2)</strong> — the
            open protocol for agent-led payments that Google launched in
            September 2025.
          </p>
          <p>
            Thinking a lot about how editorial craft scales inside a model
            company: the docs that ship as a product, the engineering blog
            posts that recruit, the protocol specs that get adopted because
            they're <em>readable</em>.
          </p>
          <p>
            Quietly open to senior editorial and developer-education
            leadership at companies building serious AI systems.
          </p>
        </div>
      </div>
    </section>
  );
}

// -------------------- SELECTED WORK --------------------
function SectionWork() {
  return (
    <section id="work" className="section" data-screen-label="03 Selected work">
      <div className="section-head">
        <div className="num">§ 0.3 · Selected work</div>
        <h2><em>Selected</em> work</h2>
      </div>

      {/* Featured: AP2 */}
      <div className="work-featured">
        <div>
          <div className="feat-tag">★ Featured · Launched Sept 2025</div>
          <h3>
            <em>Agent Payments Protocol</em> — Google's open standard
            for agent-led commerce.
          </h3>
          <div className="feat-body">
            <p>
              When Google announced AP2 on September 16, 2025, 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>
              The work spanned spec prose, code-comment voice, README
              architecture, and the on-stage narrative — exactly the kind
              of full-stack editorial work an AI lab needs from a writer.
            </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 blog post</a>
            <a href="https://ap2-protocol.org/" data-track="ap2-site">Protocol website</a>
            <a href="https://github.com/google-agentic-commerce/AP2" data-track="ap2-repo">GitHub repository</a>
          </div>
          <dl className="feat-meta">
            <dt>Client</dt><dd>Google · Agentic Commerce</dd>
            <dt>Role</dt><dd>Documentation lead — blog, spec site, repo</dd>
            <dt>Surfaces</dt><dd>Press release · developer docs · README · sample code</dd>
            <dt>Launched</dt><dd>September 16, 2025</dd>
          </dl>
        </div>
        <figure className="feat-viz feat-viz-hero" aria-label="AP2 announcement hero">
          <img src="assets/ap2-hero.jpg" alt="Announcing Agent Payments Protocol (AP2) — Google Cloud" />
          <figcaption className="badge">Plate 1 · Launch announcement · Google Cloud · Sept 2025</figcaption>
        </figure>
      </div>

      {/* Plate 2 — the actual protocol diagram */}
      <figure className="ap2-plate ap2-diagram">
        <div className="ap2-plate-img">
          <img src="assets/ap2-diagram.svg" alt="AP2 action authorization overview — agent, merchant, issuer trust flow" />
        </div>
        <figcaption>
          <span className="fig">Fig. 1</span>
          <span className="cap">Action authorization overview — the trust flow between user, agent, merchant, and issuer that gives AP2 its cryptographic guarantees. Documented end-to-end on <em>ap2-protocol.org</em>.</span>
        </figcaption>
      </figure>

      {/* Plate 3 — partners */}
      <figure className="ap2-plate ap2-partners">
        <figcaption className="top">
          <span className="fig">Fig. 2</span>
          <span className="cap">Sixty-plus launch partners — payments, identity, commerce, and infra — coordinated their developer-facing messaging against the docs my team shipped.</span>
        </figcaption>
        <div className="ap2-plate-img">
          <img src="assets/ap2-partners.jpg" alt="AP2 launch partners — 1Password, Adobe, Adyen, Coinbase, PayPal, Mastercard, American Express, Cloudflare, Salesforce, Intuit, and more" />
        </div>
      </figure>

      <ul className="work-list">
        <li>
          <span className="yr">2010 — 2026</span>
          <span className="ti">
            <em>Google Pay &amp; Wallet API</em> documentation
            <span className="role">Sr. Technical Writer · multi-year</span>
          </span>
          <span className="kind">Developer docs</span>
          <a className="arrow" href="https://developers.google.com/pay/api" data-track="work-googlepay">→</a>
        </li>
        <li>
          <span className="yr">2024 — 2026</span>
          <span className="ti">
            <em>Google Merchant API</em> reference &amp; guides
            <span className="role">Sr. Technical Writer · REST reference + howto</span>
          </span>
          <span className="kind">API reference</span>
          <a className="arrow" href="https://developers.google.com/merchant/api" data-track="work-merchant">→</a>
        </li>
        <li>
          <span className="yr">2004 — 2011</span>
          <span className="ti">
            <em>8 published books</em> — Peachpit, Pearson, Greenwood
            <span className="role">Author · Mac, Apple Inc., Garmin, Droid, Nexus</span>
          </span>
          <span className="kind">Long-form</span>
          <a className="arrow" href="https://ogrady.ai/portfolio/#books" data-track="work-books">→</a>
        </li>
        <li>
          <span className="yr">2017 — 2023</span>
          <span className="ti">
            <em>Google Optimize</em> developer site &amp; help center
            <span className="role">Sr. Technical Writer · A/B testing platform</span>
          </span>
          <span className="kind">Dev education</span>
          <a className="arrow" href="https://ogrady.ai/portfolio/#developer-docs" data-track="work-optimize">→</a>
        </li>
        <li>
          <span className="yr">1995 — present</span>
          <span className="ti">
            <em>O'Grady's PowerPage</em>
            <span className="role">Founder &amp; editor · daily Apple coverage since 1995</span>
          </span>
          <span className="kind">Editorial</span>
          <a className="arrow" href="https://www.powerpage.org/" data-track="work-powerpage">→</a>
        </li>
      </ul>
    </section>
  );
}

// -------------------- WRITING & TALKS --------------------
function SectionWriting() {
  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 for the protocol — architecture, trust model, sample integrations, and the open governance plan.",
      href: "https://ap2-protocol.org/",
      track: "writing-ap2-spec",
    },
    {
      kicker: ["ZDNet", "Feature"],
      title: "Four privacy settings you should enable in iOS 7 immediately",
      dek: "Mobile privacy explainer that hit Apple's main consumer audience — translating threat models into a checklist.",
      href: "https://www.zdnet.com/article/four-privacy-settings-you-should-enable-in-ios-7-immediately/",
      track: "writing-zdnet",
    },
    {
      kicker: ["PowerPage.org", "1995 — present"],
      title: "Thirty years of daily Apple coverage",
      dek: "An independent Apple blog I founded and have 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 kind of 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="section" data-screen-label="04 Writing & talks">
      <div className="section-head">
        <div className="num">§ 0.4 · Writing &amp; talks</div>
        <h2><em>Writing</em> &amp; talks</h2>
      </div>
      <div className="writing-grid">
        {items.map((it, i) => (
          <a key={i} className="writing-card" href={it.href} data-track={it.track}>
            <div className="kicker">
              <span>{it.kicker[0]}</span>
              <span>{it.kicker[1]}</span>
            </div>
            <h3 className="ti">{it.title}</h3>
            <p className="dek">{it.dek}</p>
            <div className="arrow">Read →</div>
          </a>
        ))}
      </div>
    </section>
  );
}

// -------------------- CONTACT --------------------
function SectionContact() {
  return (
    <section id="contact" className="contact" data-screen-label="05 Contact">
      <div className="contact-inner">
        <div>
          <div className="meta" style={{ marginBottom: 18 }}>§ 0.5 · Get in touch</div>
          <h2>
            If this looks like the<br/>
            kind of <em>writing</em> your<br/>
            platform needs —
          </h2>
          <div className="cta-row">
            <a className="primary" href="https://ogrady.ai/contact.html" data-track="cta-contact-primary">Start a conversation →</a>
            <a href="https://ogrady.ai/portfolio/" data-track="cta-portfolio">See full portfolio</a>
          </div>
        </div>
        <div className="links">
          <a href="https://ogrady.ai/contact.html" data-track="contact-page">
            <span>Contact form</span><span className="ext">ogrady.ai/contact</span>
          </a>
          <a href="https://linkedin.com/in/ogrady/" data-track="li-link">
            <span>LinkedIn</span><span className="ext">/in/ogrady</span>
          </a>
          <a href="https://github.com/jasonogrady/ogradyai-website" data-track="gh-link">
            <span>GitHub README</span><span className="ext">/jasonogrady/ogradyai-website</span>
          </a>
          <a href="https://ogrady.ai/resume.html" data-track="resume-link">
            <span>Résumé</span><span className="ext">ogrady.ai/resume</span>
          </a>
          <a href="https://blog.ogrady.ai" data-track="blog-link">
            <span>Blog</span><span className="ext">blog.ogrady.ai</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.SectionNow = SectionNow;
window.SectionWork = SectionWork;
window.SectionWriting = SectionWriting;
window.SectionContact = SectionContact;