// DiagramContentMap.jsx — Diagram 2: Sanity → Shopify content model mapping.
// Two columns. Left: Sanity source. Right: Shopify destination, grouped into
// Blogs / Metaobjects / Theme Settings & Blocks / Pages. The grouping on the
// right is the insight — it shows the architectural logic.

const GROUPS = [
  {
    id: 'blogs',
    label: 'Blogs',
    sub: '5 native blogs · /blogs/<handle>',
    color: BRAND.clay,
    items: [
      ['Recipe documents',           'Articles in Recipes blog'],
      ['Cut Guide documents',        'Articles in Cut Guides blog'],
      ['Venison 101 documents',      'Articles in Venison 101 blog'],
      ['Stories / blog posts',       'Articles in Stories blog'],
      ['Rub / Marinade documents',   'Articles in Rubs & Marinades blog'],
    ],
  },
  {
    id: 'metaobjects',
    label: 'Metaobjects',
    sub: 'Custom data models · referenced via metafields',
    color: BRAND.forest,
    items: [
      ['Landing pages',          'landing-page'],
      ['Authors',                'recipe-author'],
      ['Recipe categories',      'recipe-category'],
      ['Cooking methods',        'recipe-method'],
      ['Nutrients',              'nutrient'],
      ['Advertisements',         'advertisement'],
      ['Merchants',              'merchant'],
    ],
  },
  {
    id: 'theme',
    label: 'Theme Settings & Blocks',
    sub: 'Lives in Smart Theme — no custom code needed',
    color: BRAND.ochre,
    items: [
      ['Color themes',            'Smart Theme Design System color settings'],
      ['Custom product options',  'Native Color / Image Swatches (theme blocks)'],
      ['Settings alerts',         'Announcement bar blocks'],
      ['Press items',             'Section blocks in the press section'],
    ],
  },
  {
    id: 'pages',
    label: 'Pages',
    sub: 'Singleton pages with custom templates',
    color: BRAND.swim3,
    items: [
      ['Hub / singleton pages',   'Native Shopify Pages with custom templates'],
    ],
  },
];

const ContentMap = () => (
  <div style={{ padding: '56px 48px 64px', maxWidth: 1280, margin: '0 auto' }}>
    <FigureHeader
      kicker="Figure 02 — Content Model Mapping"
      title="Where every Sanity document lands in Shopify."
      subtitle="Editorial content moves to native blogs. Reference data moves to metaobjects. Visual configuration moves to theme settings. One-off marketing pages stay as native Pages. Four destinations, chosen by what the content actually is."
    />

    <div style={{
      marginTop: 56,
      border: `1px solid ${BRAND.line}`,
      background: BRAND.paper,
    }}>
      {/* Column headers */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 60px 1fr',
        padding: '20px 28px', borderBottom: `1px solid ${BRAND.line}`,
        background: BRAND.bgSoft,
        fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
        textTransform: 'uppercase', color: BRAND.fgMuted,
      }}>
        <div>Sanity (source)</div>
        <div/>
        <div>Shopify (destination)</div>
      </div>

      {/* Groups */}
      {GROUPS.map((g, gi) => (
        <div key={g.id} style={{
          borderTop: gi === 0 ? 'none' : `1px solid ${BRAND.line}`,
        }}>
          {/* Group label row */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 60px 1fr',
            padding: '20px 28px 12px',
            alignItems: 'baseline',
          }}>
            <div/>
            <div/>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12,
            }}>
              <span style={{
                width: 8, height: 8, background: g.color, flexShrink: 0,
                transform: 'translateY(1px)',
              }}/>
              <span style={{
                fontFamily: BRAND.serif, fontSize: 22, letterSpacing: -0.4,
                color: BRAND.fg, lineHeight: 1.1,
              }}>{g.label}</span>
              <span style={{
                fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.3,
                color: BRAND.fgMuted,
              }}>{g.sub}</span>
            </div>
          </div>

          {/* Items */}
          {g.items.map(([src, dst], ii) => (
            <div key={src} style={{
              display: 'grid', gridTemplateColumns: '1fr 60px 1fr',
              padding: '10px 28px', alignItems: 'center',
              borderTop: `1px solid ${BRAND.line}`,
              background: ii % 2 === 1 ? BRAND.bgSoft : 'transparent',
            }}>
              {/* Source */}
              <div style={{
                fontFamily: BRAND.sans, fontSize: 14.5, color: BRAND.fg,
              }}>{src}</div>

              {/* Arrow */}
              <div aria-hidden style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="40" height="10" viewBox="0 0 40 10" fill="none">
                  <path d="M0 5 H32" stroke={g.color} strokeWidth="1" strokeDasharray="2 3"/>
                  <path d="M28 1 L36 5 L28 9" stroke={g.color} strokeWidth="1.4" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
                </svg>
              </div>

              {/* Destination */}
              <div style={{
                fontFamily: g.id === 'metaobjects' ? BRAND.mono : BRAND.sans,
                fontSize: g.id === 'metaobjects' ? 13.5 : 14.5,
                color: BRAND.fg,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{
                  width: 4, alignSelf: 'stretch', background: g.color,
                  opacity: 0.4, flexShrink: 0,
                }}/>
                <span>{dst}</span>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>

    {/* Caption */}
    <div style={{
      marginTop: 32, padding: '20px 24px',
      background: BRAND.bgSoft, border: `1px solid ${BRAND.line}`,
      borderLeft: `2px solid ${BRAND.forest}`,
      fontFamily: BRAND.sans, fontSize: 14.5, lineHeight: 1.55,
      color: BRAND.fgSoft,
    }}>
      <span style={{
        fontFamily: BRAND.mono, fontSize: 10.5, letterSpacing: 1.2,
        textTransform: 'uppercase', color: BRAND.forest, fontWeight: 600,
        marginRight: 10,
      }}>The grouping is the insight</span>
      Editorial → blogs. Reference data → metaobjects. Visual config → theme. Marketing pages → Pages. Once you sort by what the content <em>is</em>, almost every type has a native Shopify home that comes with built-in tooling. The custom-modeling we keep is the bit that genuinely needs it.
    </div>
  </div>
);

Object.assign(window, { ContentMap });