// Brand tokens — carried over from the previous project with small adjustments
// for long-form editorial reading (warmer ink, slightly looser rhythm).

const BRAND = {
  bg: '#FAFAF7',
  bgWarm: 'rgb(236, 232, 229)',   // palette.css whitesmoke
  bgSoft: 'rgb(236, 232, 229)',   // palette.css whitesmoke
  paper: '#FFFFFF',
  fg: 'rgb(45, 32, 30)',          // palette.css black (warm dark brown)
  fgSoft: 'rgba(45,32,30,0.68)',
  fgMuted: 'rgba(45,32,30,0.48)',
  fgFaint: 'rgba(45,32,30,0.28)',
  line: 'rgba(45,32,30,0.08)',
  lineStrong: 'rgba(45,32,30,0.14)',
  lineInk: 'rgba(45,32,30,0.22)',

  // Accents (semantic) — palette.css Homepage Colors
  clay: 'rgb(135, 62, 35)',       // sienna — primary accent
  claySoft: 'rgba(135,62,35,.10)',
  forest: 'rgb(80, 99, 74)',      // darkslategray (olive-leaning) — secondary
  forestSoft: 'rgba(80,99,74,.10)',
  ochre: 'rgb(191, 142, 59)',     // peru — tertiary
  ochreSoft: 'rgba(191,142,59,.12)',
  ink: 'rgb(45, 32, 30)',         // matches fg
  cream: 'rgb(194, 182, 169)',    // silver — paper-cream for gate / hero
  bone: 'rgb(194, 182, 169)',     // silver

  // Diagram palette — distinct hues kept in semantic, restrained range
  swim1: 'rgb(80, 99, 74)',       // forest — Browser / Client
  swim2: 'rgb(135, 62, 35)',      // clay — Shopify
  swim3: 'rgb(92, 126, 132)',     // slategray — Worker
  swim4: 'rgb(190, 142, 124)',    // rosybrown — Recharge

  // States
  warn: '#B45309',
  warnSoft: 'rgba(180,83,9,.10)',
  over: '#B91C1C',
  overSoft: 'rgba(185,28,28,.08)',
  steel: 'rgb(92, 126, 132)',     // slategray
  steelSoft: 'rgba(92,126,132,.12)',

  serif: '"Newsreader", "Tiempos Headline", Georgia, serif',
  sans: '"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif',
  mono: '"Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace',
};

const PlatterMark = ({ size = 28, rounded = 7 }) => (
  <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.platterMark) || 'assets/platter.png'}
    width={size} height={size} alt="Platter"
    style={{ borderRadius: rounded, display: 'block' }}/>
);

// Section header — mono eyebrow + big serif number + title
const SectionHeader = ({ num, eyebrow, title, children }) => (
  <header style={{ margin: '120px 0 32px', display: 'grid', gridTemplateColumns: '96px 1fr', gap: 24, alignItems: 'baseline' }}>
    <div style={{
      fontFamily: BRAND.serif, fontSize: 80, fontWeight: 300,
      lineHeight: 1, color: BRAND.fgFaint, letterSpacing: -2,
    }}>{num}</div>
    <div>
      <div style={{
        fontFamily: BRAND.mono, fontSize: 12, letterSpacing: 1.4,
        textTransform: 'uppercase', color: BRAND.fgMuted, marginBottom: 10,
      }}>{eyebrow}</div>
      <h2 style={{
        fontFamily: BRAND.serif, fontWeight: 400,
        fontSize: 52, lineHeight: 1.04, letterSpacing: -1.4,
        margin: 0, textWrap: 'balance',
      }}>{title}</h2>
      {children && <div style={{ marginTop: 18 }}>{children}</div>}
    </div>
  </header>
);

const Subhead = ({ children }) => (
  <h3 style={{
    fontFamily: BRAND.serif, fontWeight: 400,
    fontSize: 30, lineHeight: 1.2, letterSpacing: -0.6,
    margin: '56px 0 16px', textWrap: 'balance',
  }}>{children}</h3>
);

const P = ({ children, lede }) => (
  <p style={{
    fontFamily: BRAND.sans, fontSize: lede ? 22 : 18,
    lineHeight: lede ? 1.5 : 1.65, letterSpacing: lede ? -0.2 : 0,
    color: lede ? BRAND.fg : BRAND.fgSoft,
    margin: '0 0 20px', textWrap: 'pretty',
  }}>{children}</p>
);

const Strong = ({ children }) => (
  <strong style={{ color: BRAND.fg, fontWeight: 600 }}>{children}</strong>
);

const PullQuote = ({ children, attribution }) => (
  <figure style={{
    margin: '56px -48px', padding: '40px 48px',
    borderLeft: `2px solid ${BRAND.fg}`,
    background: BRAND.bgSoft,
  }}>
    <blockquote style={{
      margin: 0, fontFamily: BRAND.serif, fontWeight: 400,
      fontSize: 34, lineHeight: 1.25, letterSpacing: -0.8,
      color: BRAND.fg, textWrap: 'balance',
    }}>{children}</blockquote>
    {attribution && (
      <figcaption style={{
        marginTop: 18, fontFamily: BRAND.mono, fontSize: 12,
        letterSpacing: 1.2, textTransform: 'uppercase', color: BRAND.fgMuted,
      }}>{attribution}</figcaption>
    )}
  </figure>
);

// Inline numbered list with big serif numerals.
// Numerals sit on the same baseline as the first line of body text.
const NumberedList = ({ items }) => (
  <ol style={{ listStyle: 'none', padding: 0, margin: '28px 0', display: 'flex', flexDirection: 'column', gap: 22 }}>
    {items.map((it, i) => (
      <li key={i} style={{
        display: 'grid', gridTemplateColumns: '56px 1fr', columnGap: 18,
        alignItems: 'start',
      }}>
        <span style={{
          fontFamily: BRAND.serif, fontSize: 34, fontWeight: 300,
          color: BRAND.fgFaint, letterSpacing: -1,
          lineHeight: 1.55 * 18 / 34, // align numeral baseline to body's first line
        }}>{String(i + 1).padStart(2, '0')}</span>
        <div style={{ fontFamily: BRAND.sans, fontSize: 18, lineHeight: 1.55, color: BRAND.fgSoft }}>
          {it}
        </div>
      </li>
    ))}
  </ol>
);

// Bulleted list used inside section bodies.
// Bullet square is vertically centered to the first line of text via
// line-height matching, which keeps alignment correct even when items wrap.
const BList = ({ items }) => (
  <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
    {items.map((it, i) => (
      <li key={i} style={{
        display: 'grid', gridTemplateColumns: '14px 1fr', columnGap: 18,
        alignItems: 'start',
        fontFamily: BRAND.sans, fontSize: 18, lineHeight: 1.55, color: BRAND.fgSoft,
      }}>
        <span aria-hidden style={{
          width: 5, height: 5, background: BRAND.fg, borderRadius: 1,
          // center the 5px square on the first line's cap height
          marginTop: 'calc(0.55em)',
        }}/>
        <div>{it}</div>
      </li>
    ))}
  </ul>
);

// Full-bleed wrapper — breaks out of the narrow reading column.
// Horizontally scrollable inside so fixed-width figures (like the capacity
// diagram) never get clipped on narrower viewports.
const FullBleed = ({ children, bg = BRAND.bg, minInner = 1260 }) => (
  <div style={{
    margin: '96px calc(50% - 50vw) 96px',
    background: bg,
    overflowX: 'auto',
    WebkitOverflowScrolling: 'touch',
  }}>
    <div style={{ minWidth: minInner }}>{children}</div>
  </div>
);

Object.assign(window, { BRAND, PlatterMark, SectionHeader, Subhead, P, Strong, PullQuote, NumberedList, BList, FullBleed });