// The Problem — agitating the pain. Light mist canvas, stark two-column layout:
// narrative on the left, a red "failure register" of the symptom sentences on the right.
function Problem() {
  // Each entry is verbatim from the brief — rendered as a diagnostic register row.
  const failures = [
  { icon: 'users', text: 'Internal teams become politically entangled.' },
  { icon: 'split', text: 'Systems integrators point fingers.' },
  { icon: 'banknote', text: 'Redundant applications bleed cash.' },
  { icon: 'server-cog', text: 'Legacy mainframes hold critical business logic hostage.' },
  { icon: 'shield-alert', text: 'New AI initiatives create massive compliance exposure because there is no governance.' }];

  return (
    <section id="problem" className="fs-grid-bg-mist section" style={{ borderTop: '1px solid var(--fs-border)' }}>
      <div className="wrap">
        {/* full-width header */}
        <Reveal>
          <Eyebrow>The Problem</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h1)',
            lineHeight: 1.16, letterSpacing: '-0.015em', color: 'var(--fs-ink)', margin: '20px 0 0',
            maxWidth: 940, textWrap: 'balance'
          }}>
            Transformations do not fail because of bad code. They fail because of broken architecture.
          </h2>
        </Reveal>

        {/* balanced body row — narrative left, findings register right, tops aligned */}
        <div className="grid-2up" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.9fr)', gap: 56,
          alignItems: 'start', marginTop: 48
        }}>
          <Reveal>
            <p className="fs-body" style={{ marginTop: 0, fontSize: 'var(--fs-step-body-lg)', lineHeight: 1.75, color: 'var(--fs-fg-muted)' }}>
              Whether you are a Private Equity Operating Partner inheriting a post-merger IT disaster,
              or a CIO watching a multi-million dollar digital transformation grind to a halt, the
              root cause is rarely the developers.
            </p>

            {/* punchline — pulled large, gold rule */}
            <div style={{ marginTop: 28, paddingLeft: 22, borderLeft: '3px solid var(--fs-gold)' }}>
              <p style={{
                fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h3)',
                lineHeight: 1.3, color: 'var(--fs-ink)', margin: 0, letterSpacing: '-0.01em'
              }}>
                It is a fundamentally broken enterprise architecture.
              </p>
            </div>

            <p className="fs-body" style={{ marginTop: 28, fontSize: 'var(--fs-step-body-lg)', lineHeight: 1.75, color: 'var(--fs-fg-muted)' }}>
              You do not need another systems integrator. You need an objective, ruthless agent of
              change to stop the bleeding, cut the bloat, and engineer a <span className="fs-kw-resolved">scalable target state</span>.
            </p>
          </Reveal>

          {/* failure register */}
          <Reveal delay={120}>
            <div className="fs-card fs-card--risk" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '18px 24px', borderBottom: '1px solid var(--fs-border)', background: 'var(--fs-red-tint)'
              }}>
                <span className="fs-status fs-status--critical" style={{ border: 'none', background: 'transparent', padding: 0 }}>Current State · Critical</span>
                <DataTag style={{ color: 'var(--fs-red-deep)' }}>FINDINGS &middot; 05</DataTag>
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: '4px 0' }}>
                {failures.map((f, i) =>
                <li key={i} style={{
                  display: 'flex', gap: 16, alignItems: 'flex-start', padding: '17px 24px',
                  borderBottom: i < failures.length - 1 ? '1px solid var(--fs-border)' : 'none'
                }}>
                    <span style={{ color: 'var(--fs-red)', flex: 'none', marginTop: 1 }}><Icon name={f.icon} size={20} stroke={2} /></span>
                    <span style={{ fontFamily: 'var(--fs-font-body)', fontSize: 15, lineHeight: 1.5, color: 'var(--fs-fg)' }}>{f.text}</span>
                  </li>
                )}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}
Object.assign(window, { Problem });