// MnvChanges.jsx — "What we changed, and why" — 5 cards.

// Inline-code style for tech tokens — defined first so JSX literals below can reference it.
const Code = ({ children }) => (
  <code style={{
    fontFamily: BRAND.mono, fontSize: '0.9em',
    background: BRAND.bgSoft, padding: '1px 6px', borderRadius: 3,
    color: BRAND.fg, border: `1px solid ${BRAND.line}`,
  }}>{children}</code>
);

const CHANGES = [
  {
    n: '01',
    title: 'Editorial content as Shopify Blogs, not metaobjects.',
    theirs: 'Recipes, cut guides, Venison 101, and rubs/marinades modeled as metaobjects with custom URLs under /pages/<type>/<handle>.',
    ours: 'Model each of these as a native Shopify blog with custom article templates. URLs become /blogs/recipes/<handle>, /blogs/cut-guides/<handle>, and so on.',
    why: <>Native blog URLs are stronger SEO surfaces. Smart Theme's <Code>__main_blog</Code> section already ships with filter UI, sort UI, applied-filter chips, and an empty state. Articles include native canonical, RSS, sitemap inclusion, and Article schema scaffolding. And editors get the full blog-article authoring UX — which metaobjects don't provide.</>,
    outcome: '5 dedicated blogs (Recipes, Cut Guides, Venison 101, Stories, Rubs & Marinades) with cleaner URLs and richer authoring.',
  },
  {
    n: '02',
    title: 'App Proxy scoped to the bundle builder only.',
    theirs: 'An 18-endpoint App Proxy mirroring most of Recharge\'s customer-facing API surface.',
    ours: 'Strip the proxy down to the two endpoints required to broker the bundle builder\'s Recharge calls. Subscription management, billing, charge history, and payment updates stay where they already live: the Recharge Unity portal.',
    why: <>The Unity portal already does this work. Building a parallel API surface in the theme means maintaining a second customer portal forever. Stripping the proxy reduces the custom app to its essential function — holding the Recharge API key so the bundle builder can create selections from the browser without exposing the secret.</>,
    outcome: 'A small, single-purpose custom app. One thing to monitor, one thing to maintain.',
  },
  {
    n: '03',
    title: 'Recharge selling-plan config mirrored to product metafields.',
    theirs: 'A /apps/recharge/products/:product_id endpoint that fetches Recharge config at PDP render time.',
    ours: 'Sync Recharge selling-plan config into Shopify product metafields via webhook. The PDP renders selling-plan options directly from Liquid — no runtime API call.',
    why: <>Faster PDP. No loading state on selling plans. No FOUC on price. The PDP also survives Recharge API outages — shoppers see a slightly stale price config rather than a broken page.</>,
    outcome: 'Selling-plan UI ships on the first render with the rest of the PDP.',
  },
  {
    n: '04',
    title: 'Sentry scoped to the Cloudflare Worker.',
    theirs: 'Sentry on both the theme side and the Worker side.',
    ours: 'Worker-only Sentry, scoped to the App Proxy.',
    why: <>The bundle-builder endpoint is where real revenue risk lives — silent failures there are invisible to QA but cost real money. The rest of the theme can rely on QA cycles and Gorgias feedback loops. Keeping Sentry focused preserves its signal-to-noise and avoids the configuration burden (release tagging, sourcemap upload, PII scrubbing, noise filters) of theme-wide error monitoring.</>,
    outcome: 'Sentry alerts mean something. Real revenue-impacting issues, surfaced fast.',
  },
  {
    n: '05',
    title: 'Smart Theme as the foundation, not Horizon.',
    theirs: 'A Horizon fork.',
    ours: 'Build on Platter\'s Smart Theme (Accelerate-Z), which already includes the patterns this build needs.',
    why: <>Native blog filtering, predictive search, Color and Image Swatches as theme blocks, Theme Blocks architecture, and the Design System surface are all already in Smart Theme. Smart Theme also covers roughly ten stock content sections that would otherwise need custom dev. Faster time-to-functional, and an upgrade path on a theme Platter actively maintains.</>,
    outcome: 'A faster start, less custom section work, and ongoing theme upgrades from us.',
  },
];

const ChangesIntro = () => (
  <>
    <SectionHeader num="02" eyebrow="What we changed, and why"
      title="Same destination — a few different turns to get there."/>
    <P lede>
      Your team produced a real, defensible plan. The five revisions below are
      where we'd recommend a different path — each chosen to reduce surface
      area, lean on Shopify natives, and keep the system serviceable two
      years from now.
    </P>
  </>
);

const Changes = () => (
  <div id="changes" className="figure-wide" style={{
    display: 'flex', flexDirection: 'column', gap: 0,
    marginTop: 40, marginBottom: 24,
    border: `1px solid ${BRAND.line}`,
    borderTop: `2px solid ${BRAND.fg}`,
    background: BRAND.paper,
  }}>
    {CHANGES.map((c, i) => (
      <article key={c.n} style={{
        display: 'grid', gridTemplateColumns: '88px 1fr',
        gap: 28,
        padding: '40px 36px',
        borderTop: i === 0 ? 'none' : `1px solid ${BRAND.line}`,
      }}>
        {/* Left rail: change number */}
        <div>
          <div style={{
            fontFamily: BRAND.serif, fontSize: 56, fontWeight: 300,
            lineHeight: 1, color: BRAND.fgFaint, letterSpacing: -1.6,
          }}>{c.n}</div>
          <div style={{
            fontFamily: BRAND.mono, fontSize: 10, letterSpacing: 1.2,
            textTransform: 'uppercase', color: BRAND.fgMuted, marginTop: 10,
          }}>Change</div>
        </div>

        {/* Right: content */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <h3 style={{
            fontFamily: BRAND.serif, fontWeight: 400,
            fontSize: 30, lineHeight: 1.15, letterSpacing: -0.6,
            margin: 0, textWrap: 'balance',
          }}>{c.title}</h3>

          {/* From / To row */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            border: `1px solid ${BRAND.line}`, background: BRAND.bgSoft,
          }}>
            <FromTo label="In your plan" tone={BRAND.fgMuted}>{c.theirs}</FromTo>
            <FromTo label="Our recommendation" tone={BRAND.clay} divided>{c.ours}</FromTo>
          </div>

          {/* Why */}
          <div>
            <div style={{
              fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.2,
              textTransform: 'uppercase', color: BRAND.fgMuted, marginBottom: 8,
            }}>Why</div>
            <p style={{
              fontFamily: BRAND.sans, fontSize: 16.5, lineHeight: 1.6,
              color: BRAND.fgSoft, margin: 0, textWrap: 'pretty',
            }}>{c.why}</p>
          </div>

          {/* Outcome */}
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 12,
            paddingTop: 14, borderTop: `1px solid ${BRAND.line}`,
          }}>
            <span style={{
              fontFamily: BRAND.mono, fontSize: 10, letterSpacing: 1.2,
              textTransform: 'uppercase', color: BRAND.forest, fontWeight: 600,
              flexShrink: 0,
            }}>Outcome →</span>
            <span style={{
              fontFamily: BRAND.sans, fontSize: 15, color: BRAND.fg, lineHeight: 1.5,
            }}>{c.outcome}</span>
          </div>
        </div>
      </article>
    ))}
  </div>
);

const FromTo = ({ label, tone, divided, children }) => (
  <div style={{
    padding: '18px 22px',
    borderLeft: divided ? `1px solid ${BRAND.line}` : 'none',
  }}>
    <div style={{
      fontFamily: BRAND.mono, fontSize: 10.5, letterSpacing: 1.2,
      textTransform: 'uppercase', color: tone, marginBottom: 8,
    }}>{label}</div>
    <div style={{
      fontFamily: BRAND.sans, fontSize: 14.5, lineHeight: 1.55,
      color: BRAND.fgSoft, textWrap: 'pretty',
    }}>{children}</div>
  </div>
);

Object.assign(window, { ChangesIntro, Changes });