/* Features */
const Features = () => {
  const big = [
    { t:'Stimme wie ein Mensch.', d:'Neueste Voice-Modelle mit Sub-800ms Latenz. Kunden merken nicht, dass sie mit einer KI sprechen — bis Sie es ihnen sagen.' },
    { t:'24/7 erreichbar.', d:'Nachts, am Wochenende, in der Schichtpause: AIVENT geht ran. Keine Pausen, keine Krankmeldungen, keine Urlaubsvertretung.' },
  ];
  const small = [
    { t:'Stammkunden-Erkennung', d:'Nummer erkannt → Adresse vorgeschlagen → in 20 Sekunden gebucht.', icon:'◉'},
    { t:'Unbegrenzte Parallelität', d:'1 oder 500 Anrufe gleichzeitig. Keine Warteschleife. Nie.', icon:'≋'},
    { t:'Live-Handover', d:'Auf Wunsch übergibt AIVENT lautlos an einen menschlichen Dispatcher.', icon:'↳'},
    { t:'Vollständiges Logging', d:'Transkript, Audio, Metadaten — DSGVO-konform in EU-Rechenzentren.', icon:'▤'},
    { t:'Sonderwünsche & Vorbestellungen', d:'Großraumtaxi, Rollator, Kindersitz, Vorbestellungen — alles erfasst und sauber ans Dispo-System übergeben.', icon:'✦'},
    { t:'Anti-Spam', d:'Erkennt Prank-Calls und Doppelbuchungen, bevor sie Ihr System erreichen.', icon:'⊘'},
  ];
  const headerRef = useReveal();
  const bigRefs = useRevealGroup(big.length, {stagger: 130, threshold: 0.15});
  const smallRefs = useRevealGroup(small.length, {stagger: 80, threshold: 0.1});

  return (
    <section id="features" className="section ink">
      <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">Features</span>
            <h2 className="h-section" style={{marginTop:24,maxWidth:1000}}>
              Gebaut für Zentralen,<br/>
              die <span style={{fontStyle:'italic',color:'var(--lime)'}}>nicht mehr</span><br/>
              wachsen sollten —<br/>
              sondern skalieren.
            </h2>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:1,background:'rgba(246,245,239,0.12)',marginBottom:1}} className="feat-big">
          {big.map((f,i)=>(
            <div ref={bigRefs[i]} className="reveal" key={i} style={{background:'var(--ink)',padding:'48px 40px',minHeight:280,display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
              <div className="mono" style={{fontSize:16,color:'var(--lime)',letterSpacing:'0.14em',fontWeight:600}}>0{i+1}</div>
              <div>
                <h3 style={{fontFamily:'var(--f-display)',fontSize:40,fontWeight:500,letterSpacing:'-0.025em',lineHeight:1,marginBottom:16}}>{f.t}</h3>
                <p style={{color:'rgba(246,245,239,0.65)',fontSize:16,lineHeight:1.5,maxWidth:440}}>{f.d}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:1,background:'rgba(246,245,239,0.12)'}} className="feat-small">
          {small.map((f,i)=>(
            <div ref={smallRefs[i]} className="reveal-pop feat-small-card" key={i} style={{background:'var(--ink)',padding:'36px 32px',minHeight:220,display:'flex',flexDirection:'column',gap:20,transition:'background .2s ease, transform .2s ease',cursor:'default'}}>
              <div className="feat-small-icon" style={{fontSize:44,color:'var(--lime)',fontFamily:'var(--f-mono)',lineHeight:1,transition:'transform .25s ease, text-shadow .25s ease'}}>{f.icon}</div>
              <h4 style={{fontFamily:'var(--f-display)',fontSize:22,fontWeight:500,letterSpacing:'-0.01em'}}>{f.t}</h4>
              <p style={{color:'rgba(246,245,239,0.6)',fontSize:14,lineHeight:1.55}}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media(max-width:960px){.feat-big,.feat-small{grid-template-columns:1fr !important}}
        .feat-small-card:hover{background:var(--ink-2) !important}
        .feat-small-card:hover .feat-small-icon{transform:translateY(-3px);text-shadow:0 0 20px var(--lime-glow)}
      `}</style>
    </section>
  );
};

window.Features = Features;