// Services — three featured retainer/flagship offers + a project-work strip
function Services({ onBook }) {
  const tiers = [
  {
    tag: 'Advisory Retainer',
    tagline: 'A senior brain on call. You still own the work.',
    price: '$5,000',
    cadence: 'per month · month-to-month',
    bullets: [
    'Monthly financial review and commentary',
    'Rolling cash flow forecast, kept current',
    '90-min monthly leadership call',
    'KPI tracking and variance analysis',
    'Async Slack / email access'],

    footnote: 'Seed to Series A with working books. You have a bookkeeper and a model already exists.',
    cta: 'Book a 30-min intro'
  },
  {
    tag: 'Modern Finance Stack',
    tagline: 'For founders who need finance infrastructure built, not just advice.',
    price: '$7,500',
    cadence: 'per month + $15K implementation · 12-mo min',
    featured: true,
    featuredLabel: 'Flagship',
    bullets: [
    'Opinionated AI-native finance stack, migrated and configured',
    'Monthly close I own, 3 to 5 day target',
    'Replaces your bookkeeper at bookkeeper-plus pricing',
    'Investor-ready monthly reporting and KPIs',
    'Light CFO advisory on pricing, hiring, fundraising'],

    footnote: 'Pre-seed to Series A. Books are messy or non-existent. You’re willing to migrate.',
    cta: 'Book a 30-min intro'
  },
  {
    tag: 'Embedded CFO',
    tagline: 'For founders whose books are fine but who need a real CFO at the table.',
    price: '$10,000',
    cadence: 'per month · month-to-month',
    bullets: [
    'Weekly leadership meeting and a real seat at the table',
    'Full ownership of model, forecast, and board pack',
    'Manages bookkeeper, accountant, and auditor',
    'Active fundraise leadership: deck math, diligence, investor calls',
    'Strategic ownership of pricing, hiring, capital decisions'],

    footnote: 'Series A+ with a working accounting setup. Or earlier-stage in active raise or scale mode.',
    cta: 'Book a 30-min intro'
  }];

  return (
    <section id="services" style={{ padding: '96px 32px', borderBottom: '1px solid var(--line-2)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={window.sectionHeadingStyle}>
          Three ways to put a CFO in the room.
        </h2>

        <div style={{
          marginTop: 56,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20
        }}>
          {tiers.map((t, i) => <ServiceCard key={i} t={t} />)}
        </div>

        <div style={{
          marginTop: 32,
          padding: '28px 32px',
          border: '1px solid var(--line)',
          borderRadius: 10,
          background: 'var(--bg)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: 22, lineHeight: 1.3, letterSpacing: '-0.01em',
            color: 'var(--ink)', maxWidth: 560,
          }}>
            Not sure which fits? Book a 30-min intro and we’ll figure it out together.
          </div>
          <button onClick={onBook} style={{
            background: 'var(--ink)', color: 'var(--paper)',
            border: 'none', borderRadius: 999,
            padding: '13px 22px', fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            whiteSpace: 'nowrap',
          }}>
            Book a 30-min intro
            <span style={{ opacity: 0.7 }}>→</span>
          </button>
        </div>

        <ProjectStrip />
      </div>
    </section>);

}

function ServiceCard({ t }) {
  return (
    <div style={{
      background: t.featured ? 'var(--ink)' : 'var(--paper)',
      color: t.featured ? 'var(--paper)' : 'var(--ink)',
      border: t.featured ? '1px solid var(--ink)' : '1px solid var(--line)',
      borderRadius: 10,
      padding: '32px 28px',
      display: 'flex', flexDirection: 'column', gap: 24,
      position: 'relative'
    }}>
      {t.featured &&
      <div style={{
        position: 'absolute', top: -10, right: 20,
        background: 'var(--accent-soft)', color: 'var(--ink)',
        fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
        textTransform: 'uppercase',
        padding: '4px 10px', borderRadius: 999
      }}>
          {t.featuredLabel || 'Most chosen'}
        </div>
      }

      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: t.featured ? 'color-mix(in oklab, var(--paper) 70%, transparent)' : 'var(--ink-3)'
      }}>
        {t.tag}
      </div>

      {t.tagline && (
        <div style={{
          marginTop: -10,
          fontFamily: "'Instrument Serif', serif",
          fontSize: 19, lineHeight: 1.3, letterSpacing: '-0.01em',
          color: t.featured ? 'color-mix(in oklab, var(--paper) 92%, transparent)' : 'var(--ink)',
        }}>
          {t.tagline}
        </div>
      )}

      <div>
        <div style={{
          fontFamily: "'Instrument Serif', serif",
          fontSize: 44, lineHeight: 1, letterSpacing: '-0.02em'
        }}>
          {t.price}
        </div>
        <div style={{
          marginTop: 6, fontSize: 13,
          color: t.featured ? 'color-mix(in oklab, var(--paper) 70%, transparent)' : 'var(--ink-3)'
        }}>
          {t.cadence}
        </div>
      </div>

      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {t.bullets.map((b, i) =>
        <li key={i} style={{
          display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10,
          fontSize: 14, lineHeight: 1.5,
          color: t.featured ? 'color-mix(in oklab, var(--paper) 90%, transparent)' : 'var(--ink-2)'
        }}>
            <span style={{
            marginTop: 7, width: 8, height: 1,
            background: t.featured ? 'var(--accent-soft)' : 'var(--accent)'
          }} />
            <span>{b}</span>
          </li>
        )}
      </ul>

      <div style={{
        marginTop: 'auto', paddingTop: 20,
        borderTop: t.featured ? '1px solid color-mix(in oklab, var(--paper) 18%, transparent)' : '1px solid var(--line-2)'
      }}>
        <div style={{
          fontSize: 12,
          color: t.featured ? 'color-mix(in oklab, var(--paper) 70%, transparent)' : 'var(--ink-3)'
        }}>
          {t.footnote}
        </div>
      </div>
    </div>);

}

// Secondary strip: project-based work
function ProjectStrip() {
  const projects = [
  { name: 'Strategy Call', price: '$500', sub: '60 min, one-time' },
  { name: 'CFO Diagnostic', price: '$5,000', sub: '2 weeks · credits toward retainer' },
  { name: 'Financial Model Build', price: 'from $7,500', sub: 'Bottoms-up, scenario-ready' },
  { name: 'Pricing Restructure Sprint', price: 'from $12,000', sub: '3 to 4 weeks · signature offering' },
  { name: 'Fundraise Readiness', price: 'from $15,000', sub: '4 to 6 weeks · investor-ready' }];

  return (
    <div style={{ marginTop: 56 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        gap: 16, marginBottom: 20, flexWrap: 'wrap'
      }}>
        <div>
          <div style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.01em',
          }}>Fixed-Scope Offerings

          </div>
        </div>
      </div>

      <div style={{
        border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden',
        background: 'var(--paper)'
      }}>
        {projects.map((p, i) =>
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr',
          gap: 16,
          padding: '18px 20px',
          alignItems: 'center',
          borderTop: i > 0 ? '1px solid var(--line-2)' : 'none'
        }}>
            <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink)' }}>{p.name}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{p.sub}</div>
            <div className="mono" style={{
            fontSize: 13, color: 'var(--ink)', textAlign: 'right'
          }}>{p.price}</div>
          </div>
        )}
      </div>
    </div>);

}

window.Services = Services;