// VOELKER.AI — Part 3: Testimonials, FAQ, Contact, Footer

const { useState: useState3 } = React;

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  return (
    <section className="section container" id="referenzen">
      <div className="section-head">
        <span className="eyebrow">Referenzen</span>
        <h2 className="h2">
          Was Partner sagen, <span className="italic">nachdem</span> der Bot live ist.
        </h2>
      </div>

      <div className="testimonials-grid">
        <div className="testimonial feature">
          <div className="quote">
            „Wir haben in 21 Tagen einen WhatsApp-Bot live gestellt, der jetzt
            <span className="pull"> 3,5 Stunden Bearbeitung pro Tag </span>
            ersetzt. Thomas hat nicht über KI geredet — er hat sie eingebaut."
          </div>
          <div className="who">
            <div className="avatar">M</div>
            <div>
              <div className="name">Markus H.</div>
              <div className="role">Reisebüro-Inhaber · München</div>
            </div>
          </div>
        </div>

        <div className="testimonial">
          <div className="quote">
            „Unsere Erreichbarkeit hat sich messbar verbessert. Kunden lieben,
            dass sie nachts um 23 Uhr eine echte Antwort bekommen."
          </div>
          <div className="who">
            <div className="avatar">S</div>
            <div>
              <div className="name">Dr. Sabine R.</div>
              <div className="role">Tierarztpraxis · Köln</div>
            </div>
          </div>
        </div>

        <div className="testimonial">
          <div className="quote">
            „Das Training war praxisnah und hat uns die Sicherheit gegeben,
            KI rechtssicher in unseren Beratungsalltag zu integrieren."
          </div>
          <div className="who">
            <div className="avatar">J</div>
            <div>
              <div className="name">Jan K.</div>
              <div className="role">Versicherungsmakler · Stuttgart</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    {
      q: "Für wen lohnt sich das wirklich?",
      a: "Wenn Sie täglich mehr als 30 wiederkehrende Kundenanfragen haben, ein kleines Team und das Gefühl, dass Sie eigentlich keine 'Anfragen-Sortier-Firma' sein wollten — dann lohnt es sich. Ich sage Ihnen im Erstgespräch ehrlich, ob ja oder nein.",
    },
    {
      q: "Brauche ich dafür eine eigene IT-Abteilung?",
      a: "Nein. Wir arbeiten mit Tools wie Superchat, Fonio, n8n, OpenAI und Claude — alles standardisiert, DSGVO-konform und ohne dass Sie einen Server anfassen müssen. Ich übernehme die Einrichtung; Sie übernehmen das Geschäft.",
    },
    {
      q: "Was kostet ein Projekt — ehrlich?",
      a: "Ein Pilot startet typischerweise zwischen 4.800 € und 12.000 € — je nach Use-Case-Tiefe. Keynote-Honorare und Training-Pakete bekommen Sie auf Anfrage. Wir reden im Erstgespräch über Größenordnung, bevor irgendwas vereinbart wird.",
    },
    {
      q: "Wie ist das mit der DSGVO und dem EU AI Act?",
      a: "Beide sind mein Tagesgeschäft. Wir nutzen ausschließlich EU-Hosting bzw. Anbieter mit DPA, dokumentieren Datenflüsse und schulen Ihr Team auf rechtssicheren Umgang. Mein TÜV-Zertifikat ist nicht für die Wand, sondern für Ihre Audits.",
    },
    {
      q: "Was, wenn die KI Quatsch antwortet?",
      a: "Sie wird gelegentlich. Deshalb baue ich Systeme mit klarer Eskalationslogik: Bei Unsicherheit übergibt der Bot an einen Menschen. Sie behalten die Kontrolle, die KI macht den Großteil. Das ist nicht 'AGI' — das ist solides Engineering.",
    },
    {
      q: "Reden wir Deutsch oder Englisch?",
      a: "Beratung und Trainings auf Deutsch. Systeme können beliebige Sprachen — Ihre Webseite spricht morgen auch Türkisch, Polnisch oder Englisch.",
    },
  ];
  return (
    <section className="section container" id="faq">
      <div className="section-head">
        <span className="eyebrow">FAQ</span>
        <h2 className="h2">
          Die Fragen, die <span className="italic pink">jeder</span> hat.
        </h2>
      </div>
      <div className="faq-list">
        {items.map((it, i) => (
          <details className="faq-item" key={i} open={i === 0}>
            <summary>{it.q}</summary>
            <div className="answer">{it.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

/* ---------- CONTACT ---------- */
function Contact() {
  const BOOKING_URL = "https://voelker.link/checktermin";
  return (
    <section className="section contact" id="kontakt">
      <div className="container">
        <div className="contact-grid">
          <div>
            <span className="eyebrow">Kontakt</span>
            <h2 className="h2" style={{marginTop: 18}}>
              Bereit für den<br/>
              <span className="italic pink">nächsten Schritt?</span>
            </h2>
            <p className="lede" style={{marginTop: 24}}>
              20 Minuten, ehrliches Gespräch, kein Pitch. Wenn KI für Sie nicht
              passt, sage ich das auch.
            </p>

            <div className="channels">
              <a className="ch" href={BOOKING_URL} target="_blank" rel="noopener">
                <div className="icon"><Icon.Cal /></div>
                <div>
                  <div className="lbl">Direkt buchen</div>
                  <div className="val">20-Minuten-Termin im Kalender</div>
                </div>
              </a>
              <a className="ch" href="mailto:aicoachpro@voelker.ai">
                <div className="icon"><Icon.Mail /></div>
                <div>
                  <div className="lbl">E-Mail</div>
                  <div className="val">aicoachpro@voelker.ai</div>
                </div>
              </a>
              <div className="ch">
                <div className="icon"><Icon.Map /></div>
                <div>
                  <div className="lbl">Einsatzgebiet</div>
                  <div className="val">DACH-Region</div>
                </div>
              </div>
            </div>
          </div>

          <div className="booking-card">
            <div className="booking-top">
              <span className="tag"><span className="dot"></span> Kostenfrei · unverbindlich</span>
              <div className="booking-dur">
                <span className="num">20</span>
                <span className="unit">Min</span>
              </div>
            </div>
            <h3 className="booking-h">Check-Termin buchen</h3>
            <p className="booking-p">
              Sie zeigen mir, wo Ihr Tag heute Zeit verliert. Ich sage Ihnen ehrlich,
              ob &amp; wo KI sich für Sie lohnt — ohne Verkaufsmasche.
            </p>
            <ul className="booking-list">
              <li><Icon.Check /> 20 Minuten per Video — Sie wählen den Slot</li>
              <li><Icon.Check /> Konkrete Ersteinschätzung statt Strategiefolien</li>
              <li><Icon.Check /> Für Unternehmen in der DACH-Region</li>
            </ul>
            <a className="btn btn-primary booking-btn" href={BOOKING_URL} target="_blank" rel="noopener">
              Termin auswählen <Icon.Arrow />
            </a>
            <div className="booking-foot">
              Lieber schreiben? <a href="mailto:aicoachpro@voelker.ai">aicoachpro@voelker.ai</a> · oder per WhatsApp unten rechts
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="footer-brand">
              <img src="assets/logo.png" alt="" />
              <div>
                <div className="name">Thomas<span className="pink"> Völker</span></div>
                <p>Deutschlands erster TÜV-geprüfter KI-Trainer in der Finanzdienstleistung.</p>
              </div>
            </div>
          </div>
          <div className="footer-col">
            <h5>Navigation</h5>
            <ul>
              <li><a href="#expertise">Über mich</a></li>
              <li><a href="#leistungen">Leistungen</a></li>
              <li><a href="#usecase">Cases</a></li>
              <li><a href="#keynote">Keynotes</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="Impressum.html">Impressum</a></li>
              <li><a href="Datenschutz.html">Datenschutz</a></li>
              <li><a href="AGB.html">AGB</a></li>
              <li><a href="Auftragsverarbeitung.html">Auftragsverarbeitung</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Kontakt</h5>
            <ul>
              <li><a href="mailto:aicoachpro@voelker.ai">aicoachpro@voelker.ai</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">YouTube</a></li>
              <li><a href="#kontakt">Erstgespräch buchen</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Thomas Völker · VOELKER.AI</span>
          <span>DESIGN &amp; ENTWICKLUNG MIT <span className="pink">KI</span></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, FAQ, Contact, Footer });