/* How it works */
const HowItWorks = () => {
  const steps = [
    { n:'01', t:'Anruf klingelt rein', d:'Kunde ruft Ihre bestehende Taxi-Nummer. Wenn besetzt ist, geht AIVENT ran — Stimme wie ein Mensch, mit Ihrem Markennamen.', meta:'KEIN PORT, KEINE NEUE NUMMER' },
    { n:'02', t:'Dialog & Verstehen', d:'AIVENT führt ein natürliches Gespräch. Versteht Dialekt, Hintergrundlärm, unvollständige Adressen. Fragt nach, bestätigt, erkennt Stammkunden.', meta:'<800ms LATENZ' },
    { n:'03', t:'Disposition', d:'Adresse, Zielort, Personenzahl, Sonderwünsche — landen in Echtzeit in Ihrem Dispatcher-System. Wagen wird automatisch zugewiesen.', meta:'TAXI.EU · GEFOS · CUSTOM API' },
    { n:'04', t:'Bestätigung', d:'Kunde erhält SMS oder WhatsApp mit Fahrer, Kennzeichen und Ankunftszeit. Fahrer sieht den Auftrag in der Flotten-App. Ihre Zentrale sieht alles im Dashboard.', meta:'FULL AUDIT TRAIL' },
  ];
  const headerRef = useReveal();
  const stepRefs = useRevealGroup(steps.length, {stagger: 130, threshold: 0.12});

  return (
    <section className="section paper-2" id="so-funktionierts">
      <div className="wrap">
        <div ref={headerRef} className="reveal" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:80,gap:40,flexWrap:'wrap'}}>
          <div>
            <span className="eyebrow" style={{color:'var(--lime-deep)'}}>So funktioniert's</span>
            <h2 className="h-section" style={{marginTop:24,maxWidth:900}}>
              Vier Schritte. Kein<br/>
              Dispatcher-Headset.<br/>
              <span style={{color:'var(--muted-light)'}}>Läuft um 3 Uhr nachts genauso wie zu Stoßzeiten.</span>
            </h2>
          </div>
          <div className="tag" style={{alignSelf:'flex-start'}}>LIVE IN &lt; 48h</div>
        </div>

        <div style={{borderTop:'1px solid var(--paper-line)'}}>
          {steps.map((s,i)=>(
            <div ref={stepRefs[i]} key={s.n} className="step-row reveal" style={{display:'grid',gridTemplateColumns:'80px 1fr 2fr 180px',gap:32,padding:'40px 0',borderBottom:'1px solid var(--paper-line)',alignItems:'start'}}>
              <div className="mono" style={{color:'var(--muted-light)',fontSize:13}}>{s.n}</div>
              <h3 className="h-sub">{s.t}</h3>
              <p style={{color:'rgba(10,11,8,0.7)',fontSize:17,lineHeight:1.5,maxWidth:520}}>{s.d}</p>
              <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:'var(--muted-light)',textAlign:'right'}}>{s.meta}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:960px){.step-row{grid-template-columns:60px 1fr !important} .step-row > p, .step-row > .mono:last-child{grid-column:1/-1}}`}</style>
    </section>
  );
};

window.HowItWorks = HowItWorks;