// ============================================================================
// Principia White Paper — Layout primitives (document grammar)
// Section openers, prose, pull quotes, spec tables, service cards, compares.
// ============================================================================

const WP_MAXW = 1080;
const WP_TEXTW = 720;

// ───── Section — vertical rhythm + anchor ─────
function Section({ id, dark, children, style = {}, pad = '104px 0' }) {
  return (
    <section id={id} data-screen-label={id} style={{
      padding: pad,
      background: dark ? C_INK : 'transparent',
      color: dark ? '#fff' : C_INK,
      ...style,
    }}>
      <div style={{ maxWidth: WP_MAXW, margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        {children}
      </div>
    </section>
  );
}

// ───── SectionOpener — eyebrow number · double-rule · italic-tail heading ─────
function WpOpener({ num, label, title, italicTail, lede, dark }) {
  const ink = dark ? '#fff' : C_INK;
  const dim = dark ? 'rgba(255,255,255,0.6)' : C_MUTED;
  const rule = dark ? 'rgba(255,255,255,0.2)' : C_RULE;
  return (
    <header style={{ marginBottom: 52 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', rowGap: 4, lineHeight: 1.5 }}>
        <span style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_ACCENT, fontWeight: 600 }}>{num}</span>
        <span style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: dim }}>{label}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, width: 64, margin: '20px 0 22px' }}>
        <div style={{ height: 1, background: rule }} />
        <div style={{ height: 1, background: rule }} />
      </div>
      <h2 style={{
        fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(34px, 5vw, 52px)',
        lineHeight: 1.05, letterSpacing: '-0.02em', color: ink, margin: 0, maxWidth: 900,
      }}>
        {title}{italicTail && <> <em style={{ fontStyle: 'italic' }}>{italicTail}</em></>}
      </h2>
      {lede && <p style={{ fontFamily: FONT_SANS, fontSize: 19, lineHeight: 1.55, color: dim, maxWidth: WP_TEXTW, marginTop: 24 }}>{lede}</p>}
    </header>
  );
}

// ───── Prose paragraph ─────
function P({ children, dark, style = {} }) {
  return (
    <p style={{
      fontFamily: FONT_SANS, fontSize: 17.5, lineHeight: 1.62,
      color: dark ? 'rgba(255,255,255,0.78)' : '#33425C',
      maxWidth: WP_TEXTW, margin: '0 0 18px', ...style,
    }}>{children}</p>
  );
}

// ───── Pull quote — navy left rule, Fraunces ─────
function Pull({ children, dark }) {
  return (
    <blockquote style={{
      margin: '40px 0', paddingLeft: 28,
      borderLeft: `3px solid ${dark ? C_ACCENT : C_INK}`,
      maxWidth: 860,
    }}>
      <p style={{
        fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(22px, 2.6vw, 27px)',
        lineHeight: 1.34, letterSpacing: '-0.01em', color: dark ? '#fff' : C_INK, margin: 0,
      }}>{children}</p>
    </blockquote>
  );
}

// ───── Source caption ─────
function Source({ children, dark }) {
  return (
    <div style={{
      fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: dark ? 'rgba(255,255,255,0.45)' : C_MUTED, marginTop: 14, opacity: 0.9,
    }}>{children}</div>
  );
}

// ───── Spec table — desktop: grid rows · mobile: stacked cards ─────
function SpecTable({ head, rows, cols = '150px 1fr' }) {
  const mobile = useIsMobile(640);
  const __tracks = cols.trim().split(/\s+/).length;

  if (mobile) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map((r, i) => (
          <div key={i} style={{
            background: '#fff', border: `1px solid ${C_RULE}`, borderRadius: 12,
            padding: '18px 20px', boxShadow: '0 1px 2px rgba(10,31,61,0.04)',
          }}>
            <div style={{ fontFamily: FONT_SANS, fontSize: 15, fontWeight: 700, color: C_INK, lineHeight: 1.3, marginBottom: head && __tracks > 2 ? 12 : 6 }}>{r[0]}</div>
            {r.slice(1).map((cell, ci) => (
              <div key={ci} style={{ marginTop: ci > 0 ? 10 : 0 }}>
                {head && head[ci + 1] && (
                  <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: C_ACCENT, fontWeight: 600, marginBottom: 3 }}>{head[ci + 1]}</div>
                )}
                <div style={{ fontFamily: FONT_SANS, fontSize: 14, lineHeight: 1.5, color: '#3D4B63' }}>{cell}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="wp-scroll">
    <div style={{ border: `1px solid ${C_RULE}`, borderRadius: 12, overflow: 'hidden', background: '#fff', minWidth: __tracks >= 3 ? 640 : undefined }}>
      {head && (
        <div className="wp-keep" style={{ display: 'grid', gridTemplateColumns: cols, gap: 18, padding: '13px 22px', background: C_INK }}>
          {head.map((h, i) => (
            <div key={i} style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>{h}</div>
          ))}
        </div>
      )}
      {rows.map((r, i) => (
        <div key={i} className="wp-keep" style={{
          display: 'grid', gridTemplateColumns: cols, gap: 18, padding: '14px 22px',
          borderTop: i === 0 && !head ? 'none' : `1px solid ${C_RULE}`,
          background: i % 2 ? C_SURF2 : '#fff', alignItems: 'baseline',
        }}>
          {r.map((cell, ci) => (
            <div key={ci} style={{
              fontFamily: FONT_SANS, fontSize: 14, lineHeight: 1.5,
              fontWeight: ci === 0 ? 600 : 400,
              color: ci === 0 ? C_INK : '#3D4B63',
            }}>{cell}</div>
          ))}
        </div>
      ))}
    </div>
    </div>
  );
}

// ───── KPI strip — hero stat cards ─────
function KpiStrip({ items, dark }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: 1, background: dark ? 'rgba(255,255,255,0.12)' : C_RULE, border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : C_RULE}`, borderRadius: 12, overflow: 'hidden' }}>
      {items.map((it, i) => (
        <div key={i} style={{ background: dark ? C_INK : '#fff', padding: '24px 22px' }}>
          <div style={{ fontFamily: FONT_DISP, fontSize: 'clamp(28px,3.4vw,40px)', lineHeight: 1, letterSpacing: '-0.025em', color: it.tone || (dark ? '#fff' : C_INK) }}>{it.v}</div>
          <div style={{ fontFamily: FONT_SANS, fontSize: 12.5, lineHeight: 1.4, color: dark ? 'rgba(255,255,255,0.6)' : C_MUTED, marginTop: 10 }}>{it.l}</div>
        </div>
      ))}
    </div>
  );
}

// ───── Trend cards (3-up) ─────
function TrendCards({ items }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 18 }}>
      {items.map((it, i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${C_RULE}`, borderRadius: 12, padding: '26px 24px', boxShadow: '0 1px 2px rgba(10,31,61,0.04)' }}>
          {it.tag && <div style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: C_ACCENT, fontWeight: 600, marginBottom: 12 }}>{it.tag}</div>}
          <div style={{ fontFamily: FONT_SANS, fontSize: 17, fontWeight: 700, color: C_INK, lineHeight: 1.25, marginBottom: 9 }}>{it.t}</div>
          <div style={{ fontFamily: FONT_SANS, fontSize: 14, lineHeight: 1.55, color: '#46546D' }}>{it.d}</div>
        </div>
      ))}
    </div>
  );
}

// ───── Service line card (A–F) ─────
function ServiceCard({ letter, title, tag, rows, fee, market }) {
  return (
    <div style={{ background: '#fff', border: `1px solid ${C_RULE}`, borderRadius: 14, padding: '28px 28px 24px', boxShadow: '0 1px 2px rgba(10,31,61,0.04), 0 8px 24px rgba(10,31,61,0.04)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
        <div style={{ width: 40, height: 40, borderRadius: 9, background: C_INK, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONT_DISP, fontSize: 20, flexShrink: 0 }}>{letter}</div>
        <div>
          <div style={{ fontFamily: FONT_SANS, fontSize: 17, fontWeight: 700, color: C_INK, lineHeight: 1.2 }}>{title}</div>
          {tag && <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: C_MUTED, marginTop: 3 }}>{tag}</div>}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 13, flex: 1 }}>
        {rows.map((r, i) => (
          <div key={i}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: C_ACCENT, fontWeight: 600, marginBottom: 4 }}>{r[0]}</div>
            <div style={{ fontFamily: FONT_SANS, fontSize: 13.5, lineHeight: 1.5, color: '#33425C' }}>{r[1]}</div>
          </div>
        ))}
      </div>
      {(fee || market) && (
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${C_RULE}`, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12 }}>
          {fee && <div><div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: C_MUTED }}>Fee</div><div style={{ fontFamily: FONT_SANS, fontSize: 15, fontWeight: 700, color: C_INK, marginTop: 2 }}>{fee}</div></div>}
          {market && <div style={{ textAlign: 'right' }}><div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: C_MUTED }}>Market</div><div style={{ fontFamily: FONT_SANS, fontSize: 13.5, fontWeight: 600, color: C_ACCENT, marginTop: 2 }}>{market}</div></div>}
        </div>
      )}
    </div>
  );
}

// ───── Compare columns — TODAY vs OUR MODEL ─────
function CompareCols({ today, ours }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(300px, 100%), 1fr))', gap: 20 }}>
      <div style={{ background: C_SURF2, border: `1px solid ${C_RULE}`, borderRadius: 14, padding: 'clamp(18px, 3vw, 26px)' }}>
        <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_DANGER, fontWeight: 600, marginBottom: 16 }}>{today.title || 'Today'}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {today.rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, fontFamily: FONT_SANS, fontSize: 14, color: '#46546D', lineHeight: 1.4 }}>
              <span style={{ color: C_DANGER, flexShrink: 0, fontWeight: 700 }}>—</span><span>{r}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ background: '#fff', border: `1.5px solid ${C_INK}`, borderRadius: 14, padding: 'clamp(18px, 3vw, 26px)', boxShadow: '0 8px 28px rgba(10,31,61,0.08)' }}>
        <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_SUCCESS, fontWeight: 600, marginBottom: 16 }}>{ours.title || 'Our model'}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {ours.rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, fontFamily: FONT_SANS, fontSize: 14, color: C_INK, lineHeight: 1.4, fontWeight: 500 }}>
              <span style={{ color: C_SUCCESS, flexShrink: 0, fontWeight: 700 }}>✓</span><span>{r}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ───── Figure block with generous top margin (wraps Figure for spacing) ─────
function Fig(props) {
  return <div style={{ margin: '40px 0 8px' }}><Figure {...props} /></div>;
}

Object.assign(window, {
  WP_MAXW, WP_TEXTW,
  Section, WpOpener, P, Pull, Source, SpecTable, KpiStrip, TrendCards, ServiceCard, CompareCols, Fig,
});