// ServicesPage.jsx — DirectCFO services page
// Sections (per directcfo-website-copy-LOCKED.md):
//   1. Header
//   2. CFO Advisor tier panel
//   3. CFO Partner tier panel (Most common · dark)
//   4. CFO Embedded tier panel
//   5. Scope-at-a-glance comparison table
//   6. Need the books too? Hybrid panel (Foundation / Growth / Enterprise)
//   7. FAQ — 7 questions
//   9. CTA close → Microsoft Bookings
// (Section 8 "Where We Work" intentionally dropped — Contact page carries the operating-model copy.)

// BOOKINGS_URL + openBookings come from Tokens.jsx (window-globals).
const SETTLED_BOOKS_URL = 'https://settledbooks.com';

function ServicesHeader() {
  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '96px 32px 72px' }}>
        <div style={{ marginBottom: 48 }}>
          <WordmarkInline size={56} />
          <div style={{
            height: 1, background: T.rule, marginTop: 24,
          }} />
        </div>
        <Eyebrow>Services</Eyebrow>
        <h1 style={{
          fontFamily: F.display, fontWeight: 500,
          fontSize: 'clamp(52px, 6.4vw, 80px)',
          letterSpacing: '-0.032em', lineHeight: 1.0,
          margin: '28px 0 36px', maxWidth: 1040, color: T.ink,
          textWrap: 'balance',
        }}>
          Three engagements.<br/>
          One finance seat,<br/>
          scoped to your cadence.
        </h1>
        <p style={{
          fontFamily: F.body, fontSize: 22, lineHeight: 1.45,
          color: T.slate, margin: 0, maxWidth: 760,
        }}>
          DirectCFO runs the CFO function for growing businesses at three distinct depths.
          We recommend one on the first call — not the most expensive one, the right one.
        </p>
      </div>
    </section>
  );
}

// ── Tier detail section — each tier gets its own panel, alternating surface ──
function TierDetail({
  num, tier, cadence, headline, body, bullets, bulletsLeadIn,
  fit, priceLabel, dark, mostCommon, ctaLabel, onCTA,
}) {
  const bg = dark ? T.ink : T.paper;
  const fg = dark ? T.white : T.ink;
  const sub = dark ? T.mute : T.slate;
  const rule = dark ? T.border_d : T.rule;
  const cardBg = dark ? T.graphite : T.white;

  return (
    <section style={{ background: bg, color: fg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
          alignItems: 'start',
        }}>
          {/* Left — tier identity */}
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 13, fontWeight: 500,
                letterSpacing: '0.18em', color: T.slate,
              }}>{num}</div>
              {mostCommon && (
                <div style={{
                  fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: T.ink, background: T.gold,
                  padding: '4px 10px',
                }}>Most common</div>
              )}
            </div>
            <div style={{
              fontFamily: F.mono, fontSize: 12, fontWeight: 500,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: T.gold, marginTop: 16,
            }}>{cadence}</div>
            <h2 style={{
              fontFamily: F.display, fontWeight: 500,
              fontSize: 'clamp(44px, 5vw, 64px)',
              letterSpacing: '-0.03em', lineHeight: 1.0,
              margin: '20px 0 0', color: fg,
            }}>{tier}</h2>

            <div style={{
              marginTop: 40, padding: '20px 0',
              borderTop: `1px solid ${rule}`, borderBottom: `1px solid ${rule}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              gap: 16, flexWrap: 'wrap',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: sub,
              }}>Engagement</div>
              <div style={{
                fontFamily: F.mono, fontSize: 14, color: fg, letterSpacing: '0.02em',
                textAlign: 'right',
              }}>{priceLabel}</div>
            </div>
          </div>

          {/* Right — detail */}
          <div>
            <h3 style={{
              fontFamily: F.display, fontSize: 32, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.15,
              margin: 0, color: fg, maxWidth: 640, textWrap: 'balance',
            }}>{headline}</h3>
            <p style={{
              fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
              color: sub, margin: '24px 0 40px', maxWidth: 600,
            }}>{body}</p>

            <div style={{
              background: cardBg, border: `1px solid ${rule}`,
              padding: '28px 32px',
            }}>
              <Eyebrow tone={dark ? 'mute' : 'slate'}>{bulletsLeadIn || 'What you get'}</Eyebrow>
              <ul style={{
                listStyle: 'none', margin: '20px 0 0', padding: 0,
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 32px',
              }}>
                {bullets.map(b => (
                  <li key={b} style={{
                    fontFamily: F.body, fontSize: 15, lineHeight: 1.45,
                    color: fg, padding: '10px 0',
                    borderBottom: `1px solid ${rule}`,
                    display: 'flex', gap: 12, alignItems: 'baseline',
                  }}>
                    <span style={{
                      fontFamily: F.mono, fontSize: 12,
                      color: T.gold, letterSpacing: '0.12em',
                    }}>—</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{
              marginTop: 28,
              display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: sub,
              }}>Good fit if</div>
              <div style={{
                fontFamily: F.body, fontSize: 15, lineHeight: 1.5,
                color: fg, flex: '1 1 300px',
              }}>{fit}</div>
              <Button
                variant={dark ? 'ghost-on-ink' : 'ghost'}
                onClick={onCTA}
              >
                {ctaLabel}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Scope comparison table — clarifies the ladder at a glance ──
function ScopeTable() {
  const cols = ['CFO Advisor', 'CFO Partner', 'CFO Embedded'];
  const rows = [
    ['Cadence',                     ['Monthly', 'Bi-weekly', 'Weekly']],
    ['The CFO Report',              ['Monthly', 'Monthly', 'Monthly (expanded)']],
    ['Decision memos',              ['Quarterly', 'As warranted (typically monthly)', 'As needed']],
    ['Cash forecast',               ['—', '13-week, monthly', '13-week, weekly']],
    ['Scenario modeling',           ['—', 'On demand', 'On demand']],
    ['Leadership meeting',          ['—', 'Monthly', 'Weekly']],
    ['Strategic off-site',          ['—', 'Quarterly', 'Quarterly']],
    ['Board pack & attendance',     ['—', 'On request', 'Each meeting']],
    ['Vendor & lender support',     ['—', 'Coaching', 'Coaching + active coordination']],
    ['Lender / capital readiness',  ['—', 'Scoped add-on', 'Included']],
    ['Finance team guidance',       ['—', '—', 'Included']],
  ];

  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{ marginBottom: 56 }}>
          <Eyebrow>Scope at a glance</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontSize: 48, fontWeight: 500,
            letterSpacing: '-0.028em', lineHeight: 1.05,
            margin: '20px 0 0', color: T.ink, maxWidth: 900,
          }}>
            What sits inside each engagement.
          </h2>
        </div>

        <div style={{
          border: `1px solid ${T.rule}`, background: T.white,
        }}>
          {/* Header row */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)',
            borderBottom: `1px solid ${T.rule}`, background: T.paperDim,
          }}>
            <div style={{ padding: '20px 24px' }}>
              <Eyebrow>Capability</Eyebrow>
            </div>
            {cols.map((c, i) => (
              <div key={c} style={{
                padding: '20px 24px',
                borderLeft: `1px solid ${T.rule}`,
                background: i === 1 ? T.paper : 'transparent',
              }}>
                <div style={{
                  fontFamily: F.display, fontSize: 17, fontWeight: 600,
                  letterSpacing: '-0.01em', color: T.ink,
                }}>{c}</div>
                {i === 1 && (
                  <div style={{
                    fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: T.goldDeep, marginTop: 6,
                  }}>Most common</div>
                )}
              </div>
            ))}
          </div>

          {rows.map(([label, vals], r) => (
            <div key={label} style={{
              display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)',
              borderBottom: r < rows.length - 1 ? `1px solid ${T.rule}` : 'none',
            }}>
              <div style={{
                padding: '18px 24px',
                fontFamily: F.body, fontSize: 15, fontWeight: 500, color: T.ink,
              }}>{label}</div>
              {vals.map((v, i) => (
                <div key={i} style={{
                  padding: '18px 24px',
                  borderLeft: `1px solid ${T.rule}`,
                  background: i === 1 ? T.paper : 'transparent',
                  fontFamily: v === '—' ? F.mono : F.body,
                  fontSize: 14,
                  color: v === '—' ? T.mute : T.ink,
                  letterSpacing: v === '—' ? '0.08em' : 0,
                  lineHeight: 1.4,
                }}>{v}</div>
              ))}
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 24,
          fontFamily: F.mono, fontSize: 12,
          color: T.slate, letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          Monthly retainer · 3-month minimum initial term · 30-day notice thereafter · no hourly billing
        </div>
      </div>
    </section>
  );
}

// ── Hybrid panel — Need the books too? ──
function HybridPanel({ onCTA }) {
  const packages = [
    {
      name: 'Foundation',
      price: '$3,500/month',
      tagline: 'Books and strategy in one team.',
      composition: 'Settled Books Core + CFO Advisor',
      description: 'Built for owners who want one number to call and one team behind it.',
      cta: 'Talk to us about Foundation →',
    },
    {
      name: 'Growth',
      price: '$5,500/month',
      tagline: "Integrated finance for the company that's outgrowing piecemeal support.",
      composition: 'Settled Books Essential + CFO Partner',
      description: 'Books, cash, strategy, and leadership presence delivered as one engagement.',
      cta: 'Talk to us about Growth →',
    },
    {
      name: 'Enterprise',
      price: '$8,500/month',
      tagline: 'Full finance function — books, cash, strategy, board — under one roof.',
      composition: 'Settled Books Advanced + CFO Embedded',
      description: 'Multi-entity, board-grade reporting, weekly cash, weekly leadership presence. The fractional CFO function with the books beneath it.',
      cta: 'Talk to us about Enterprise →',
    },
  ];

  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
          alignItems: 'start', marginBottom: 64,
        }}>
          <div>
            <Eyebrow tone="mute">Hybrid engagements</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.05,
              margin: '20px 0 0', color: T.white, maxWidth: 520,
              textWrap: 'balance',
            }}>
              Need the books too?
            </h2>
          </div>
          <div style={{ maxWidth: 640 }}>
            <p style={{
              fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
              color: T.mute, margin: '0 0 18px',
            }}>
              DirectCFO works on top of clean, accurate books — we don't replace them, we rely
              on them. If your bookkeeping needs rebuilding, or your bookkeeper has left, or
              you'd just rather have one team handle both sides, we run a sister practice:{' '}
              <span style={{ color: T.white, fontWeight: 500 }}>Settled Books</span>.
            </p>
            <p style={{
              fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
              color: T.mute, margin: 0,
            }}>
              For clients who want both, we offer Hybrid engagements — books and CFO advisory
              in a single monthly retainer, integrated deliverables, one point of contact.
              It's how most of our best work happens.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {packages.map(p => (
            <div key={p.name} style={{
              background: T.graphite, border: `1px solid ${T.border_d}`,
              padding: '32px 28px',
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                alignItems: 'baseline', gap: 16,
                paddingBottom: 16, borderBottom: `1px solid ${T.border_d}`,
              }}>
                <div style={{
                  fontFamily: F.display, fontSize: 28, fontWeight: 600,
                  letterSpacing: '-0.018em', color: T.white,
                }}>{p.name}</div>
                <div style={{
                  fontFamily: F.mono, fontSize: 13, fontWeight: 500,
                  letterSpacing: '0.04em', color: T.gold,
                  textAlign: 'right',
                }}>{p.price}</div>
              </div>
              <div style={{
                fontFamily: F.display, fontSize: 18, fontWeight: 500,
                letterSpacing: '-0.01em', lineHeight: 1.3,
                color: T.white, textWrap: 'balance',
              }}>{p.tagline}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: T.goldDeep,
              }}>{p.composition}</div>
              <p style={{
                fontFamily: F.body, fontSize: 15, lineHeight: 1.55,
                color: T.mute, margin: 0, flex: 1,
              }}>{p.description}</p>
              <div style={{ marginTop: 8 }}>
                <Button variant="ghost-on-ink" onClick={onCTA}>
                  {p.cta}
                </Button>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32,
          fontFamily: F.mono, fontSize: 12,
          color: T.slate, letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          All Hybrid engagements: 3-month minimum · 30-day notice · single integrated CFO Report · one point of contact
        </div>

        <div style={{
          marginTop: 40, paddingTop: 32,
          borderTop: `1px solid ${T.border_d}`,
          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <Eyebrow tone="mute">Sister practice</Eyebrow>
          <a
            href={SETTLED_BOOKS_URL}
            target="_blank"
            rel="noreferrer"
            style={{
              fontFamily: F.body, fontSize: 15, fontWeight: 500,
              color: T.gold, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}
            onMouseEnter={e => { e.currentTarget.style.textDecoration = 'underline'; }}
            onMouseLeave={e => { e.currentTarget.style.textDecoration = 'none'; }}
          >
            Visit Settled Books →
          </a>
        </div>
      </div>
    </section>
  );
}

// ── FAQ — light surface, 7 questions, plain answers ──
function ServicesFAQ() {
  const faqs = [
    {
      q: 'Are the prices fixed?',
      a: 'Yes. Each tier is a fixed monthly retainer — the same number for every client at that tier. We size the engagement to your business on the discovery call; if your needs grow over time we have a conversation about moving up a tier before any change to the invoice. No surprise charges.',
    },
    {
      q: 'How long is the commitment?',
      a: '3-month minimum initial term, then month-to-month with 30 days notice. No annual contracts, no auto-renewal traps.',
    },
    {
      q: 'Will you work with our existing bookkeeper or controller?',
      a: 'Yes. Many clients keep their current bookkeeper and add DirectCFO on top. If your books need rebuilding, or you want both handled by one team, our sister practice Settled Books does the bookkeeping, and we run integrated Hybrid engagements that combine both. If you need a controller we can’t provide, we’ll tell you and help you hire one.',
    },
    {
      q: 'Do you do fundraise support?',
      a: 'We handle lender and capital readiness — refinancings, SBA loan packages, lender selection, financing strategy. Scoped as needed at Partner; included at Embedded. We don’t act as placement agents on equity transactions — that’s a regulated activity outside our scope.',
    },
    {
      q: 'Where are you based and where do you work?',
      a: 'We’re based in Montgomery County, just north of Houston. Most of our clients are in Texas — primarily the Houston, Austin, Dallas, and San Antonio metros — but we work with companies wherever the relationship takes us. Engagements run primarily via video conference; in-person sessions are arranged case-by-case.',
    },
    {
      q: 'What if none of the three tiers fit?',
      a: 'We say so. The free business financial review is $0 and you leave with a memo either way.',
    },
    {
      q: 'Do you offer bookkeeping and CFO work together?',
      a: 'Yes — through Hybrid engagements. Settled Books handles the books, DirectCFO handles the strategic side, one retainer covers both, one team delivers. You get clean financials and strategic commentary in the same monthly package.',
    },
  ];

  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
          alignItems: 'start', marginBottom: 56,
        }}>
          <div>
            <Eyebrow>Frequently asked</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.05,
              margin: '20px 0 0', color: T.ink, maxWidth: 420,
              textWrap: 'balance',
            }}>
              Plain answers, in advance.
            </h2>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${T.rule}` }}>
          {faqs.map((f, i) => (
            <FAQRow key={i} num={String(i + 1).padStart(2, '0')} {...f} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQRow({ num, q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div
      onClick={() => setOpen(o => !o)}
      style={{
        borderBottom: `1px solid ${T.rule}`,
        cursor: 'pointer',
        transition: 'background 120ms',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'rgba(10,22,40,0.025)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >
      <div style={{
        display: 'grid', gridTemplateColumns: '64px 1fr 40px',
        gap: 32, padding: '32px 0', alignItems: 'baseline',
      }}>
        <div style={{
          fontFamily: F.mono, fontSize: 13, color: T.slate,
          letterSpacing: '0.18em',
        }}>{num}</div>
        <div>
          <h3 style={{
            fontFamily: F.display, fontSize: 24, fontWeight: 500,
            letterSpacing: '-0.015em', lineHeight: 1.25,
            margin: 0, color: T.ink,
          }}>{q}</h3>
          <div style={{
            maxHeight: open ? 360 : 0,
            overflow: 'hidden',
            transition: 'max-height 240ms var(--ease-standard, cubic-bezier(.2,0,0,1))',
          }}>
            <p style={{
              fontFamily: F.body, fontSize: 17, lineHeight: 1.55,
              color: T.slate, margin: '16px 0 0', maxWidth: 760,
            }}>{a}</p>
          </div>
        </div>
        <div style={{
          fontFamily: F.mono, fontSize: 22, color: T.goldDeep,
          textAlign: 'right', transition: 'transform 200ms',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          lineHeight: 1,
        }}>+</div>
      </div>
    </div>
  );
}

// ── Services CTA close → Microsoft Bookings ──
function ServicesCTA() {
  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr',
          gap: 80, alignItems: 'end',
          borderTop: `1px solid ${T.border_d}`, paddingTop: 72,
        }}>
          <h2 style={{
            fontFamily: F.display, fontWeight: 500,
            fontSize: 'clamp(40px, 5vw, 60px)',
            letterSpacing: '-0.028em', lineHeight: 1.05,
            margin: 0, color: T.white, maxWidth: 760, textWrap: 'balance',
          }}>
            Not sure which tier fits? <span style={{ color: T.gold }}>We will tell you on the first call.</span>
          </h2>
          <div style={{ textAlign: 'left' }}>
            <Button variant="accent" onClick={openBookings}>Book a free financial review →</Button>
            <div style={{
              marginTop: 16,
              fontFamily: F.mono, fontSize: 12, color: T.mute,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>
              30 min · no pitch
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Full page composition ──
function ServicesPage({ onNavigate = () => {} }) {
  const goContact = () => onNavigate('Contact');

  return (
    <main data-screen-label="Services">
      <ServicesHeader />

      <TierDetail
        num="01"
        tier="CFO Advisor"
        cadence="Monthly · part-time"
        priceLabel="$2,500/month · monthly retainer"
        headline="A finance chief on call, once a month."
        body="You have the day-to-day covered. What you need is a finance professional who reads your numbers, catches the drift before you do, and tells you plainly what to act on."
        bullets={[
          'The CFO Report — your monthly financial package, expanded',
          'Monthly 60-minute CFO session',
          'Bi-weekly 30-minute check-in (off-week)',
          'Annual budget coaching — structured and pressure-tested',
          'Written decision memo each quarter',
          'Scheduled-call access — email queued to your next call',
        ]}
        fit="You have solid bookkeeping and need a sharper second pair of eyes — someone who can read what your numbers are saying and translate them into a clear next move."
        ctaLabel="Start with Advisor →"
        onCTA={goContact}
      />

      <TierDetail
        num="02"
        tier="CFO Partner"
        cadence="Bi-weekly · embedded light"
        priceLabel="$4,000/month · monthly retainer"
        headline="Embedded in your leadership cadence."
        body="We sit in your leadership meeting, work the cash model with you, and own the strategic finance function alongside your management team. You get finance represented at the table — without another seat on payroll."
        bulletsLeadIn="What you get — everything in Advisor, plus"
        bullets={[
          'Rolling 13-week cash flow forecast (built into the CFO Report)',
          'Scenario modeling and what-if analysis on demand',
          'Written decision memos — as warranted, typically monthly',
          'Monthly leadership/management meeting attendance',
          'Quarterly strategic off-site',
          'Vendor and lender coaching — we prep you and walk you through',
          'Lender and capital readiness — scoped as needed',
          'Lender- and board-ready reporting package',
        ]}
        fit="You are running a real management team and need finance represented at it."
        ctaLabel="Start with Partner →"
        dark
        mostCommon
        onCTA={goContact}
      />

      <TierDetail
        num="03"
        tier="CFO Embedded"
        cadence="Weekly · full function"
        priceLabel="$6,500/month · monthly retainer"
        headline="The seat — without the six-figure headcount."
        body="Full CFO function. Close ownership, cash discipline, board reporting, capital readiness, finance team guidance. The only material difference from a full-time CFO is the invoice line."
        bulletsLeadIn="What you get — everything in Partner, plus"
        bullets={[
          'Rolling 13-week cash flow updated weekly',
          'Weekly 30-minute check-ins',
          'Weekly leadership meeting attendance',
          'Board meeting attendance and preparation',
          'Lender and capital readiness — included (refinancings, SBA, lender selection, financing strategy)',
          'Board and investor-grade reporting package',
          'Finance team guidance — hiring scope, role design, comp benchmarking, interview support, onboarding',
          'Direct coordination with banking, legal, and advisory partners',
        ]}
        fit="You are growing fast enough that finance needs a chair at every table — and you are not yet ready to hire a full-time CFO at $200K+ all-in."
        ctaLabel="Start with Embedded →"
        onCTA={goContact}
      />

      <ScopeTable />
      <HybridPanel onCTA={goContact} />
      <ServicesFAQ />
      <ServicesCTA />
    </main>
  );
}

Object.assign(window, {
  ServicesPage, ServicesHeader, TierDetail, ScopeTable, HybridPanel, ServicesFAQ, ServicesCTA, FAQRow,
});