// DiagramRedirects.jsx — Diagram 3: URL redirect map.
// Mono-typography routing table. Old URL on left, new on right, connector arrow between.

const REDIRECTS = [
  { from: '/recipes',                              to: '/blogs/recipes',                   note: 'Index page' },
  { from: '/recipes/<slug>',                       to: '/blogs/recipes/<slug>',            note: 'Article' },
  { from: '/venison-101',                          to: '/blogs/venison-101',               note: 'Index page' },
  { from: '/venison-101/<slug>',                   to: '/blogs/venison-101/<slug>',        note: 'Article' },
  { from: '/venison-101/cut-guides',               to: '/blogs/cut-guides',                note: 'Re-parented' },
  { from: '/venison-101/cut-guides/<slug>',        to: '/blogs/cut-guides/<slug>',         note: 'Re-parented · article' },
  { from: 'Legacy rub / marinade URLs',            to: '/blogs/rubs-and-marinades/<slug>', note: 'Consolidated' },
  { from: '/lp/<handle>',                          to: '/pages/<handle>',                  note: 'Landing pages' },
  { from: '/account/*',                            to: 'Recharge Unity · Shopify accounts',note: 'Customer portal' },
];

const Redirects = () => (
  <div style={{ padding: '56px 48px 64px', maxWidth: 1280, margin: '0 auto' }}>
    <FigureHeader
      kicker="Figure 03 — URL Redirect Map"
      title="Every legacy URL has a defined destination."
      subtitle="301 redirects are imported in bulk at cutover; a post-launch validation pass confirms no indexed surface drops out."
    />

    <div style={{
      marginTop: 56,
      border: `1px solid ${BRAND.line}`,
      background: BRAND.paper,
      overflow: 'hidden',
    }}>
      {/* Header row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 60px 1fr 200px',
        padding: '16px 28px',
        background: BRAND.ink, color: BRAND.cream,
        fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
        textTransform: 'uppercase',
      }}>
        <div>From (legacy)</div>
        <div style={{ textAlign: 'center' }}>301</div>
        <div>To (new)</div>
        <div>Notes</div>
      </div>

      {/* Rows */}
      {REDIRECTS.map((r, i) => (
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '1fr 60px 1fr 200px',
          padding: '14px 28px', alignItems: 'center',
          borderTop: `1px solid ${BRAND.line}`,
          background: i % 2 === 1 ? BRAND.bgSoft : 'transparent',
        }}>
          {/* From */}
          <code style={{
            fontFamily: BRAND.mono, fontSize: 14, color: BRAND.fg,
            wordBreak: 'break-all', lineHeight: 1.4,
          }}>{r.from}</code>

          {/* Arrow */}
          <div aria-hidden style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="44" height="12" viewBox="0 0 44 12" fill="none">
              <path d="M0 6 H34" stroke={BRAND.clay} strokeWidth="1.2"/>
              <path d="M30 1 L40 6 L30 11" stroke={BRAND.clay} strokeWidth="1.6"
                fill="none" strokeLinejoin="round" strokeLinecap="round"/>
            </svg>
          </div>

          {/* To */}
          <code style={{
            fontFamily: BRAND.mono, fontSize: 14, color: BRAND.fg,
            wordBreak: 'break-all', lineHeight: 1.4, fontWeight: 600,
          }}>{r.to}</code>

          {/* Notes */}
          <div style={{
            fontFamily: BRAND.sans, fontSize: 13, color: BRAND.fgSoft,
          }}>{r.note}</div>
        </div>
      ))}

      {/* Footer summary */}
      <div style={{
        padding: '14px 28px',
        borderTop: `1px solid ${BRAND.lineStrong}`,
        background: BRAND.bgSoft,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.4,
        color: BRAND.fgMuted,
      }}>
        <span>9 rule patterns · expands to ~1,400 individual redirects at cutover</span>
        <span>imported via CSV at DNS swap</span>
      </div>
    </div>

    <div style={{
      marginTop: 28, 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,
      }}>SEO posture</span>
      The mapping above is the spec, not the implementation — at cutover we generate a per-URL CSV from a crawl of the current site, validate it against the rules, and import. Post-cutover, a 24-hour log scrape confirms 301s are firing on every legacy path before we report green.
    </div>
  </div>
);

Object.assign(window, { Redirects });