/* Shared data + header for the Matching variants. */

const matchingStepsData = [
  {
    n: '01',
    title: 'Discover',
    body: "We start with a short call and a quick assessment to understand how you work, what you want to delegate, and what kind of support will fit best.",
  },
  {
    n: '02',
    title: 'Match',
    body: "We shortlist individuals based on skill set, personality, and work style, and you choose who you feel would be the best fit for you.",
  },
  {
    n: '03',
    title: 'Manage',
    body: "Once matched, we handle onboarding, ongoing support, and coaching to help set your VA up for success and keep everything running smoothly.",
  },
];

function MatchingHeader({ subCopy }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 80,
        marginBottom: 64,
        alignItems: 'end',
      }}
      className="bm-matching-grid"
    >
      <div>
        <div
          className="mono"
          style={{
            fontSize: 12, color: 'var(--blue)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            fontWeight: 500, marginBottom: 20,
          }}
        >
          How it works
        </div>
        <h2
          className="serif"
          style={{
            fontFamily: "'Outfit', system-ui, sans-serif",
            fontSize: 52, lineHeight: 1.05,
            letterSpacing: '-0.03em', fontWeight: 600,
            color: 'var(--ink)',
          }}
        >
          Discover. Match. <span style={{ color: 'var(--blue)' }}>Manage.</span>
        </h2>
      </div>
      <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-muted)' }}>
        {subCopy || 'Three steps, from the first call to your VA shipping work in your business. Every step is documented; nothing happens behind a curtain.'}
      </p>
    </div>
  );
}

Object.assign(window, { matchingStepsData, MatchingHeader });