// DiagramSiteArch.jsx — Diagram 4: Site Architecture.
// Six top-level areas of the new site. Each gets a horizontal "area card" with
// a color rail, area label + count, and a list of its children. The grouping
// logic is the point — not exhaustive enumeration.

const AREAS = [
  {
    id: 'home',
    label: 'Homepage',
    count: '1',
    color: BRAND.clay,
    type: 'Page',
    typePath: '/',
    children: ['Homepage'],
  },
  {
    id: 'shop',
    label: 'Shop',
    count: '3',
    color: BRAND.forest,
    type: 'Templates',
    typePath: 'product · collection · cart',
    children: ['Product pages (PDP)', 'Collection pages (PLP)', 'Cart'],
  },
  {
    id: 'content',
    label: 'Content',
    count: '5',
    color: BRAND.swim4,
    type: 'Native blogs',
    typePath: '/blogs/<handle>',
    children: [
      ['Recipes',           '/blogs/recipes'],
      ['Cut Guides',        '/blogs/cut-guides'],
      ['Venison 101',       '/blogs/venison-101'],
      ['Stories',           '/blogs/stories'],
      ['Rubs & Marinades',  '/blogs/rubs-and-marinades'],
    ],
  },
  {
    id: 'brand',
    label: 'About / Brand Pages',
    count: '11',
    color: BRAND.ochre,
    type: 'Shopify Pages',
    typePath: 'with custom templates',
    children: [
      'Nutrition',
      'Nutrition by the Numbers',
      'HoloʻAi',
      'Partners – HoloʻAi',
      'Kamaʻaina',
      'Membership',
      'Wholesale',
      'Restock',
      'Merchants Directory',
      'Press',
      'Ke Au Hou',
    ],
  },
  {
    id: 'landing',
    label: 'Landing Pages',
    count: '∞',
    color: BRAND.swim3,
    type: 'Metaobject + per-doc templates',
    typePath: 'landing-page',
    children: ['Campaign-driven, created in admin'],
  },
  {
    id: 'account',
    label: 'Customer Account',
    count: '↗',
    color: BRAND.fg,
    type: 'External',
    typePath: 'Recharge Unity portal',
    children: ['Subscription management, billing, charges, addresses — all on Unity'],
  },
];

const SiteArch = () => (
  <div style={{ padding: '56px 48px 64px', maxWidth: 1280, margin: '0 auto' }}>
    <FigureHeader
      kicker="Figure 04 — Site Architecture"
      title="Five blogs, eleven brand pages, a landing-page system, and a customer portal on Unity."
      subtitle="The new architecture, at a glance. Most surfaces have a native Shopify home with built-in tooling; the bits that don't get a deliberate, narrow custom solution."
    />

    {/* Storefront root + branches visual */}
    <div style={{ marginTop: 56, position: 'relative' }}>
      {/* Root */}
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <div style={{
          display: 'inline-block', padding: '10px 24px',
          background: BRAND.ink, color: BRAND.cream,
          fontFamily: BRAND.serif, fontSize: 24, letterSpacing: -0.4,
        }}>
          Storefront
        </div>
        <div style={{
          fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.2,
          textTransform: 'uppercase', color: BRAND.fgMuted, marginTop: 8,
        }}>mauinuivenison.com (post-cutover)</div>
      </div>

      {/* Connector */}
      <div aria-hidden style={{
        width: 1, height: 28, background: BRAND.lineInk, margin: '0 auto',
      }}/>

      {/* Area cards */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        marginTop: 4,
      }}>
        {AREAS.map((a) => (
          <article key={a.id} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr', gap: 0,
            background: BRAND.paper, border: `1px solid ${BRAND.line}`,
            minHeight: 180,
          }}>
            {/* Left rail */}
            <div style={{
              background: a.color, color: '#FFF',
              padding: '20px 18px',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{
                fontFamily: BRAND.mono, fontSize: 10.5, letterSpacing: 1.2,
                textTransform: 'uppercase', opacity: 0.7,
              }}>{a.type}</div>
              <div>
                <div style={{
                  fontFamily: BRAND.serif, fontSize: 56, fontWeight: 300,
                  lineHeight: 0.95, letterSpacing: -1.6,
                }}>{a.count}</div>
                <div style={{
                  fontFamily: BRAND.mono, fontSize: 10, letterSpacing: 0.6,
                  marginTop: 4, opacity: 0.85,
                }}>{a.typePath}</div>
              </div>
            </div>

            {/* Right: title + children */}
            <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h4 style={{
                fontFamily: BRAND.serif, fontSize: 22, fontWeight: 400,
                letterSpacing: -0.5, margin: 0, lineHeight: 1.15,
                color: BRAND.fg,
              }}>{a.label}</h4>
              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexDirection: 'column', gap: 5,
              }}>
                {a.children.map((c, i) => (
                  <li key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: Array.isArray(c) ? '1fr auto' : '1fr',
                    gap: 12, alignItems: 'baseline',
                    fontFamily: BRAND.sans, fontSize: 13.5, color: BRAND.fgSoft,
                    lineHeight: 1.4,
                  }}>
                    <span>{Array.isArray(c) ? c[0] : c}</span>
                    {Array.isArray(c) && (
                      <code style={{
                        fontFamily: BRAND.mono, fontSize: 11.5,
                        color: BRAND.fgMuted,
                      }}>{c[1]}</code>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          </article>
        ))}
      </div>
    </div>

    <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,
      }}>Read this as</span>
      A storefront made of native Shopify surfaces, with two deliberate exceptions: a small bundle-builder Worker (custom) and the Recharge Unity portal (external). Everything else lives where Shopify expects it.
    </div>
  </div>
);

Object.assign(window, { SiteArch });