// components/ServicesPage.jsx

function PriceTier({ tier, price, period, summary, includes, popular, onCta }) {
  return (
    <div style={{
      background: popular ? 'var(--sb-ink)' : 'var(--sb-cream)',
      color: popular ? 'var(--sb-cream)' : 'var(--sb-ink)',
      border: '1px solid ' + (popular ? 'var(--sb-ink)' : 'var(--sb-stone)'),
      padding: '36px 32px 32px',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      boxShadow: popular
        ? '0 4px 12px rgba(42, 39, 36, 0.24), 0 36px 80px -14px rgba(42, 39, 36, 0.45)'
        : '0 1px 3px rgba(42, 39, 36, 0.10), 0 20px 48px -10px rgba(42, 39, 36, 0.16)',
    }}>
      {popular && (
        <div style={{
          position: 'absolute', top: -1, right: -1,
          background: 'var(--sb-amber)',
          color: 'var(--sb-cream)',
          padding: '5px 12px',
          fontFamily: 'var(--sb-font-mono)',
          fontSize: 10,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
        }}>
          Most chosen
        </div>
      )}

      <div className="sb-caption" style={{ color: popular ? 'var(--sb-amber-soft)' : 'var(--sb-amber)', marginBottom: 14 }}>
        {tier}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
        <span style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1 }}>
          {price}
        </span>
        <span style={{ fontFamily: 'var(--sb-font-mono)', fontSize: 13, opacity: 0.7 }}>{period}</span>
      </div>
      <p style={{ fontSize: 14, opacity: 0.75, marginBottom: 28, lineHeight: 1.55, color: 'inherit', margin: 0 }}>
        {summary}
      </p>

      <hr style={{ border: 0, borderTop: '1px solid ' + (popular ? 'rgba(251,247,241,0.15)' : 'var(--sb-stone)'), margin: '28px 0' }} />

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        {includes.map((line) => (
          <li key={line} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.5, color: popular ? 'rgba(251,247,241,0.85)' : 'var(--sb-ink-soft)' }}>
            <span style={{ color: popular ? 'var(--sb-amber-soft)' : 'var(--sb-amber)', flexShrink: 0, marginTop: 2 }}>—</span>
            <span>{line}</span>
          </li>
        ))}
      </ul>

      <div style={{ marginTop: 32 }}>
        <button
          onClick={onCta}
          className={'sb-btn ' + (popular ? 'sb-btn--amber' : 'sb-btn--ghost')}
          style={{ width: '100%', justifyContent: 'center' }}>
          Discuss this tier
        </button>
      </div>
    </div>
  );
}

function ServicesPage() {
  const goContact = () => window.SBNav('/contact');

  return (
    <div className="sb-page">
      <Section tone="linen" style={{ paddingBlock: 'clamp(56px, 8vw, 96px)' }}>
        <div style={{ marginBottom: 40 }}>
          <LogoBlock size={40} color="var(--sb-ink)" accent="var(--sb-amber)" />
          <div style={{ height: 1, background: 'var(--sb-stone)', marginTop: 22 }} />
        </div>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Services</Eyebrow>
          <h1 className="sb-h1" style={{ marginTop: 22 }}>
            Three tiers. One standard.
          </h1>
          <p className="sb-body-lg" style={{ marginTop: 24 }}>
            Every engagement includes monthly reconciliation, accurate categorization, and a plain-English close note. The tiers differ in volume and scope — choose the level that matches how your business actually runs.
          </p>
        </div>
      </Section>

      <Section tone="cream" style={{ paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, alignItems: 'stretch' }}>
          <PriceTier
            tier="Core"
            price="$750"
            period="/ month"
            summary="For owner-led businesses with steady, simple finances."
            includes={[
              'Up to 2 bank or credit-card accounts',
              'Monthly reconciliation, all transactions categorized',
              'Standard chart of accounts',
              'Monthly close note in plain English',
              'Year-end package for your CPA',
              'Email support',
            ]}
            onCta={goContact}
          />
          <PriceTier
            tier="Essential"
            price="$1,200"
            period="/ month"
            popular
            summary="For growing businesses with multiple accounts or vendors."
            includes={[
              'Up to 4 bank or credit-card accounts',
              'Monthly reconciliation + accrual adjustments',
              'Custom chart of accounts, class/job tracking',
              'Monthly close note + key metrics dashboard',
              'Year-end package for your CPA',
              'Quarterly review call',
            ]}
            onCta={goContact}
          />
          <PriceTier
            tier="Advanced"
            price="$1,800"
            period="/ month"
            summary="For established small businesses with complex books."
            includes={[
              'Unlimited bank, credit-card, and merchant accounts',
              'Full accrual close, A/R and A/P management',
              'Department or location-level reporting',
              'Monthly close note + custom KPI report',
              'Year-end package + audit-ready support',
              'Monthly review call',
            ]}
            onCta={goContact}
          />
        </div>
      </Section>

      {/* Payroll add-on */}
      <Section tone="linen">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 40,
          alignItems: 'center',
          padding: '40px 36px',
          background: 'var(--sb-bone)',
          border: '1px solid var(--sb-stone)',
        }}>
          <div>
            <Eyebrow>Add-on</Eyebrow>
            <h2 className="sb-h2" style={{ marginTop: 14 }}>Payroll, through Gusto.</h2>
            <p className="sb-body" style={{ marginTop: 14, maxWidth: 460 }}>
              For clients who want payroll handled in the same hand as bookkeeping. Run through Gusto, integrated cleanly into your monthly close.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--sb-ink)' }}>From $150</span>
              <span style={{ fontFamily: 'var(--sb-font-mono)', fontSize: 13, color: 'var(--sb-taupe)' }}>/ month</span>
            </div>
            <p className="sb-small" style={{ maxWidth: 360 }}>
              Pricing scales with employee count. Final quote during consultation.
            </p>
            <Btn variant="ghost" onClick={goContact}>Talk through payroll</Btn>
          </div>
        </div>
      </Section>

      {/* Hybrid / DirectCFO */}
      <Section tone="ink">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 56, alignItems: 'flex-start' }}>
          <div>
            <Eyebrow>Hybrid engagements</Eyebrow>
            <h2 className="sb-h1" style={{ marginTop: 18, maxWidth: 480 }}>
              Bookkeeping <span style={{ color: 'var(--sb-amber-soft)' }}>+</span> CFO, in one relationship.
            </h2>
            <p className="sb-body-lg" style={{ marginTop: 24, maxWidth: 460 }}>
              When clean books aren't enough — when you need someone steering the financial strategy too — we partner with our sister practice, DirectCFO Advisory. Same standards, same quiet rhythm, expanded scope.
            </p>
          </div>

          <div style={{
            border: '1px solid rgba(251, 247, 241, 0.18)',
            padding: 32,
            display: 'flex', flexDirection: 'column', gap: 22,
          }}>
            <div>
              <div className="sb-caption" style={{ color: 'var(--sb-amber-soft)', marginBottom: 8 }}>What's included</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Any Settled Books tier as the foundation',
                  'Fractional CFO from DirectCFO — forecasts, cash planning, KPIs',
                  'Single point of contact across both practices',
                  'Combined billing, single engagement letter',
                ].map((s) => (
                  <li key={s} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.5, color: 'rgba(251,247,241,0.85)' }}>
                    <span style={{ color: 'var(--sb-amber-soft)', flexShrink: 0, marginTop: 2 }}>—</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
            <hr style={{ border: 0, borderTop: '1px solid rgba(251,247,241,0.15)', margin: 0 }} />
            <a href="https://directcfoadvisory.com" target="_blank" rel="noopener noreferrer"
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 10,
                 color: 'var(--sb-cream)',
                 fontSize: 14,
                 fontWeight: 500,
                 letterSpacing: '-0.01em',
                 borderBottom: '1px solid rgba(251,247,241,0.3)',
                 paddingBottom: 4,
                 alignSelf: 'flex-start',
               }}>
              Visit directcfoadvisory.com
              <span style={{ color: 'var(--sb-amber-soft)' }}>↗</span>
            </a>
          </div>
        </div>
      </Section>

      <Section tone="cream">
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
          <h2 className="sb-h2">Not sure which tier fits?</h2>
          <p className="sb-body" style={{ marginTop: 16, marginBottom: 28 }}>
            A 30-minute consultation is the fastest way to find out. No prep, no pressure.
          </p>
          <Btn variant="primary" as="a" href={window.BOOKINGS_URL} target="_blank" rel="noopener noreferrer">Schedule a consultation</Btn>
        </div>
      </Section>
    </div>
  );
}

window.ServicesPage = ServicesPage;