// Phase 3 — Hero + Provenance
// H1: the plain sentence. Subhead: the three artifacts (round / exit / audit).
// Motion: a quiet typographic set-on — H1 lines arrive sequentially, then the italic
// phrase arrives last and a thin rule draws under it. No marketing-y hero animation;
// just typography that announces itself with care, then holds still.

const Hero = () => {
  const [monthIdx, setMonthIdx] = React.useState(11); // "Memory" — scrubs across 12 months
  const [step, setStep] = React.useState(0); // 0..3 — typographic set-on

  React.useEffect(() => {
    const timers = [
      setTimeout(() => setStep(1), 150),  // line 1: "Senior CFOs."
      setTimeout(() => setStep(2), 600),  // line 2: "Rented by the month."
      setTimeout(() => setStep(3), 1150), // rule draws under the italic
    ];
    return () => timers.forEach(clearTimeout);
  }, []);

  // The "Memory" panel — a running journal of one CFO relationship across 12 months.
  // Renamed from "Book" (overloaded word) to "Memory" (what the thing actually is).
  const MEMORY = [
    { m: 'M01', d: 'Set variance threshold at ±4% for gross margin; CEO wants fewer false positives than last firm.' },
    { m: 'M01', d: 'Board prefers "Rule of 40" over "magic number" — lead with R40 in exec summary.' },
    { m: 'M02', d: 'Narrative voice: direct, no hedging. "Here\'s what happened" over "we observed that."' },
    { m: 'M03', d: 'Re-underwriting assumption: NRR 112% held across last 6 cohorts; raise base case.' },
    { m: 'M04', d: 'CAC payback by channel requested by Benchmark; keep this cut standing.' },
    { m: 'M05', d: 'Price experiment ran +14% ARR, −0.8pp logo retention. Flagged to watch.' },
    { m: 'M06', d: 'Hosting renegotiation saved $42K/mo; bake into forward burn.' },
    { m: 'M07', d: 'CFO recommendation: push Series B six months; runway tolerates it cleanly.' },
    { m: 'M08', d: 'New cohort definition — exclude <$5K ACV from NRR for board-facing view.' },
    { m: 'M09', d: 'Strategic context: Fed rate hold changes debt-vs-equity math for the raise.' },
    { m: 'M10', d: 'Lender covenant check — current ratio holds even in downside case.' },
    { m: 'M11', d: 'Board asked about AI tool spend category — isolated, tracked, $186K YTD.' },
    { m: 'M12', d: 'Judgment call: hold EBITDA-positive narrative; let growth story lead.' },
  ];

  const visible = MEMORY.slice(0, monthIdx + 1);

  // Shared styles for the set-on. Lines rise 12px and fade in.
  const lineIn = (on) => ({
    display: 'block',
    transform: on ? 'translateY(0)' : 'translateY(14px)',
    opacity: on ? 1 : 0,
    transition: 'transform .55s cubic-bezier(.2,.6,.2,1), opacity .55s ease',
  });

  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Container style={{ padding: '64px 32px 48px', position: 'relative' }}>
        {/* Grid backdrop */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px)',
          backgroundSize: '64px 64px',
          maskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)',
          pointerEvents: 'none', opacity: 0.7,
        }} />

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 28 }}>
              <Pill tone="accent">Senior fractional CFO · month to month</Pill>
            </div>

            <h1 style={{
              fontSize: 'clamp(56px, 6.6vw, 92px)', lineHeight: 0.98,
              letterSpacing: '-0.035em', margin: '0 0 28px', fontWeight: 500,
            }}>
              <span style={lineIn(step >= 1)}>Senior CFOs.</span>
              <span style={{ ...lineIn(step >= 2), display: 'inline-block', position: 'relative' }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>
                  Rented by the month.
                </span>
                {/* Thin rule drawing under the italic */}
                <span style={{
                  position: 'absolute', left: 0, bottom: '-6px', height: 2,
                  background: 'var(--accent)',
                  width: step >= 3 ? '100%' : '0%',
                  transition: 'width .9s cubic-bezier(.2,.6,.2,1)',
                  transformOrigin: 'left',
                }} />
              </span>
            </h1>

            <p style={{
              fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)',
              maxWidth: 580, margin: '0 0 20px', letterSpacing: '-0.005em',
              opacity: step >= 2 ? 1 : 0, transform: step >= 2 ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity .6s ease .2s, transform .6s ease .2s',
            }}>
              A CFO who's <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-1)' }}>closed the round</em>,{' '}
              <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-1)' }}>sat across from the acquirer</em>,{' '}
              and <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-1)' }}>handed the auditor a clean file</em> &mdash; on retainer, starting Monday.
            </p>
            <p style={{
              fontSize: 14, lineHeight: 1.55, color: 'var(--ink-3)',
              maxWidth: 580, margin: '0 0 32px', letterSpacing: '-0.005em',
              opacity: step >= 2 ? 1 : 0,
              transition: 'opacity .6s ease .35s',
            }}>
              Not a full-time hire. One senior CFO, split across a handful of companies, carrying each relationship at full fidelity &mdash; because a platform underneath them remembers everything and assembles the work.
            </p>

            <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
              <BtnPrimary>See a sample package <Arrow /></BtnPrimary>
              <a href="/roster" style={{ textDecoration: 'none' }}><BtnGhost>Meet the practice</BtnGhost></a>
            </div>

            {/* Founder line — Phil as the asymmetric credential *behind* the practice.
                He sets the bar and stays the escalation point. The CFO of record on
                an engagement is one of the senior operators on the bench. */}
            <div style={{ paddingTop: 28, borderTop: '1px solid var(--line)' }}>
              <div className="label" style={{ marginBottom: 12, color: 'var(--ink-3)' }}>Founder &amp; CEO</div>
              <div style={{ fontSize: 15, color: 'var(--ink-1)', lineHeight: 1.55, letterSpacing: '-0.005em', maxWidth: 580 }}>
                Phil D. — three-time President &amp; CFO through two acquisitions and an IPO filing. Goldman M&amp;A, McKinsey corporate finance, MIT Computer Science.{' '}
                <span style={{ color: 'var(--ink-2)' }}>Sets the bar for who joins the bench. Stays the escalation point on every account.</span>
              </div>
            </div>
          </div>

          {/* The Memory — a running journal of a single CFO relationship across months */}
          <div style={{
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 14, boxShadow: 'var(--shadow-soft)',
            overflow: 'hidden',
            opacity: step >= 2 ? 1 : 0,
            transform: step >= 2 ? 'translateY(0)' : 'translateY(16px)',
            transition: 'opacity .8s ease .3s, transform .8s ease .3s',
          }}>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--paper-2)' }}>
              <div>
                <div className="label">SAMPLE MEMORY · ILLUSTRATIVE</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, letterSpacing: '-0.01em' }}>What a 14-month CFO relationship looks like inside.</div>
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--ink-3)' }} />
                <span className="label" style={{ color: 'var(--ink-3)' }}>COMPOSITE</span>
              </div>
            </div>

            <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span className="label" style={{ color: 'var(--ink-3)', minWidth: 60 }}>MONTH</span>
              <input
                type="range" min={0} max={11} value={monthIdx}
                onChange={e => setMonthIdx(Number(e.target.value))}
                style={{ flex: 1, accentColor: 'oklch(0.58 0.12 220)' }}
                aria-label="Scrub through months"
              />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: 'var(--accent)', minWidth: 44, textAlign: 'right' }}>
                {String(monthIdx + 1).padStart(2, '0')} / 12
              </span>
            </div>

            <div style={{ maxHeight: 420, overflowY: 'auto', padding: '8px 0' }}>
              {visible.map((b, i) => (
                <div key={i} style={{
                  padding: '12px 24px', display: 'grid', gridTemplateColumns: '60px 1fr',
                  gap: 14, borderBottom: i < visible.length - 1 ? '1px dashed var(--line)' : 'none',
                  opacity: i === visible.length - 1 ? 1 : 0.75,
                  transition: 'opacity .3s ease',
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', paddingTop: 2 }}>{b.m}</span>
                  <span style={{ fontSize: 13, color: 'var(--ink-1)', lineHeight: 1.5, letterSpacing: '-0.005em' }}>
                    <span style={{ color: 'var(--accent)', marginRight: 6 }}>▸</span>{b.d}
                  </span>
                </div>
              ))}
            </div>

            <div style={{ padding: '14px 24px', background: 'var(--paper-2)', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
              <span>{visible.length} decisions retained</span>
              <span style={{ color: 'var(--accent)' }}>compounding →</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { Hero });