function Problem() {
  const items = window.FOREMAN.problems;
  return (
    <section style={{
      paddingTop: 96, paddingBottom: 96,
      borderTop: '1px solid var(--line)',
      background: 'var(--paper)',
    }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/01 &nbsp; The job</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Most strategic advice dies in the gap between knowing and doing.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 700, lineHeight: 1.5 }}>
              You don&rsquo;t need more frameworks. You need one that fits this Tuesday&rsquo;s problem, applied to your numbers, with a follow-up next week.
            </p>
          </div>
        </header>

        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
          border: '1px solid var(--line)',
          background: 'var(--paper)',
        }}>
          <div style={{ padding: '20px 28px', borderBottom: '1px solid var(--line)', borderRight: '1px solid var(--line)', background: 'var(--paper-2)' }}>
            <div className="eyebrow">Without Foreman</div>
          </div>
          <div style={{ padding: '20px 28px', borderBottom: '1px solid var(--line)', background: 'var(--paper-2)' }}>
            <div className="eyebrow">With Foreman</div>
          </div>
          {items.map((it, i) => (
            <React.Fragment key={i}>
              <div style={{
                padding: '24px 28px',
                borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none',
                borderRight: '1px solid var(--line)',
                fontSize: 17, color: 'var(--muted)', display: 'flex', gap: 14,
              }}>
                <span className="mono" style={{ color: 'var(--muted-2)', flexShrink: 0 }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(0,0,0,0.18)' }}>{it.without}</span>
              </div>
              <div style={{
                padding: '24px 28px',
                borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none',
                fontSize: 17, color: 'var(--ink)', display: 'flex', gap: 14, fontWeight: 500,
              }}>
                <span className="mono" style={{ color: 'var(--ink)', flexShrink: 0 }}>&rarr;</span>
                <span>{it.withF}</span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;