const svcStyles = {
  wrap: { padding: 'var(--section-y) 32px' },
  inner: { maxWidth: 1280, margin: '0 auto' },
  header: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 56, alignItems: 'end' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 20 },
  h2: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600 },
  italic: { fontWeight: 700, color: 'var(--blue)' },
  sub: { fontSize: 17, lineHeight: 1.55, color: 'var(--ink-muted)' },

  // Two-service split
  pair: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 },
  svcCard: (accent) => ({
    position: 'relative',
    padding: 36,
    border: '1px solid var(--line-soft)',
    borderRadius: 20,
    background: accent ? 'linear-gradient(180deg, var(--blue-soft) 0%, #fff 55%)' : '#fff',
    display: 'flex', flexDirection: 'column', gap: 22,
    minHeight: 520,
  }),
  svcNum: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 11, color: 'var(--ink-muted)', letterSpacing: '0.08em' },
  svcTitle: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 32, letterSpacing: '-0.02em', fontWeight: 600, lineHeight: 1.1 },
  svcLede: { fontSize: 16, lineHeight: 1.55, color: 'var(--ink-soft)' },
  svcDivider: { height: 1, background: 'var(--line)', margin: '4px 0' },
  svcListTitle: { fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-muted)', fontWeight: 600 },
  svcList: { display: 'flex', flexDirection: 'column', gap: 10 },
  svcListItem: { display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-soft)' },
  svcBullet: { flex: 'none', width: 18, height: 18, borderRadius: 5, background: 'var(--blue-soft)', color: 'var(--blue)', display: 'grid', placeItems: 'center', marginTop: 2 },
  svcFoot: { marginTop: 'auto', paddingTop: 20, borderTop: '1px dashed var(--line)', fontSize: 13, color: 'var(--ink-muted)' },
};

function SvcBullet() {
  return (
    <span style={svcStyles.svcBullet}>
      <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.2 4.2 7.4 8 3.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </span>
  );
}

function Services() {
  return (
    <section id="services" style={svcStyles.wrap} className="reveal bm-section">
      <div style={svcStyles.inner}>
        <div style={svcStyles.header} className="bm-matching-grid">
          <div>
            <div className="mono" style={svcStyles.eyebrow}>What we do</div>
            <h2 className="serif" style={svcStyles.h2}>
              The right VA, <span style={svcStyles.italic}>managed by us</span> or matched for you to run.
            </h2>
          </div>
          <p style={svcStyles.sub}>
            We work with you to design the right structure, a single generalist, a small team of specialists, or something in between, and you choose whether we run the day-to-day or hand it off to you.
          </p>
        </div>

        {/* Two-service pair */}
        <div style={svcStyles.pair} className="bm-services-grid">
          {/* Service 01: Ongoing Management */}
          <div style={svcStyles.svcCard(true)}>
            <div>
              <div style={svcStyles.svcNum}>SERVICE / 01</div>
              <h3 className="serif" style={{ ...svcStyles.svcTitle, marginTop: 8 }}>Ongoing VA Management</h3>
            </div>
            <p style={svcStyles.svcLede}>
              The part most agencies skip. We take the operational complexity of managing your VA, or your team of VAs, off your plate so the work actually ships, week after week.
            </p>
            <div style={svcStyles.svcDivider} />
            <div style={svcStyles.svcListTitle}>What we handle for you</div>
            <div style={svcStyles.svcList}>
              {[
                'Dedicated success manager who owns performance across your VA or team',
                'Weekly check-ins, priorities, and progress reports to you',
                'SOP and playbook creation so work is repeatable, not tribal',
                'Coverage and backup when your VA is out or capacity spikes',
                'Coaching, upskilling, and replacement if performance dips',
              ].map(t => (
                <div key={t} style={svcStyles.svcListItem}><SvcBullet /><span>{t}</span></div>
              ))}
            </div>
            <div style={svcStyles.svcFoot}>Add this when you want outcomes, not another report line.</div>
          </div>

          {/* Service 02: Matchmaking */}
          <div style={svcStyles.svcCard(false)}>
            <div>
              <div style={svcStyles.svcNum}>SERVICE / 02</div>
              <h3 className="serif" style={{ ...svcStyles.svcTitle, marginTop: 8 }}>VA Matchmaking</h3>
            </div>
            <p style={svcStyles.svcLede}>
              We source, vet, and match you with a virtual assistant, or a small team of them, from the top 1% of our applicant pool. Chosen for your skills, work style, tools, and time zone. Not pulled from a queue.
            </p>
            <div style={svcStyles.svcDivider} />
            <div style={svcStyles.svcListTitle}>What's included</div>
            <div style={svcStyles.svcList}>
              {[
                'Scoping call to map the role(s), tools, and success metrics',
                'Single VA or multi-VA team, whichever fits the work',
                'Candidate search and multi-stage vetting (skills, comms, culture)',
                'Shortlist of 2, 3 matches with recorded intros',
                'Onboarding plan, tool access, and kickoff week',
                'Replacement guarantee if the fit isn\'t right',
              ].map(t => (
                <div key={t} style={svcStyles.svcListItem}><SvcBullet /><span>{t}</span></div>
              ))}
            </div>
            <div style={svcStyles.svcFoot}>Choose this on its own if you want to manage the VA directly.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });