// Phase 3 — Sections. Earned Tenure positioning.
// Core modules: Thesis, Tenure (the asymmetry), Triggers, NinetyMin (proof),
// Economics, CFOs (practice), FinalCTA, Footer.

// ═══════════════════════════════════════════════════════════════
// 1. THESIS — first-person argument from the founder.
// Four careers (banker → consultant → 3× CFO → engineer) folded in as earned authority.
// The line "We don't replace CFOs. We rehouse them." — previously buried on About — anchors here.
// ═══════════════════════════════════════════════════════════════
const Thesis = () => (
  <section style={{ padding: '140px 0 160px', borderTop: '1px solid var(--line)', background: 'var(--paper-2)' }}>
    <Container>
      <SectionLabel idx="01" title="The thesis" />
      <div style={{ maxWidth: 980, margin: '24px auto 0' }}>
        <h2 style={{
          fontSize: 'clamp(52px, 6.4vw, 96px)', lineHeight: 1, letterSpacing: '-0.04em',
          fontWeight: 500, margin: '0 0 56px', textAlign: 'left',
        }}>
          We don't{' '}
          <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-3)' }}>replace</span>{' '}
          CFOs.<br />
          We{' '}
          <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>rehouse</span>{' '}
          them.
        </h2>

        <div style={{ fontSize: 20, lineHeight: 1.6, color: 'var(--ink-1)', letterSpacing: '-0.005em', maxWidth: 760, fontFamily: 'var(--font-serif)' }}>
          <p style={{ margin: '0 0 24px' }}>
            I've been the CFO of three growth-stage companies &mdash; through two acquisitions and an IPO filing. Before that I spent a decade across the table: modeling M&amp;A at Goldman, running corporate-finance engagements at McKinsey, sitting on whichever side of the room the round required.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            What I learned, running finance and watching dozens of others run it: the best CFOs aren't bottlenecked by judgment. They're bottlenecked by <em style={{ color: 'var(--accent)' }}>assembly</em>. Every month they rebuild the same deck, reconcile the same systems, re-answer the same board questions. Twenty years of pattern recognition is trapped under data wrangling an analyst could do &mdash; if an analyst ever stayed long enough to learn your chart of accounts.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            So I built Inflect as a practice, not a seat. A small bench of senior CFOs I've hand-picked &mdash; the kind of operators I'd have hired onto my own cap table &mdash; with a platform underneath them that handles the assembly and, more importantly, <em style={{ color: 'var(--accent)' }}>remembers</em>. Every threshold set, every narrative choice, every board preference, every scenario assumption. Their next hour with you starts where the last one ended, not from scratch.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Which means one senior CFO can carry a handful of companies at full fidelity &mdash; not the four-client ceiling most fractional practices hit. You get the tenure. We carry the load.
          </p>
          <p style={{ margin: '8px 0 0', fontSize: 26, lineHeight: 1.35, color: 'var(--ink-1)', fontStyle: 'italic' }}>
            The category is trying to replace expensive humans with software. We do the opposite: we take senior humans and give them a system that keeps up with them.
          </p>
          <p style={{ margin: '24px 0 0', fontSize: 13, color: 'var(--ink-3)', letterSpacing: '0.02em', fontFamily: 'var(--font-sans)', fontStyle: 'normal' }}>
            &mdash; Phil D., Founder &amp; CEO &middot; 3&times; CFO &middot; ex-Goldman &middot; ex-McKinsey &middot; MIT CS
          </p>
        </div>

        <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
          {[
            { h: 'Judgment stays human', b: 'The CFO calls every turn. The platform handles the other seventy hours.' },
            { h: 'Memory becomes portable', b: 'Every decision, variance, and board question is retained &mdash; and compounds.' },
            { h: 'Tenure is the product', b: 'You rent reps. Not a tool. Not a junior analyst dressed up as software.' },
          ].map(c => (
            <div key={c.h} style={{ background: 'var(--paper)', padding: 28 }}>
              <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.015em', marginBottom: 8 }}>{c.h}</div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: c.b }} />
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// ═══════════════════════════════════════════════════════════════
// 2. TENURE — the asymmetry, visualized. Junior AI vs senior + system.
// ═══════════════════════════════════════════════════════════════
const Tenure = () => (
  <section style={{ padding: '140px 0' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 60, alignItems: 'start' }}>
        <SectionLabel idx="02" title="The asymmetry" />
        <div>
          <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 500, margin: 0 }}>
            What you can't{' '}
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-3)' }}>train</span>,
            <br />and what you can.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 24, maxWidth: 620, lineHeight: 1.55 }}>
            A 20-year CFO has seen a dozen inflection points. A platform has perfect recall. Neither is enough alone &mdash; and neither is interchangeable with the other.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Human */}
        <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 36 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
            <div className="label" style={{ color: 'var(--accent)' }}>THE CFO · HUMAN</div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>20 yrs · irreplaceable</span>
          </div>
          <div style={{ fontSize: 24, fontFamily: 'var(--font-serif)', lineHeight: 1.25, letterSpacing: '-0.015em', color: 'var(--ink-1)', marginBottom: 28 }}>
            Judgment you can't train. Only earn.
          </div>
          <div style={{ display: 'grid', gap: 14 }}>
            {[
              ['When to hold EBITDA and let growth lead', 'Market context'],
              ['Which board member the narrative needs to land with', 'Audience read'],
              ['When a variance is signal and when it is noise', 'Pattern match'],
              ['The one slide the CEO shouldn\'t be asked about', 'Political instinct'],
              ['Whether to push the raise or hold', 'Timing intuition'],
              ['How to defend margin under a VC who wants growth', 'Negotiation'],
            ].map(([d, t]) => (
              <div key={d} style={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 20, padding: '10px 0', borderTop: '1px dashed var(--line)' }}>
                <span style={{ fontSize: 14, color: 'var(--ink-1)', letterSpacing: '-0.005em', lineHeight: 1.45 }}>{d}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase', textAlign: 'right' }}>{t}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Platform */}
        <div style={{ background: 'var(--ink-1)', color: 'var(--paper)', borderRadius: 14, padding: 36, position: 'relative', overflow: 'hidden' }}>
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.25,
            backgroundImage: 'radial-gradient(oklch(0.6 0.12 220 / 0.5) 1px, transparent 1px)',
            backgroundSize: '22px 22px',
            maskImage: 'radial-gradient(ellipse at 100% 0%, #000, transparent 60%)',
            WebkitMaskImage: 'radial-gradient(ellipse at 100% 0%, #000, transparent 60%)',
          }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
              <div className="label" style={{ color: 'var(--accent)' }}>THE PLATFORM · SYSTEM</div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.72 0.006 240)' }}>perfect recall</span>
            </div>
            <div style={{ fontSize: 24, fontFamily: 'var(--font-serif)', lineHeight: 1.25, letterSpacing: '-0.015em', color: 'var(--paper)', marginBottom: 28 }}>
              The things humans forget. Remembered.
            </div>
            <div style={{ display: 'grid', gap: 14 }}>
              {[
                ['Every variance threshold ever set', 'Config memory'],
                ['Every board member\'s preferred metric cut', 'Audience memory'],
                ['Every scenario assumption from the last 18 months', 'Scenario memory'],
                ['Every chart of accounts quirk, normalized', 'Data memory'],
                ['The exact wording the CEO uses in narratives', 'Voice memory'],
                ['Every question a VC asked, and how it was answered', 'Q&A memory'],
              ].map(([d, t]) => (
                <div key={d} style={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 20, padding: '10px 0', borderTop: '1px dashed oklch(0.3 0.01 240)' }}>
                  <span style={{ fontSize: 14, color: 'var(--paper)', letterSpacing: '-0.005em', lineHeight: 1.45 }}>{d}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em', textTransform: 'uppercase', textAlign: 'right' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 40, padding: '28px 36px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40 }}>
        <div style={{ fontSize: 17, fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-1)', letterSpacing: '-0.01em' }}>
          The wedge isn't replacing the CFO. It's giving the CFO a system that keeps up with them.
        </div>
        <a href="/how-it-works" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em', textDecoration: 'none', whiteSpace: 'nowrap' }}>
          HOW IT WORKS →
        </a>
      </div>
    </Container>
  </section>
);

// ═══════════════════════════════════════════════════════════════
// 3. TRIGGERS — adapted from d1, rewritten with tenure framing
// ═══════════════════════════════════════════════════════════════
const TRIGGERS = [
  { time: '03:17 · SUN',   copy: "Board Monday. Deck's not done. NRR's about to get questioned." },
  { time: '14:41 · TUE',   copy: "A VC wants CAC payback by channel. You've never cut it that way." },
  { time: '09:12 · THU',   copy: "Raising prices 15%. Nobody can tell you what it does to gross margin." },
  { time: '16:58 · MON',   copy: "Gross margin fell 400 bps. No one on your team can say why." },
  { time: 'QTR-END',       copy: "Twelve portcos. Twelve formats. Re-underwriting is due Friday." },
  { time: '23:47 · WED',   copy: "Four fractional clients. A fifth breaks you." },
];

const ANSWERS = [
  { headline: '14-slide deck · Sunday 9am', sub: 'NRR bridge with cohort detail. Narrative in your voice. You present Monday, rested.' },
  { headline: 'CAC by channel · 2-page memo', sub: 'Paid 18mo · outbound 11mo · partner 6mo. Sourcing bias flagged.' },
  { headline: '+15% scenario · delivered in 4h', sub: 'GM → 74% in 90d · −2% churn risk. Side-by-side with base case.' },
  { headline: 'GM deep-dive · 1 page + appendix', sub: 'Three drivers: hosting renegotiation, FX, one-time CS onboarding.' },
  { headline: 'Portco pack · 12 companies, 1 format', sub: 'Re-underwritten from source data. Covenants checked. Asks highlighted.' },
  { headline: 'White-label package · client #5', sub: 'Your brand on the cover. Inflect does the compute, you keep the relationship.' },
];

const Triggers = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ padding: '140px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--line)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 60, alignItems: 'start' }}>
          <SectionLabel idx="03" title="The moment clients arrive" />
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 500, margin: 0 }}>
              Tenure shows up{' '}
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-3)' }}>the night</span>
              <br />everything breaks.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 24, maxWidth: 560, lineHeight: 1.55 }}>
              Every client we work with came in from one of these moments. Which one is yours?
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'start' }}>
          <div>
            {TRIGGERS.map((t, i) => (
              <div key={i} onMouseEnter={() => setActive(i)} style={{
                padding: '20px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)',
                cursor: 'pointer', opacity: active === i ? 1 : 0.5,
                transition: 'opacity .2s ease',
              }}>
                <div className="label" style={{ color: active === i ? 'var(--accent)' : 'var(--ink-3)', marginBottom: 8 }}>
                  {String(i + 1).padStart(2, '0')} · {t.time}
                </div>
                <div style={{ fontSize: 17, letterSpacing: '-0.01em', lineHeight: 1.4, color: 'var(--ink-1)' }}>{t.copy}</div>
              </div>
            ))}
          </div>

          <div style={{
            position: 'sticky', top: 100,
            background: 'var(--ink-1)', color: 'var(--paper)', borderRadius: 14,
            padding: 40, minHeight: 520, overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32, paddingBottom: 20, borderBottom: '1px solid oklch(0.3 0.01 240)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.72 0.006 240)', letterSpacing: '0.1em' }}>SAMPLE ANSWER</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)' }}>● signed by a senior CFO</div>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.72 0.006 240)', letterSpacing: '0.06em', marginBottom: 14 }}>
              {TRIGGERS[active].time}
            </div>
            <div style={{ fontSize: 26, fontFamily: 'var(--font-serif)', lineHeight: 1.2, color: 'var(--paper)', marginBottom: 32, letterSpacing: '-0.01em' }}>
              "{TRIGGERS[active].copy}"
            </div>
            <div style={{ background: 'oklch(0.24 0.01 240)', borderRadius: 10, padding: 22 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', marginBottom: 12 }}>
                ▸ WHAT COMES BACK
              </div>
              <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--paper)', marginBottom: 6, letterSpacing: '-0.01em' }}>{ANSWERS[active].headline}</div>
              <div style={{ fontSize: 13, color: 'oklch(0.82 0.005 240)', lineHeight: 1.5 }}>{ANSWERS[active].sub}</div>
            </div>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px dashed oklch(0.3 0.01 240)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.72 0.006 240)' }}>
              <span>Inflect · CFO signs it</span>
              <a href="/sample" style={{ color: 'var(--accent)', textDecoration: 'none' }}>See the full package →</a>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════
// 4. NINETY MIN — kept as proof point, not as headline
// ═══════════════════════════════════════════════════════════════
const NinetyMin = () => {
  const steps = [
    { l: 'Data ingestion', t: 3, sub: 'QuickBooks, Xero, CSV. Read-only.' },
    { l: 'Account mapping', t: 2, sub: 'CoA normalized to standard structure.' },
    { l: 'Metric computation', t: 1, sub: 'ARR, NRR, burn, R40, CAC, GM.' },
    { l: 'Variance detection', t: 4, sub: 'Against thresholds your CFO set.' },
    { l: 'Narrative generation', t: 8, sub: '5 commentary streams in parallel.' },
    { l: 'Package assembly', t: 2, sub: 'PDF + PPTX in your board format.' },
    { l: 'CFO review + judgment', t: 70, sub: 'The seventy minutes you hired them for.', human: true },
  ];
  const total = steps.reduce((s, x) => s + x.t, 0);
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      setProgress(Math.max(0, Math.min(1, (vh - r.top) / (vh + r.height * 0.4))));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section style={{ padding: '140px 0', borderTop: '1px solid var(--line)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 60, alignItems: 'start' }}>
          <SectionLabel idx="04" title="How the work gets done" />
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 500, margin: 0 }}>
              Twenty minutes of compute.{' '}
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>Seventy minutes of judgment.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 24, maxWidth: 620, lineHeight: 1.55 }}>
              The split isn't a demo flourish. It's the whole thesis. The platform handles the 70 minutes of assembly a junior analyst used to cost you &mdash; so your CFO spends their hour on the call with your board, not rebuilding the deck at 11pm the night before.
            </p>
          </div>
        </div>

        <div ref={ref} style={{ background: 'var(--paper-2)', borderRadius: 14, padding: 32 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr 80px', gap: 20, alignItems: 'center' }}>
            {steps.map((s, i) => {
              const startT = steps.slice(0, i).reduce((x, y) => x + y.t, 0);
              const pct = (s.t / total) * 100;
              const startPct = (startT / total) * 100;
              const stepStart = i / steps.length;
              const stepEnd = (i + 1) / steps.length;
              const local = Math.max(0, Math.min(1, (progress - stepStart) / (stepEnd - stepStart)));
              const revealWidth = pct * local;
              return (
                <React.Fragment key={s.l}>
                  <div style={{ opacity: 0.3 + local * 0.7, transition: 'opacity .3s ease' }}>
                    <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em' }}>{s.l}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{s.sub}</div>
                  </div>
                  <div style={{ position: 'relative', height: 28 }}>
                    <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'var(--line)', transform: 'translateY(-50%)' }}/>
                    <div style={{
                      position: 'absolute', top: 4, left: `${startPct}%`, width: `${revealWidth}%`, height: 20,
                      background: s.human ? 'var(--ink-1)' : 'var(--accent)',
                      borderRadius: 3,
                    }}/>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: s.human ? 'var(--ink-1)' : 'var(--accent)', textAlign: 'right', fontWeight: 500, opacity: local }}>
                    {Math.round(s.t * local)} min
                  </div>
                </React.Fragment>
              );
            })}
          </div>
          <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px dashed var(--line)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
            <span>Platform · 20 min · <span style={{ color: 'var(--accent)' }}>■</span></span>
            <span>CFO · 70 min · <span style={{ color: 'var(--ink-1)' }}>■</span></span>
            <span style={{ color: 'var(--ink-1)', fontWeight: 500 }}>Total · 90 min</span>
          </div>
        </div>
      </Container>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════
// 5. ECONOMICS — slightly reframed: not "one-sixth the cost" but "tenure per dollar"
// ═══════════════════════════════════════════════════════════════
const Economics = () => (
  <section style={{ padding: '140px 0', background: 'var(--ink-1)', color: 'var(--paper)' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 60, alignItems: 'start' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.7 0.005 240)', letterSpacing: '0.1em' }}>05</span>
          <span style={{ height: 1, width: 28, background: 'oklch(0.6 0.01 240)' }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--paper)', letterSpacing: '0.12em' }}>THE ECONOMICS</span>
        </div>
        <div>
          <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 500, margin: 0, color: 'var(--paper)' }}>
            Senior tenure.{' '}
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>One-sixth</span>{' '}
            the cost.
          </h2>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div style={{ background: 'oklch(0.24 0.01 240)', borderRadius: 14, padding: 40 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.72 0.006 240)', letterSpacing: '0.1em', marginBottom: 16 }}>HIRE A FULL-TIME CFO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', color: 'oklch(0.85 0.005 240)' }}>
            $33,000<span style={{ fontSize: 20, color: 'oklch(0.6 0.006 240)' }}>/mo</span>
          </div>
          <div style={{ fontSize: 14, color: 'oklch(0.72 0.006 240)', marginTop: 4 }}>All-in: salary + benefits + equity</div>
          <div style={{ marginTop: 32, display: 'grid', gap: 12 }}>
            {['$200K–$300K base salary', '30–60% bonus', '3–6 months to hire', '12+ month commitment', 'Equity dilution', 'One person, one head of judgment'].map(x => (
              <div key={x} style={{ fontSize: 14, color: 'oklch(0.82 0.005 240)', display: 'flex', gap: 12, alignItems: 'center' }}>
                <span style={{ color: 'oklch(0.55 0.01 240)' }}>—</span>{x}
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: 'var(--paper)', color: 'var(--ink-1)', borderRadius: 14, padding: 40, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 24, right: 24 }}><Pill tone="accent">83% less</Pill></div>
          <div className="label" style={{ marginBottom: 16 }}>INFLECT</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em' }}>
            $5,500<span style={{ fontSize: 20, color: 'var(--ink-3)' }}>/mo</span>
          </div>
          <div style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 4 }}>Month-to-month. First package free.</div>
          <div style={{ marginTop: 32, display: 'grid', gap: 12 }}>
            {[
              'A senior CFO with 20+ years of reps',
              'A platform that remembers every one of them',
              'Board-ready monthly package',
              'First delivery in 48 hours',
              'Month-to-month contract',
              'Judgment that compounds inside the system',
            ].map(x => (
              <div key={x} style={{ fontSize: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3 3 7-7" stroke="var(--accent)" strokeWidth="1.8" fill="none"/></svg>
                {x}
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px dashed var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>See the deliverable before you decide.</div>
            <BtnPrimary>See sample <Arrow /></BtnPrimary>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'oklch(0.3 0.01 240)', border: '1px solid oklch(0.3 0.01 240)', borderRadius: 12, overflow: 'hidden' }}>
        {[
          { k: '48h', u: 'first delivery' },
          { k: '90', u: 'min per package' },
          { k: '1', u: 'senior CFO signs it' },
          { k: '0', u: 're-onboarding, ever' },
        ].map(m => (
          <div key={m.k} style={{ background: 'var(--ink-1)', padding: '36px 32px' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--paper)' }}>{m.k}</div>
            <div style={{ fontSize: 13, color: 'oklch(0.7 0.005 240)', marginTop: 4 }}>{m.u}</div>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

// ═══════════════════════════════════════════════════════════════
// 6. THE PRACTICE — CEO + Bench.
// Left card: Phil as Founder & CEO — asymmetric credential, escalation point,
// NOT the CFO of record. Right card: the senior-CFO bench — redacted-but-filled
// seats (real operators, names held under NDA until launch).
// ═══════════════════════════════════════════════════════════════
const CFOs = () => (
  <section style={{ padding: '140px 0', borderTop: '1px solid var(--line)' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 60, alignItems: 'start' }}>
        <SectionLabel idx="06" title="The practice" />
        <div>
          <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 500, margin: 0 }}>
            A senior CFO on your account.{' '}
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>A three-time CFO behind them.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 24, maxWidth: 680, lineHeight: 1.55 }}>
            The CFO of record is one of a small, hand-picked bench of senior operators. Phil D. &mdash; founder &amp; CEO &mdash; sets the bar, picks the match, and stays the escalation point when your engagement needs a call that only a three-time CFO can make.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 24 }}>
        {/* Phil — Founder & CEO card. Asymmetric credential, not the CFO of record. */}
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, padding: 40, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: 'var(--accent)', marginBottom: 24 }}>FOUNDER &amp; CEO</div>

          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 24, marginBottom: 28 }}>
            <div style={{
              width: 140, height: 180,
              background: `repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, var(--paper-3) 10px, var(--paper-3) 20px)`,
              border: '1px solid var(--line)', borderRadius: 8,
              display: 'flex', alignItems: 'flex-end', padding: 8,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-3)', background: 'var(--paper)', padding: '2px 6px', borderRadius: 2, border: '1px solid var(--line)' }}>PORTRAIT</span>
            </div>

            <div>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.05 }}>Phil D.</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4, fontStyle: 'italic', fontFamily: 'var(--font-serif)', lineHeight: 1.4 }}>
                Twenty-two years across banking, consulting, and running finance.
              </div>

              {/* Credential stack — the asymmetric bit */}
              <div style={{ marginTop: 20, display: 'grid', gap: 8 }}>
                {[
                  ['3×', 'President & CFO', 'SaaS · AI · crypto'],
                  ['GS', 'Goldman Sachs', 'M&A'],
                  ['McK', 'McKinsey', 'Corporate finance'],
                  ['MIT', 'MIT', 'MS, Computer Science'],
                ].map(([k, l, s]) => (
                  <div key={k} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 10, alignItems: 'baseline' }}>
                    <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-1)', letterSpacing: '-0.02em', lineHeight: 1 }}>{k}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>
                      <span style={{ fontWeight: 500, color: 'var(--ink-1)' }}>{l}</span>
                      <span style={{ color: 'var(--ink-3)' }}> · {s}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* What Phil actually does on an engagement */}
          <div style={{ paddingTop: 24, borderTop: '1px solid var(--line)', marginTop: 'auto' }}>
            <div className="label" style={{ marginBottom: 14 }}>What you get Phil for</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {[
                'The hard board conversation',
                'The raise that isn\'t going according to plan',
                'The acquirer who is suddenly getting weird',
                'The strategic call nobody else on your cap table has made before',
              ].map(x => (
                <div key={x} style={{ display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10, fontSize: 14, color: 'var(--ink-1)', letterSpacing: '-0.005em', lineHeight: 1.5 }}>
                  <span style={{ color: 'var(--accent)', paddingTop: 3, fontFamily: 'var(--font-mono)', fontSize: 12 }}>▸</span>
                  {x}
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px dashed var(--line)', fontSize: 13, color: 'var(--ink-3)', fontStyle: 'italic', fontFamily: 'var(--font-serif)' }}>
              Included on every engagement. Not billed hourly. Not gated behind an upgrade tier.
            </div>
          </div>
        </div>

        {/* The bench — filled-but-redacted seats */}
        <div style={{ background: 'var(--ink-1)', color: 'var(--paper)', borderRadius: 14, padding: 40, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.25,
            backgroundImage: 'radial-gradient(oklch(0.6 0.12 220 / 0.5) 1px, transparent 1px)',
            backgroundSize: '22px 22px',
            maskImage: 'radial-gradient(ellipse at 100% 0%, #000, transparent 60%)',
            WebkitMaskImage: 'radial-gradient(ellipse at 100% 0%, #000, transparent 60%)',
          }}/>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
              <div className="label" style={{ color: 'var(--accent)' }}>THE CFO BENCH</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'oklch(0.7 0.005 240)', letterSpacing: '0.08em' }}>NAMES HELD UNDER NDA</div>
            </div>

            <div style={{ fontSize: 22, fontFamily: 'var(--font-serif)', fontStyle: 'italic', lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--paper)', marginBottom: 28, maxWidth: 480 }}>
              Senior operators Phil hand-picked. Each one has closed a round, sat through an exit, or handed an auditor a clean file &mdash; at least once.
            </div>

            {/* The seats — real operators, names redacted */}
            <div style={{ display: 'grid', gap: 10, marginBottom: 24 }}>
              {[
                { idx: '01', sector: 'SaaS · PLG + enterprise', reps: '2 exits · 1 IPO filing', yrs: '18 yrs' },
                { idx: '02', sector: 'PE-backed · roll-ups', reps: '5 close cycles · 12 portcos', yrs: '21 yrs' },
                { idx: '03', sector: 'AI infra · deep tech', reps: '1 Series D · 2 acquisitions', yrs: '16 yrs' },
                { idx: '04', sector: 'Consumer · DTC + marketplace', reps: '1 exit · 3 priced rounds', yrs: '17 yrs' },
              ].map(c => (
                <div key={c.idx} style={{
                  display: 'grid', gridTemplateColumns: '56px 1fr auto', gap: 14, alignItems: 'center',
                  padding: '14px 16px', background: 'oklch(0.24 0.01 240)', borderRadius: 8,
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 4,
                    background: `repeating-linear-gradient(135deg, oklch(0.3 0.01 240), oklch(0.3 0.01 240) 6px, oklch(0.26 0.01 240) 6px, oklch(0.26 0.01 240) 12px)`,
                    border: '1px solid oklch(0.34 0.01 240)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 9, color: 'oklch(0.6 0.01 240)', letterSpacing: '0.06em',
                  }}>CFO</div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--paper)', letterSpacing: '-0.005em' }}>
                      Seat {c.idx} <span style={{ color: 'oklch(0.72 0.006 240)', fontWeight: 400 }}>&middot; {c.sector}</span>
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.06em', marginTop: 3 }}>
                      {c.reps.toUpperCase()}
                    </div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'oklch(0.82 0.005 240)', letterSpacing: '0.04em' }}>{c.yrs}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px dashed oklch(0.3 0.01 240)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
              <div style={{ fontSize: 13, color: 'oklch(0.82 0.005 240)', letterSpacing: '-0.005em' }}>
                Phil matches you to the seat. You meet your CFO before signing.
              </div>
              <a href="/roster" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em', textDecoration: 'none', whiteSpace: 'nowrap' }}>THE PRACTICE →</a>
            </div>
          </div>
        </div>
      </div>

      {/* Footnote — invitation to CFOs, kept quiet */}
      <div style={{ marginTop: 24, padding: '18px 24px', background: 'var(--paper-2)', border: '1px dashed var(--line)', borderRadius: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 13, color: 'var(--ink-2)', letterSpacing: '-0.005em' }}>
          Senior CFO reading this? Inflect adds a seat at the pace senior operators clear the bar.
        </div>
        <a href="/roster#apply" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em', textDecoration: 'none' }}>APPLY TO THE BENCH →</a>
      </div>
    </Container>
  </section>
);

// ═══════════════════════════════════════════════════════════════
// 7. FINAL CTA + FOOTER
// ═══════════════════════════════════════════════════════════════
const FinalCTA = () => (
  <section style={{ padding: '160px 0', textAlign: 'center', borderTop: '1px solid var(--line)' }}>
    <Container>
      <div className="label" style={{ letterSpacing: '0.14em', marginBottom: 28 }}>NO DEMO REQUIRED</div>
      <h2 style={{ fontSize: 'clamp(44px, 6vw, 88px)', lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 500, margin: 0, maxWidth: 1000, marginInline: 'auto' }}>
        See what a{' '}
        <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>senior CFO</span>
        {' '}ships.
      </h2>
      <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 28, maxWidth: 580, marginInline: 'auto', lineHeight: 1.5 }}>
        A real, anonymized monthly finance package. Your inbox. No sales call.
      </p>
      <div style={{ marginTop: 40, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <BtnPrimary>See a sample package <Arrow /></BtnPrimary>
        <BtnGhost>Talk to a CFO</BtnGhost>
      </div>
    </Container>
  </section>
);

const Footer = () => (
  <footer style={{ padding: '60px 0 40px', background: 'var(--paper)', borderTop: '1px solid var(--line)' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid var(--line)' }}>
        <div>
          <div style={{ color: 'var(--ink-1)' }}>{WORDMARK_SVG}</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontStyle: 'italic', color: 'var(--ink-2)', maxWidth: 320, marginTop: 14, lineHeight: 1.3 }}>
            Senior tenure. Magnified by a system that remembers.
          </div>
        </div>
        {[
          { h: 'Product', links: [['How it works', '/how-it-works'], ['Pricing', '/pricing'], ['Sample package', '/sample'], ['Writing', '/writing']] },
          { h: 'For',     links: [['CEOs', '/ceos'], ['PE / Portcos', '/pe'], ['Fractional CFOs', '/cfos']] },
          { h: 'Company', links: [['About', '/about'], ['FAQ', '/faq'], ['Contact', '/contact']] },
          { h: 'Legal',   links: [['Privacy', '#'], ['Terms', '#'], ['Security', '#']] },
        ].map(col => (
          <div key={col.h}>
            <div className="label" style={{ marginBottom: 14 }}>{col.h}</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {col.links.map(([l, h]) => <a key={l} href={h} style={{ fontSize: 13, textDecoration: 'none', color: 'var(--ink-2)' }}>{l}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
        <span>© 2026 Inflect · All rights reserved</span>
        <span>Built in California · US-hosted infrastructure</span>
      </div>
    </Container>
  </footer>
);

Object.assign(window, { Thesis, Tenure, Triggers, NinetyMin, Economics, CFOs, FinalCTA, Footer });
