/* ROI Rechner + Versteckte Kosten */
const RoiCalc = () => {
  const [calls, setCalls] = React.useState(800);
  const [missedRate, setMissedRate] = React.useState(10);
  const [avgFare, setAvgFare] = React.useState(14);

  const missedCalls = Math.round(calls * missedRate / 100);
  const rescued = Math.round(missedCalls * 0.93);
  const rescuedMo = rescued * 30;
  const extraRev = rescuedMo * avgFare;
  const calcAiventCost = (bookings) => {
    const tier1 = Math.min(bookings, 5000);
    const tier2 = Math.min(Math.max(bookings - 5000, 0), 5000);
    const tier3 = Math.max(bookings - 10000, 0);
    return tier1 * 0.50 + tier2 * 0.45 + tier3 * 0.40;
  };
  const aiventCost = Math.round(calcAiventCost(rescuedMo));
  const dispatcherSaving = 2800;
  const netGain = extraRev + dispatcherSaving - aiventCost;
  const payback = netGain > 0 ? Math.max(1, Math.round(aiventCost / (netGain / 30))) : 30;

  const hiddenCosts = [
    {
      num:'01',
      problem:'Personal-Engpässe',
      reality:'Krankheit, Urlaub, Kündigung — eine Schicht fällt aus, und Sie disponieren selbst um 2 Uhr morgens.',
    },
    {
      num:'02',
      problem:'Steigende Lohnkosten',
      reality:'Mindestlohn steigt jedes Jahr. Nacht-, Wochenend- und Feiertagszuschläge fressen die Marge.',
    },
    {
      num:'03',
      problem:'Spitzenzeiten-Chaos',
      reality:'Freitag 23 Uhr, 40 Anrufe in der Warteschleife, 2 Dispatcher am Limit — und der Kunde wählt Uber.',
    },
    {
      num:'04',
      problem:'Fluktuation & Einarbeitung',
      reality:'Neue Dispatcher brauchen 4–6 Wochen, bis sie Dialekt, Straßen und Kundentypen beherrschen.',
    },
    {
      num:'05',
      problem:'Qualitätsschwankungen',
      reality:'Schlecht gelaunte Dispatcher vergraulen Stammkunden — Sie merken es erst an Bewertungen.',
    },
  ];

  return (
    <section className="section paper-2" id="roi">
      <div className="wrap">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:56,gap:40,flexWrap:'wrap'}}>
          <div>
            <span className="eyebrow" style={{color:'var(--lime-deep)'}}>Das echte ROI</span>
            <h2 className="h-section" style={{marginTop:24}}>
              Was die Zahlen<br/>
              nicht zeigen.
            </h2>
          </div>
          <p className="lede" style={{maxWidth:420}}>
            Rechner für den Cash-Effekt. Daneben: fünf versteckte Kosten, die eine Zentrale jeden Monat frisst — und die mit AIVENT verschwinden.
          </p>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1.05fr 1fr',gap:32,alignItems:'start'}} className="roi-grid">

          {/* LEFT: Calculator stack */}
          <div style={{display:'flex',flexDirection:'column',gap:1,background:'var(--paper-line)',border:'1px solid var(--paper-line)'}}>
            {/* Sliders */}
            <div style={{display:'flex',flexDirection:'column',gap:20,padding:'28px',background:'#fff'}}>
              <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:'var(--muted-light)'}}>ROI-RECHNER · IHRE ZAHLEN</div>
              {[
                {lbl:'Anrufe / Tag',val:calls,set:setCalls,min:50,max:3000,step:50,suffix:''},
                {lbl:'Verpasst-Rate',val:missedRate,set:setMissedRate,min:5,max:40,step:1,suffix:' %'},
                {lbl:'Ø Fahrpreis',val:avgFare,set:setAvgFare,min:6,max:40,step:1,suffix:' €'},
              ].map((s,i)=>(
                <div key={i}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:8}}>
                    <span className="mono" style={{fontSize:11,color:'var(--muted-light)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{s.lbl}</span>
                    <span style={{fontFamily:'var(--f-display)',fontSize:24,letterSpacing:'-0.02em'}}>{s.val}{s.suffix}</span>
                  </div>
                  <input type="range" className="roi-range" min={s.min} max={s.max} step={s.step} value={s.val} onChange={e=>s.set(parseInt(e.target.value))} />
                  <div style={{display:'flex',justifyContent:'space-between',marginTop:4,fontFamily:'var(--f-mono)',fontSize:9,color:'var(--muted-light)'}}>
                    <span>{s.min}{s.suffix}</span><span>{s.max}{s.suffix}</span>
                  </div>
                </div>
              ))}
            </div>

            {/* Result */}
            <div style={{background:'var(--ink)',color:'var(--paper)',padding:'28px',position:'relative',overflow:'hidden'}}>
              <div style={{position:'absolute',top:0,right:0,width:180,height:180,background:'radial-gradient(circle, var(--lime-glow), transparent 70%)',filter:'blur(40px)',opacity:0.6}}></div>
              <div style={{position:'relative'}}>
                <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.55)',marginBottom:6}}>MEHRUMSATZ / MONAT</div>
                <div className="big-num" style={{color:'var(--lime)',fontVariantNumeric:'tabular-nums',fontSize:'clamp(44px,5.2vw,72px)'}}>
                  + {netGain.toLocaleString('de-DE')} €
                </div>
              </div>
              <div style={{position:'relative',display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginTop:20,borderTop:'1px solid var(--ink-line)',paddingTop:20}}>
                <div>
                  <div className="mono" style={{fontSize:10,color:'rgba(246,245,239,0.5)',marginBottom:4}}>GERETTETE FAHRTEN</div>
                  <div style={{fontFamily:'var(--f-display)',fontSize:22}}>{rescuedMo.toLocaleString('de-DE')} / Mo</div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:10,color:'rgba(246,245,239,0.5)',marginBottom:4}}>KOSTEN AIVENT</div>
                  <div style={{fontFamily:'var(--f-display)',fontSize:22}}>€ {aiventCost.toLocaleString('de-DE')}</div>
                </div>
              </div>
              <div className="mono" style={{position:'relative',fontSize:10,color:'rgba(246,245,239,0.4)',marginTop:16,lineHeight:1.5,letterSpacing:'0.02em'}}>
                KONSERVATIV AUF BASIS VON BRANCHENBENCHMARKS. IHRE ECHTEN WERTE SIND WAHRSCHEINLICH HÖHER.
              </div>
            </div>
          </div>

          {/* RIGHT: Hidden costs stack */}
          <div style={{display:'flex',flexDirection:'column',gap:1,background:'var(--paper-line)',border:'1px solid var(--paper-line)'}}>
            <div style={{padding:'14px 22px',background:'#fff'}}>
              <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:'var(--muted-light)'}}>VERSTECKTE KOSTEN · OHNE AIVENT</div>
            </div>
            {hiddenCosts.map((c,i)=>(
              <div key={i} style={{background:'#fff',padding:'24px 26px'}}>
                <div style={{display:'flex',alignItems:'baseline',gap:16,marginBottom:14}}>
                  <span style={{fontFamily:'var(--f-mono)',fontSize:18,color:'var(--lime-deep)',fontWeight:600,letterSpacing:'0.02em',lineHeight:1}}>{c.num}</span>
                  <span style={{fontFamily:'var(--f-display)',fontSize:21,letterSpacing:'-0.015em',fontWeight:500,lineHeight:1.15}}>{c.problem}</span>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:12,alignItems:'start',paddingLeft:42}}>
                  <div style={{fontFamily:'var(--f-display)',fontSize:40,lineHeight:0.7,color:'rgba(10,11,8,0.28)',fontWeight:500,paddingTop:8}}>&ldquo;</div>
                  <div style={{fontFamily:'var(--f-sans)',fontSize:14,lineHeight:1.55,color:'rgba(10,11,8,0.72)',letterSpacing:'-0.003em',fontWeight:400}}>{c.reality}</div>
                </div>
              </div>
            ))}
          </div>

        </div>
      </div>
      <style>{`@media(max-width:960px){.roi-grid{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
};

window.RoiCalc = RoiCalc;