// How it works — 4 steps on a connected timeline
const howStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)', position: 'relative' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 110, gap: 40 },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0, maxWidth: 760,
  },
  kicker: {
    fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)',
    maxWidth: 320,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
    position: 'relative',
  },
  step: {
    padding: '28px 28px 28px 0',
    position: 'relative',
  },
  stepInner: {
    paddingRight: 28,
    borderRight: '1px solid var(--line)',
    minHeight: 280,
    display: 'flex', flexDirection: 'column',
  },
  lastInner: { borderRight: 'none' },
  stepNum: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '.16em', color: 'var(--ink-3)',
    marginBottom: 20,
  },
  stepIcon: {
    width: 52, height: 52, borderRadius: 12,
    display: 'grid', placeItems: 'center',
    background: 'rgba(var(--accent-rgb),.08)',
    border: '1px solid rgba(var(--accent-rgb),.24)',
    color: 'var(--accent)',
    marginBottom: 20,
  },
  stepH: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 26, lineHeight: 1.15, margin: 0, marginBottom: 20,
    letterSpacing: '-0.01em',
  },
  stepP: { fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 },

  arrow: {
    position: 'absolute', right: -7, top: 54,
    width: 14, height: 14, display: 'grid', placeItems: 'center',
    background: 'var(--bg)',
  },

  diagram: {
    marginTop: 80,
    padding: 32,
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    background: 'var(--panel)',
  },
  diagramHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginBottom: 24,
  },
  diagramTitle: {
    fontFamily: "'Instrument Serif', serif", fontSize: 22, margin: 0,
  },
  flow: {
    display: 'grid',
    gridTemplateColumns: 'repeat(5, 1fr)',
    alignItems: 'center',
    gap: 8,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12,
    color: 'var(--ink-2)',
  },
  chip: {
    padding: '10px 14px',
    border: '1px solid var(--line-2)',
    borderRadius: 10,
    background: 'var(--bg)',
    display: 'flex', alignItems: 'center', gap: 8,
  },
  chipDot: { width: 6, height: 6, borderRadius: 999 },
  arrowRight: { justifySelf: 'center', opacity: .5 },
};

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Campagne ciblée', d: 'Nous diffusons vos offres sur nos plateformes sociales, calibrées par secteur, zone et persona.', icon: 'campaign' },
    { n: '02', t: 'Formulaire qualifiant', d: 'Le prospect répond à des questions précises. Seuls les dossiers complets et conformes sont conservés.', icon: 'form' },
    { n: '03', t: 'Livraison CRM', d: 'Le lead atterrit dans votre CRM ou une Google Sheet en moins de 90 secondes.', icon: 'deliver' },
    { n: '04', t: 'Vous payez, on livre', d: 'Tarif PPL ajusté à votre secteur, dégressif au volume. Zéro lead fantôme.', icon: 'pay' },
  ];

  return (
    <section id="comment" style={howStyles.wrap} className="dotgrid section-pad">
      <div className="wrap">
        <div style={howStyles.head} className="how-head">
          <h2 style={howStyles.title} className="h-display-2">
            Un pipeline <span className="serif italic" style={{color:'var(--accent)'}}>propre</span>,<br/>
            livré en 90&nbsp;secondes.
          </h2>
          <p style={howStyles.kicker}>
            Quatre étapes, zéro intermédiaire. Le prospect arrive qualifié, tagué, prêt à être rappelé.
          </p>
        </div>

        <div style={howStyles.grid} className="grid-4">
          {steps.map((s, i) => (
            <div key={s.n} style={howStyles.step}>
              <div className="how-step-inner" style={{...howStyles.stepInner, ...(i === steps.length - 1 ? howStyles.lastInner : {})}}>
                <div style={howStyles.stepNum}>ÉTAPE {s.n}</div>
                <StepIcon kind={s.icon} />
                <h3 style={howStyles.stepH}>{s.t}</h3>
                <p style={howStyles.stepP}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={howStyles.diagram}>
          <div style={howStyles.diagramHead}>
            <h3 style={howStyles.diagramTitle}>Schéma technique · flux d'intégration</h3>
            <span className="mono" style={{fontSize: 11, color:'var(--ink-3)', letterSpacing:'.16em'}}>WEBHOOK · ZAPIER · API</span>
          </div>
          <div style={howStyles.flow} className="how-flow">
            <div style={howStyles.chip}><span style={{...howStyles.chipDot, background:'#FF6B9E'}}/>ads.meta</div>
            <div style={howStyles.arrowRight} className="arrow-h">→</div>
            <div style={howStyles.chip}><span style={{...howStyles.chipDot, background:'var(--accent)'}}/>backmeup.validate()</div>
            <div style={howStyles.arrowRight} className="arrow-h">→</div>
            <div style={howStyles.chip}><span style={{...howStyles.chipDot, background:'#6D5BFF'}}/>votre_crm.push()</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StepIcon({ kind }) {
  const c = { width: 20, height: 20, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5 };
  return (
    <div style={howStyles.stepIcon}>
      {kind === 'campaign' && <svg {...c} viewBox="0 0 20 20"><path d="M3 8v4h3l6 4V4L6 8H3zM14 7a4 4 0 010 6"/></svg>}
      {kind === 'form'     && <svg {...c} viewBox="0 0 20 20"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M7 8h6M7 11h6M7 14h3"/></svg>}
      {kind === 'deliver'  && <svg {...c} viewBox="0 0 20 20"><path d="M3 10l7-6 7 6v7H3z"/><path d="M8 17v-5h4v5"/></svg>}
      {kind === 'pay'      && <svg {...c} viewBox="0 0 20 20"><rect x="3" y="5" width="14" height="10" rx="2"/><path d="M3 9h14"/></svg>}
    </div>
  );
}

Object.assign(window, { HowItWorks });