// The Methodology — light slate canvas, three columns with gold 01/02/03 markers.
const FS_METHOD = [
  {
    n: '01', title: 'Systemic Triage', range: 'Days 1–14',
    body: 'I bypass internal politics to conduct an unvarnished forensic audit of your architecture, legacy systems, and inflight projects. I identify the critical failure points and immediate financial leaks.',
  },
  {
    n: '02', title: 'The Rationalization Blueprint', range: 'Days 15–30',
    body: 'I deliver a ruthless, objective path to green. This includes dictating exactly which redundant systems to kill, which legacy platforms to quarantine, and how to restructure vendor integrations.',
  },
  {
    n: '03', title: 'Execution & Governance', range: 'Ongoing',
    body: 'I establish the Target State Architecture and serve as the Interim Chief Architect to enforce it. I act as the "bad cop," forcing internal teams and external vendors to execute the blueprint without emotional attachment to old systems.',
  },
];

function Methodology() {
  return (
    <section id="methodology" className="fs-grid-bg-slate section" style={{ borderTop: '1px solid var(--fs-border)', borderBottom: '1px solid var(--fs-border)' }}>
      <div className="wrap">
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
            <div style={{ maxWidth: 640 }}>
              <Eyebrow>The Methodology</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h2)',
                lineHeight: 1.18, letterSpacing: '-0.01em', color: 'var(--fs-ink)', margin: '18px 0 0',
              }}>
                The Turnaround Methodology
              </h2>
              <p style={{
                fontFamily: 'var(--fs-font-body)', fontSize: 'var(--fs-step-body-lg)', lineHeight: 1.7,
                color: 'var(--fs-fg-muted)', margin: '18px 0 0', textWrap: 'pretty',
              }}>
                I do not sell theoretical frameworks or endless consulting hours. I operate in highly
                focused, outcome-driven sprints.
              </p>
            </div>
            <DataTag style={{ color: 'var(--fs-indigo-200)' }}>SEQUENCE &middot; 01 → 03</DataTag>
          </div>
        </Reveal>

        <div className="method-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 56, borderTop: '2px solid var(--fs-gold)' }}>
          {FS_METHOD.map((p, i) => (
            <Reveal key={p.n} delay={i * 100} as="div" style={{
              background: 'var(--fs-surface)', padding: '34px 32px 36px',
              borderRight: i < 2 ? '1px solid var(--fs-border)' : 'none',
              boxShadow: 'var(--fs-shadow-sm)',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22 }}>
                <span style={{
                  fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1,
                  color: 'var(--fs-gold)', letterSpacing: '0.02em', fontVariantNumeric: 'tabular-nums',
                }}>{p.n}</span>
                <span style={{
                  fontFamily: 'var(--fs-font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
                  textTransform: 'uppercase', color: 'var(--fs-fg-soft)', border: '1px solid var(--fs-border-strong)',
                  padding: '5px 10px', borderRadius: 'var(--fs-radius-sm)', whiteSpace: 'nowrap',
                }}>{p.range}</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h3)',
                lineHeight: 1.25, color: 'var(--fs-ink)', margin: '0 0 14px',
              }}>{p.title}</h3>
              <p style={{ fontFamily: 'var(--fs-font-body)', fontSize: 15, lineHeight: 1.65, color: 'var(--fs-fg-muted)', margin: 0 }}>{p.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Methodology });