/* FAQ + Final CTA + Footer */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q:'Merken meine Anrufer, dass sie mit einer KI sprechen?', a:'In den allermeisten Fällen nein — AIVENT klingt wie ein Mensch. Da die transparente Kennzeichnung von KI-Systemen künftig EU-weit Pflicht wird, legen wir von Anfang an offen: AIVENT kündigt sich zu Beginn jedes Anrufs kurz als KI-Assistent an. Der Gesprächsverlauf bleibt davon unberührt.' },
    { q:'Wie lange dauert die Aufschaltung?', a:'Meist 24–48 Stunden. Sie geben uns Ihre Nummer zur Anrufweiterleitung oder Ihren SIP-Trunk, wir kümmern uns um die Dispatcher-Integration. Auf Wunsch passen wir Ansagen, Gesprächsabläufe und individuelle Abfragen an Ihre Abläufe an. Parallelbetrieb zu Ihren Disponenten ist möglich.' },
    { q:'Was passiert, wenn AIVENT eine Adresse nicht versteht?', a:'Zweimal nachfragen, dann sauberes Handover an einen menschlichen Dispatcher. Keine aufgelegten Kunden, keine Fehlbuchungen.' },
    { q:'Ist das DSGVO-konform?', a:'Ja. Server in Frankfurt, AV-Vertrag, Löschfristen konfigurierbar. Sprach- und Textdaten bleiben in der EU. Ein TOM-Katalog liegt für Ihren Datenschutzbeauftragten bereit.' },
    { q:'Was, wenn ich meinen Dispo-Stack nicht wechseln will?', a:'Müssen Sie nicht. AIVENT lässt sich an Ihr bestehendes Dispatcher-System anbinden — über REST, Webhooks oder SIP. Wenn Ihr System eine API hat, sprechen wir mit ihm. Wir migrieren nichts.' },
    { q:'Was, wenn AIVENT nicht erreichbar ist?', a:'Für Sie gilt: kein Anruf geht verloren. Wir streben eine Verfügbarkeit von über 99 % im Jahresmittel an. Sollte AIVENT einmal nicht antworten können, wird der Anruf automatisch an Ihre Zentrale zurückgeleitet.' },
    { q:'Kann ich selbst entscheiden, was AIVENT fragt und macht?', a:'Ja — jede Zentrale arbeitet anders. Sie entscheiden, welche Felder AIVENT abfragt (Name, Rückrufnummer, Sonderwünsche wie Kindersitz, Rollator oder Großraum), welche Sätze er verwendet, wie er sich meldet und wann er an einen Menschen übergibt. Individuelle Anpassungen — von eigenen Begrüßungsansagen bis zu speziellen Workflows für Großkunden — setzen wir auf Zuruf um. Wenn etwas wirklich nicht geht, sagen wir\u00a0es.' },
  ];
  return (
    <section className="section paper" id="faq">
      <div className="wrap" style={{maxWidth:1040}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:48,gap:40,flexWrap:'wrap'}}>
          <div>
            <span className="eyebrow" style={{color:'var(--lime-deep)'}}>Häufige Fragen</span>
            <h2 className="h-section" style={{marginTop:24}}>Was Zentralen<br/>am häufigsten fragen.</h2>
          </div>
        </div>
        <div className="acc">
          {items.map((it,i)=>(
            <div key={i} className={`acc-item ${open===i?'open':''}`}>
              <button className="acc-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="acc-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="section ink" id="demo" style={{padding:'140px 0',position:'relative',overflow:'hidden'}}>
    <div className="grid-bg"></div>
    <div style={{position:'absolute',left:'50%',top:'50%',transform:'translate(-50%,-50%)',width:700,height:700,background:'radial-gradient(circle, var(--lime-glow) 0%, transparent 60%)',filter:'blur(60px)',opacity:0.5,pointerEvents:'none'}}></div>
    <div className="wrap" style={{position:'relative',textAlign:'center'}}>
      <div className="floating-pill" style={{marginBottom:32}}>
        <span className="dot-wrap"><span className="live-dot"></span></span>
        <span>DEMO-SLOTS DIESE WOCHE: 3 FREI</span>
      </div>
      <h2 className="h-display" style={{maxWidth:1200,margin:'0 auto'}}>
        30 Minuten.<br/>
        Ein <span style={{color:'var(--lime)',fontStyle:'italic',fontWeight:400}}>echter</span> Anruf.<br/>
        Null Bullshit.
      </h2>
      <p className="lede" style={{margin:'32px auto 0',textAlign:'center'}}>
        Sie geben uns Ihre Nummer, wir rufen AIVENT live an und Sie hören, wie er Ihre Zentrale disponiert. Keine PowerPoint, kein Sales-Pitch.
      </p>
      <div style={{display:'flex',gap:12,justifyContent:'center',marginTop:40,flexWrap:'wrap'}}>
        <a href="demo.html" className="btn btn-primary" style={{padding:'20px 28px',fontSize:16}}>Demo-Termin buchen <span className="arrow">↗</span></a>
        <a href="tel:+4917244942270" className="btn btn-ghost" style={{padding:'20px 28px',fontSize:16}}>☎  +49 172 4494227</a>
      </div>
      <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.45)',marginTop:48,letterSpacing:'0.12em'}}>
        KEINE KREDITKARTE · 14 TAGE TEST · MONATLICH KÜNDBAR
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer style={{background:'var(--ink)',borderTop:'1px solid var(--ink-line)',padding:'64px 0 32px'}}>
    <div className="wrap">
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr',gap:48,marginBottom:64}} className="footer-grid">
        <div>
          <div className="logo" style={{marginBottom:16}}>AIVENT</div>
          <p style={{fontSize:14,color:'rgba(246,245,239,0.55)',maxWidth:320,lineHeight:1.55}}>
            Der KI Voice Agent für Taxizentralen. Made in Dresden, hosted in Frankfurt.
          </p>
        </div>
        {[
          {t:'Produkt',l:[{n:'Features',h:'/#features'},{n:'Integrationen',h:'/#integrationen'},{n:'WhatsApp',h:'whatsapp.html'},{n:'Preise',h:'/#preise'}]},
          {t:'Unternehmen',l:[{n:'Über uns',h:'ueber-uns.html'},{n:'Karriere',h:'karriere.html'},{n:'Kontakt',h:'kontakt.html'}]},
          {t:'Ressourcen',l:[{n:'ROI-Rechner',h:'/#roi'}]},
          {t:'Rechtliches',l:[{n:'Impressum',h:'impressum.html'},{n:'Datenschutz',h:'datenschutz.html'}]},
        ].map((c,i)=>(
          <div key={i}>
            <div className="mono" style={{fontSize:11,letterSpacing:'0.12em',color:'rgba(246,245,239,0.4)',marginBottom:16}}>{c.t.toUpperCase()}</div>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10,fontSize:14}}>
              {c.l.map((x,j)=><li key={j}><a style={{color:'rgba(246,245,239,0.75)'}} href={x.h}>{x.n}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{borderTop:'1px solid var(--ink-line)',paddingTop:24,display:'flex',justifyContent:'space-between',fontSize:12,color:'rgba(246,245,239,0.4)',fontFamily:'var(--f-mono)',flexWrap:'wrap',gap:12}}>
        <span>© 2026 Aivent UG (haftungsbeschränkt) · Alle Rechte vorbehalten</span>
        <span>v 2.4.1 · SYSTEMS OPERATIONAL</span>
      </div>
    </div>
    <style>{`@media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr !important}}`}</style>
  </footer>
);

window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
