function Process() {
  const steps = [
    { n: '01', title: 'Discovery Call', body: "We'll talk through your business, your books, and what's been a headache. No pressure, no pitch." },
    { n: '02', title: 'Customized Quote', body: 'I review your current system, then send an exact quote tailored to your needs.' },
    { n: '03', title: 'Kickoff Call', body: 'We get you fully set up and walk through what to expect throughout the process.' },
    { n: '04', title: 'Clean Books', body: 'Up-to-date books and monthly reports, so you always know where you stand.' },
  ];

  return (
    <section id="process" style={{ background: '#ecf4f2', padding: '100px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#3F8074', marginBottom: 14,
          }}>THE PROCESS</div>
          <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.75rem)', fontWeight: 700, color: '#163F34', margin: 0, letterSpacing: '-0.02em' }}>
            Simple from day one.
          </h2>
        </div>

        {/* Steps grid — circles centered over each column, connecting line behind */}
        <div className="ck-process-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ position: 'absolute', top: 22, left: '12.5%', right: '12.5%', height: 1.5, background: '#cce0de', zIndex: 0 }}/>
          {steps.map(s => (
            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', position: 'relative', zIndex: 1 }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%', background: '#3F8074',
                color: '#fff', fontSize: 13, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
              }}>{s.n}</div>
              <h3 style={{ fontSize: 17, fontWeight: 700, color: '#163F34', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: '#345048', lineHeight: 1.6, margin: 0, maxWidth: 220 }}>{s.body}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="contact.html" className="ck-btn-primary" style={{
            background: '#3F8074', color: '#fff', textDecoration: 'none', border: '1.5px solid #3F8074',
            padding: '11px 32px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
            display: 'inline-block', transition: 'background .2s, color .2s, border-color .2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
          >Get Started</a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Process });