// Process.jsx — 3-step "how it works"

const STEPS = [
  { n: '01', title: 'Vous décrivez le besoin', body: "Un message, un appel. Je note le contexte — matériel, urgence, budget." },
  { n: '02', title: 'Je rédige un devis clair', body: "Pièces, main d'œuvre, délai. Pas de surprise, pas de jargon. Vous validez avant intervention." },
  { n: '03', title: 'Intervention & garantie', body: "À domicile ou en atelier. Garantie écrite sur les pièces et la main d'œuvre." }
];

function Process() {
  return (
    <section id="process" style={{ padding: '80px 0' }}>
      <div className="kit-container">
        <p className="kit-eyebrow">Comment ça marche</p>
        <h2 className="kit-h2">Trois étapes, zéro friction.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
          {STEPS.map((s, i) => (
            <div key={i} style={{ position: 'relative' }}>
              {i < STEPS.length - 1 && (
                <div style={{
                  position: 'absolute', top: 18, left: 'calc(50% + 28px)', right: 'calc(-50% + 28px)',
                  height: 1, background: 'var(--ffit-border-1)'
                }} />
              )}
              <div style={{
                fontFamily: 'var(--ffit-font-mono)',
                fontWeight: 600,
                fontSize: 13,
                color: 'var(--ffit-accent)',
                background: 'var(--ffit-blue-50)',
                width: 40, height: 40,
                borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
                position: 'relative',
                zIndex: 1
              }}>{s.n}</div>
              <h4 style={{
                fontFamily: 'var(--ffit-font-display)',
                fontSize: 20,
                fontWeight: 600,
                margin: '0 0 8px 0',
                color: 'var(--ffit-fg-1)'
              }}>{s.title}</h4>
              <p style={{
                fontFamily: 'var(--ffit-font-body)',
                fontSize: 14,
                lineHeight: 1.6,
                color: 'var(--ffit-fg-2)',
                margin: 0
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;