/* Pain / Problem Section */
const PainSection = () => {
  const [missed, setMissed] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setMissed(m => m + Math.floor(Math.random()*3) + 1), 900);
    return () => clearInterval(t);
  }, []);

  const leftRef = useReveal();
  const cardRef = useReveal({delay: 120});

  return (
    <section className="section ink-2" style={{borderTop:'1px solid var(--ink-line)',borderBottom:'1px solid var(--ink-line)'}}>
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:80,alignItems:'center'}} className="pain-grid">
          <div ref={leftRef} className="reveal">
            <span className="eyebrow">Das Problem</span>
            <h2 className="h-section" style={{marginTop:24}}>
              Jeden Tag<br/>
              klingeln bei<br/>
              Ihnen <span style={{color:'var(--lime)'}}>Umsätze</span><br/>
              ins Leere.
            </h2>
            <p className="lede" style={{marginTop:32}}>
              Jeder verpasste Anruf ist eine leere Fahrt, die nie stattfindet. Während die Zentrale besetzt ist, ruft der Kunde beim Nächsten an.
            </p>
          </div>

          <div ref={cardRef} className="reveal">
            <div className="card" style={{background:'var(--ink)',padding:40}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
                <span className="mono" style={{color:'rgba(246,245,239,0.5)',fontSize:12}}>VERPASSTE ANRUFE · LIVE / DE</span>
                <span className="mono" style={{color:'var(--danger)',fontSize:12,display:'inline-flex',alignItems:'center',gap:6}}><span style={{width:6,height:6,background:'var(--danger)',borderRadius:'50%'}}></span>TICKING</span>
              </div>
              <div className="big-num" style={{color:'var(--danger)',fontVariantNumeric:'tabular-nums'}}>
                {missed.toLocaleString('de-DE')}
              </div>
              <div className="mono" style={{color:'rgba(246,245,239,0.5)',fontSize:12,marginTop:12}}>
                ≈ € {(missed*14.20).toLocaleString('de-DE',{maximumFractionDigits:0})} entgangener Umsatz · heute
              </div>
              <div style={{height:1,background:'var(--ink-line)',margin:'32px 0'}}></div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
                <div>
                  <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.45)',marginBottom:6}}>SPITZENZEITEN</div>
                  <div style={{fontFamily:'var(--f-display)',fontSize:26}}>bis zu 25%</div>
                  <div style={{fontSize:12,color:'rgba(246,245,239,0.5)'}}>unbeantwortete Anrufe*</div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.45)',marginBottom:6}}>NACHT &amp; PEAK</div>
                  <div style={{fontFamily:'var(--f-display)',fontSize:26}}>&gt; 1 Min</div>
                  <div style={{fontSize:12,color:'rgba(246,245,239,0.5)'}}>Warteschleife keine Seltenheit*</div>
                </div>
              </div>
              <div className="mono" style={{fontSize:10,color:'rgba(246,245,239,0.35)',marginTop:20,lineHeight:1.5,letterSpacing:'0.02em'}}>
                * DACH-BRANCHENBENCHMARKS &amp; CALL-CENTER-STUDIEN (SQM GROUP 2024, STUTTGART 2022). INDIVIDUELLE WERTE VARIIEREN.
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media(max-width:960px){.pain-grid{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
};

window.PainSection = PainSection;