/* ============================================================
   Portfolio view — full catalog from ogrady.ai/portfolio,
   restyled in the landing's editorial system.
   ============================================================ */

const BOOKS = [
  { title: "The Macintosh Bible, 9th Edition",                year: "2004", isbn: "0-321-21349-1",     img: "https://ogrady.ai/img/publication-08.png", href: "https://www.peachpit.com/store/macintosh-bible-9780321213495" },
  { title: "Apple Inc. (Corporations That Changed the World)", year: "2008", isbn: "978-0313362446",  img: "https://ogrady.ai/img/publication-01.png", href: "https://amzn.to/3Mcm0ID" },
  { title: "The Garmin Nuvi Pocket Guide, 1st Edition",        year: "2008", isbn: "978-0321591944",  img: "https://ogrady.ai/img/publication-07.png", href: "https://amzn.to/49u04m1" },
  { title: "The Garmin Nuvi Pocket Guide, 2nd Edition",        year: "2009", isbn: "978-0321658593",  img: "https://ogrady.ai/img/publication-06.png", href: "https://amzn.to/4p9kc21" },
  { title: "The Google Phone Pocket Guide",                    year: "2009", isbn: "978-0321620590",  img: "https://ogrady.ai/img/publication-03.png", href: "https://amzn.to/4oR7ipa" },
  { title: "The Nexus One Pocket Guide, 1st Edition",          year: "2010", isbn: "978-0321719706",  img: "https://ogrady.ai/img/publication-05.png", href: "https://amzn.to/3LHslvJ" },
  { title: "The Droid Pocket Guide, 1st Edition",              year: "2010", isbn: "978-0321711939",  img: "https://ogrady.ai/img/publication-02.png", href: "https://amzn.to/486phjY" },
  { title: "The Droid Pocket Guide, 2nd Edition",              year: "2011", isbn: "978-0321747426",  img: "https://ogrady.ai/img/publication-04.png", href: "https://amzn.to/49uTyeP" },
];

// Each section: { id, num, title, dek, items: [{ title, href, dek }] }
const PORTFOLIO_SECTIONS = [
  {
    id: "api-guides", num: "1.1", title: "API guides",
    dek: "Top-level API documentation for Google's commerce and payments stack.",
    items: [
      { title: "Google Merchant API Documentation", href: "https://developers.google.com/merchant/api",
        dek: "API reference for managing merchant data and product listings." },
      { title: "Google Pay and Wallet API Documentation", href: "https://developers.google.com/pay/api",
        dek: "Integration guide for Google Pay and Wallet services." },
    ],
  },
  {
    id: "developer-docs", num: "1.2", title: "Developer documentation",
    dek: "Reference, quickstarts, and how-to guides for product integrations.",
    items: [
      { title: "Merchant API Reference (REST)", href: "https://developers.google.com/merchant/api/reference/rest",
        dek: "REST API reference for Google Merchant Center." },
      { title: "Content API for Shopping: Get Started", href: "https://developers.google.com/shopping-content/guides/quickstart",
        dek: "Quickstart for Content API integration." },
      { title: "Content API for Shopping: Making Requests", href: "https://developers.google.com/shopping-content/guides/making-requests",
        dek: "API request formatting and authentication." },
      { title: "Content API for Shopping: Batch Requests", href: "https://developers.google.com/shopping-content/guides/how-tos/batch",
        dek: "Batch API operations guide." },
      { title: "Merchant Support Documentation", href: "https://developers.google.com/shopping-content/guides/merchant-support.md",
        dek: "Support resources for Merchant Center integration." },
      { title: "Google Analytics Developer Guide — Cookie Usage", href: "https://web.archive.org/web/*/https://developers.google.com/analytics/devguides/collection/gtagjs/cookie-usage",
        dek: "Cookie implementation in Google Analytics (archived)." },
    ],
  },
  {
    id: "optimize-dev", num: "1.3", title: "Developer docs — Google Optimize",
    dek: "Developer-facing documentation for Google's A/B testing platform. Sunset 30 Sept 2023; links archived.",
    items: [
      { title: "Google Optimize Developer Site", href: "https://web.archive.org/web/*/https://developers.google.com/optimize/",
        dek: "Developer resources for Google Optimize integration." },
      { title: "Optimize Developer Guide: Experiments", href: "https://web.archive.org/web/*/https://developers.google.com/optimize/devguides/experiments",
        dek: "Implementing A/B tests and experiments." },
      { title: "Optimize Developer Guide: AMP Experiments", href: "https://web.archive.org/web/*/https://developers.google.com/optimize/devguides/amp-experiments",
        dek: "Running experiments on Accelerated Mobile Pages." },
      { title: "Optimize Developer Guide: Antiflicker", href: "https://web.archive.org/web/*/https://developers.google.com/optimize/devguides/antiflicker",
        dek: "Preventing page flicker during experiments." },
    ],
  },
  {
    id: "analytics-help", num: "1.4", title: "Google Analytics help center",
    dek: "End-user and admin documentation for Universal Analytics and GA4.",
    items: [
      { title: "Mobile App Overview report", href: "https://support.google.com/analytics/answer/2621230",
        dek: "Mobile app performance metrics and user engagement." },
      { title: "Mobile App Conversions: Goals & Ecommerce Reports", href: "https://support.google.com/analytics/answer/2568802",
        dek: "Tracking goals and ecommerce in mobile apps." },
      { title: "Apply and remove segments", href: "https://support.google.com/analytics/answer/3123906",
        dek: "Filtering and analyzing user segments." },
      { title: "Advanced mobile app conversion tracking", href: "https://support.google.com/analytics/answer/6205762",
        dek: "Deeper guidance on mobile app conversion reports." },
      { title: "Set up data collection for an app", href: "https://support.google.com/analytics/answer/9353532",
        dek: "Configuring app analytics data collection." },
      { title: "GA4: Set up Analytics for a website and/or app", href: "https://support.google.com/analytics/answer/9304153",
        dek: "Getting started with GA4 implementation." },
      { title: "What's New — Archive (2019–2024)", href: "https://support.google.com/analytics/answer/13420269",
        dek: "Historical archive of Analytics feature updates." },
    ],
  },
  {
    id: "surveys-help", num: "1.5", title: "Google Surveys help center",
    dek: "Documentation for Google's research platform.",
    items: [
      { title: "Surveys: Policies", href: "https://support.google.com/surveys/answer/2375134",
        dek: "Policy guidelines for surveys." },
      { title: "Survey Lifecycle FAQ", href: "https://support.google.com/surveys/answer/2888778",
        dek: "Survey operations FAQ." },
      { title: "Targeting Options", href: "https://support.google.com/surveys/answer/455679",
        dek: "Audience targeting capabilities." },
      { title: "Methodology", href: "https://support.google.com/surveys/answer/6189786",
        dek: "Survey methodology and sampling." },
      { title: "Weighting", href: "https://support.google.com/surveys/answer/6218145",
        dek: "Statistical weighting in survey results." },
      { title: "Surveys 360 Features", href: "https://support.google.com/surveys/answer/6244101",
        dek: "Advanced Surveys 360 features." },
      { title: "Target Remarketing Lists", href: "https://support.google.com/surveys/answer/9043718",
        dek: "Targeting remarketing audiences." },
    ],
  },
  {
    id: "optimize-help", num: "1.6", title: "Google Optimize help center",
    dek: "End-user docs for Optimize. Sunset 30 Sept 2023; links archived.",
    items: [
      { title: "Optimize Help Center", href: "https://web.archive.org/web/*/https://support.google.com/optimize",
        dek: "Support documentation for Google Optimize." },
      { title: "Visual Editor Diagnostics", href: "https://web.archive.org/web/*/https://support.google.com/optimize/answer/6318364",
        dek: "Troubleshooting the visual editor." },
      { title: "Using the Visual Editor", href: "https://web.archive.org/web/*/https://support.google.com/optimize/answer/6369964",
        dek: "Visual experiment editor guide." },
      { title: "How the Runtime Works", href: "https://web.archive.org/web/*/https://support.google.com/optimize/answer/7579180",
        dek: "Optimize runtime execution explained." },
      { title: "Bayesian Inference", href: "https://web.archive.org/web/*/https://support.google.com/optimize/answer/9988285",
        dek: "Statistical methodology in experiment analysis." },
      { title: "Reports Explained", href: "https://web.archive.org/web/*/https://support.google.com/optimize/answer/9988502",
        dek: "Understanding experiment reports and metrics." },
      { title: "Optimize Announcements", href: "https://web.archive.org/web/*/https://support.google.com/optimize/announcements/9176329",
        dek: "Product updates and feature launches." },
    ],
  },
  {
    id: "product-docs", num: "1.7", title: "Product documentation help center",
    dek: "Cross-product reference for Google's tax and compliance flows.",
    items: [
      { title: "Tax Residency Information", href: "https://support.google.com/product-documentation/answer/13401799",
        dek: "Non-US withholding and reporting requirements." },
      { title: "Tax Residency Certificates", href: "https://support.google.com/product-documentation/answer/15500364",
        dek: "Tax Residency Certificate requirements." },
    ],
  },
  {
    id: "other-help", num: "1.8", title: "Other help centers",
    dek: "Selected documentation across Google Ads, Opinion Rewards, and more.",
    items: [
      { title: "Google Ads: U.S. State Privacy Laws Compliance", href: "https://support.google.com/google-ads/answer/9614122",
        dek: "GDPR and CCPA compliance guide." },
      { title: "Google Opinion Rewards Help Center", href: "https://support.google.com/opinionrewards",
        dek: "Support resources for Google Opinion Rewards." },
    ],
  },
  {
    id: "security", num: "1.9", title: "Security documentation",
    dek: "Customer-facing security advisories for Google Cloud products.",
    items: [
      { title: "Google Cloud Security Bulletins", href: "https://cloud.google.com/support/bulletins",
        dek: "Security vulnerabilities and patches for Google Cloud products." },
    ],
  },
  {
    id: "videos", num: "1.10", title: "Video tutorials",
    dek: "Scripted and produced developer-education videos for Google Optimize.",
    items: [
      { title: "Working with Google Optimize — full playlist", href: "https://www.youtube.com/playlist?list=PLI5YfMzCfRtbgHPUPVBhIMzHbdJNvq8kN",
        dek: "Complete video series on A/B testing." },
      { title: "Create a New Experiment in Optimize", href: "https://youtu.be/cFVnkSYPYXI",
        dek: "Setting up your first A/B test." },
      { title: "Create a Redirect Test in Optimize", href: "https://youtu.be/D8-T95xmL0o",
        dek: "Testing different page URLs." },
      { title: "Create a Multivariate Test (MVT) in Optimize", href: "https://youtu.be/QWFHYbHpOo8",
        dek: "Testing multiple variables simultaneously." },
      { title: "Create a Personalization in Optimize", href: "https://youtu.be/MnA7ie92St4",
        dek: "Delivering targeted content to audiences." },
      { title: "Create a Multi-Page Experience in Optimize", href: "https://youtu.be/mNVp6uR2UZs",
        dek: "Building multi-page experiments." },
      { title: "Analyze Optimize Reports", href: "https://youtu.be/5TJaR9U1dq4",
        dek: "Understanding experiment results and significance." },
    ],
  },
  {
    id: "blogs", num: "1.11", title: "Blog posts & editorial",
    dek: "Independent and freelance writing — including the Apple blog I've published daily since 1995.",
    items: [
      { title: "O'Grady's PowerPage", href: "https://www.powerpage.org/",
        dek: "Independent Apple blog publishing daily since 1995." },
      { title: "Four Privacy Settings You Should Enable in iOS 7 Immediately", href: "https://www.zdnet.com/article/four-privacy-settings-you-should-enable-in-ios-7-immediately/",
        dek: "ZDNet feature on mobile privacy best practices." },
    ],
  },
];

function PortfolioView() {
  return (
    <>
      {/* Portfolio header — mirrors the landing's hero proportions */}
      <section className="hero portfolio-hero" data-screen-label="P0 Portfolio · Cover">
        <div className="ornament fade-up">
          <span>Vol. XXX</span>
          <span className="ornament-glyph">·</span>
          <span>Portfolio</span>
          <span className="ornament-rule draw-rule"></span>
          <span>Updated · Nov 2025</span>
        </div>
        <h1 className="portfolio-h1 fade-up d1">
          A working <em>portfolio</em><br/>
          of fifteen years.
        </h1>
        <p className="portfolio-deck fade-up d2">
          Eight books, two API surfaces, six help centers, a seven-video
          developer-education series, and a thirty-year-old Apple blog —
          plus the launch of <em>Agent Payments Protocol</em>. The complete
          index lives below.
        </p>
        <dl className="portfolio-counts fade-up d3">
          <div><dt>Years at Google</dt><dd>15+</dd></div>
          <div><dt>Help-center articles</dt><dd>256</dd></div>
          <div><dt>DevSite articles</dt><dd>196</dd></div>
          <div><dt>Books authored</dt><dd>8</dd></div>
          <div><dt>Dev-ed videos shipped</dt><dd>7</dd></div>
          <div><dt>API surfaces documented</dt><dd>2</dd></div>
          <div><dt>Years on Burning Pen Org. Committee</dt><dd>8</dd></div>
          <div><dt>Years publishing PowerPage</dt><dd>30+</dd></div>
          <div><dt>AP2 launch partners reached</dt><dd>60+</dd></div>
        </dl>
      </section>

      {/* AP2 — pinned at the top of portfolio view too */}
      <section id="portfolio-featured" className="section" data-screen-label="P1 AP2 featured">
        <div className="section-head">
          <div className="num">★ Featured · Sept 2025</div>
          <h2><em>Agent Payments Protocol</em></h2>
        </div>
        <div className="work-featured" style={{ borderTop: 'none', paddingTop: 0 }}>
          <div>
            <div className="feat-tag">Documentation · blog · spec site · GitHub</div>
            <h3>
              The launch of Google's open standard for <em>agent-led commerce</em>.
            </h3>
            <div className="feat-body">
              <p>
                I wrote the announcement post, the protocol website, and the
                GitHub README and contributor docs for AP2 — Google's
                cryptographic payment protocol for AI agents. Shipped to a
                60+ partner ecosystem on launch day.
              </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="port-ap2-blog">Announcement blog post</a>
              <a href="https://ap2-protocol.org/" data-track="port-ap2-site">Protocol website</a>
              <a href="https://github.com/google-agentic-commerce/AP2" data-track="port-ap2-repo">GitHub repository</a>
            </div>
          </div>
          <figure className="feat-viz feat-viz-hero" style={{ margin: 0 }}>
            <img src="assets/ap2-hero.jpg" alt="Announcing AP2" />
            <figcaption className="badge">Plate · Google Cloud · Sept 2025</figcaption>
          </figure>
        </div>
      </section>

      {/* Books shelf */}
      <section id="books" className="section" data-screen-label="P2 Books">
        <div className="section-head">
          <div className="num">§ 1.0 · Books</div>
          <h2><em>Eight</em> published books</h2>
        </div>
        <div className="book-shelf">
          {BOOKS.map((b, i) => (
            <a key={i} className="book" href={b.href} data-track={`book-${i}`}>
              <div className="book-cover">
                <img src={b.img} alt={b.title} loading="lazy" />
              </div>
              <div className="book-meta">
                <div className="book-yr">{b.year}</div>
                <div className="book-ti">{b.title}</div>
                <div className="book-isbn">ISBN {b.isbn}</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* All other categories rendered uniformly */}
      {PORTFOLIO_SECTIONS.map((s) => (
        <section key={s.id} id={s.id} className="section port-section" data-screen-label={`P · ${s.title}`}>
          <div className="section-head">
            <div className="num">§ {s.num} · {s.title}</div>
            <h2><em>{s.title.split(" ")[0]}</em>{" "}{s.title.split(" ").slice(1).join(" ")}</h2>
          </div>
          <p className="port-dek">{s.dek}</p>
          <ul className="port-list">
            {s.items.map((it, i) => (
              <li key={i}>
                <a href={it.href} data-track={`port-${s.id}-${i}`}>
                  <span className="port-ti">{it.title}</span>
                  <span className="port-dek-line">{it.dek}</span>
                  <span className="port-arrow">↗</span>
                </a>
              </li>
            ))}
          </ul>
        </section>
      ))}
    </>
  );
}

window.PortfolioView = PortfolioView;