// faq.jsx — FAQ section, accordion-style; mirrors FAQPage JSON-LD in <head>

const FAQ_ITEMS = [
  { q: "Welche Prozesse lassen sich mit KI automatisieren?",
    a: "Geeignet sind regelhafte, wiederkehrende und gut dokumentierte Prozesse: Lead-Qualifizierung, Angebotsvorbereitung, Stammdatenpflege, wiederkehrende Kundenanfragen, internes Wissensmanagement und Reporting. Komplexe Einzelfallentscheidungen bleiben beim Menschen." },
  { q: "Was kostet eine KI-Automatisierung für Unternehmen?",
    a: "Pro Use Case wird ein Festpreis vereinbart. Ein operativer Prototyp liegt typischerweise im niedrigen bis mittleren vierstelligen Bereich, ein produktiv integriertes System darüber. Der KI-Potenzialcheck ist kostenfrei." },
  { q: "Wie lange dauert die Umsetzung einer KI-Automation?",
    a: "Ein Prototyp ist in rund 14 Tagen testbar. Eine produktive Integration mit Anbindung an deine Systeme dauert je nach Komplexität 4 bis 8 Wochen." },
  { q: "Ist KI-Automatisierung DSGVO-konform möglich?",
    a: "Ja. Wir wählen Modelle, Hosting und Datenflüsse so, dass sie zu deiner Datenschutzlage passen — inklusive EU-Hosting, Auftragsverarbeitung und Zugriffstrennung. Personenbezogene Daten werden minimiert oder maskiert, wo möglich." },
  { q: "Welche Tools können angebunden werden?",
    a: "CRM (HubSpot, Pipedrive, Salesforce), ERP, Mail, Kalender, Messenger (WhatsApp Business, Slack, Teams), Telefonie und beliebige Systeme mit API. Für Workflows kommen n8n, OpenAI und Supabase zum Einsatz." },
  { q: "Lohnt sich KI-Beratung für kleine und mittelständische Unternehmen?",
    a: "Gerade für KMU ist der Hebel hoch: schon ein automatisierter Prozess — etwa Lead-Response oder Angebotsvorbereitung — kann mehrere Stunden pro Tag freisetzen. Voraussetzung ist eine ehrliche Priorisierung statt KI-Spielerei." },
  { q: "Was ist der Unterschied zwischen KI-Agenten und klassischer Automatisierung?",
    a: "Klassische Automation folgt festen Regeln. Ein KI-Agent kann unstrukturierte Eingaben verstehen, Werkzeuge eigenständig aufrufen und Entscheidungen begründen. In der Praxis wird beides kombiniert — Regeln für Verlässlichkeit, Agenten für Flexibilität." },
  { q: "Wie läuft ein KI-Potenzialcheck ab?",
    a: "30 Minuten Call. Du beschreibst zwei bis drei manuelle Prozesse, ich zeige, wo KI realistisch wirkt und wo nicht. Du bekommst eine priorisierte Liste mit Aufwandsschätzung." },
  { q: "Kann ein AI-Agent Leads automatisch qualifizieren?",
    a: "Ja. Eingehende Anfragen werden klassifiziert, mit fehlenden Informationen angereichert und im CRM mit vollständigem Kontext angelegt. Die Erstantwort erfolgt in unter zwei Minuten — über Mail, WhatsApp oder Webchat." },
  { q: "Können Angebote automatisch erstellt werden?",
    a: "Ja. Ein Agent extrahiert die Anfrage, prüft Verfügbarkeit gegen ERP oder Preisliste und erzeugt ein geprüftes Angebot aus deiner Vorlage — inklusive Versionierung und CRM-Eintrag." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section sec-faq" aria-labelledby="faq-heading">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal">FAQ</span>
            <h2 id="faq-heading" className="h-1 reveal" style={{"--reveal-delay":"60ms", marginTop:"16px"}}>
              Häufig gestellte Fragen zu KI-Beratung und Automatisierung.
            </h2>
          </div>
          <p className="muted reveal" style={{"--reveal-delay":"120ms"}}>
            Antworten auf die Fragen, die in fast jedem ersten Gespräch auftauchen — DSGVO,
            Aufwand, Tools, ROI, Unterschied zwischen KI-Agenten und Automation.
          </p>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            const id = `faq-${i}`;
            return (
              <div key={i} className={`faq-row ${isOpen ? "open" : ""}`}>
                <h3 className="faq-q">
                  <button
                    type="button"
                    aria-expanded={isOpen}
                    aria-controls={`${id}-a`}
                    id={`${id}-q`}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="faq-btn"
                  >
                    <span>{item.q}</span>
                    <svg className="faq-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                      <path d="M3 6l5 5 5-5" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                </h3>
                <div
                  id={`${id}-a`}
                  role="region"
                  aria-labelledby={`${id}-q`}
                  className="faq-a"
                  hidden={!isOpen}
                >
                  <p>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
        <div className="faq-cta reveal">
          <p className="muted">Frage nicht dabei? <a href="#contact">Direkt im KI-Potenzialcheck klären →</a></p>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;
