// Shift10 Landingpage — FAQ
function FAQSection() {
  const lp = useSanityLP();
  const items = lp?.faqItems || [
    {
      q: "Für wen ist Shift10 gemacht?",
      a: "Schweizer KMU und Verbände, die KI nicht mehr nur theoretisch verstehen wollen. Ideal für Teams zwischen 5 und 50 Personen, die intern den Schritt machen möchten — ohne Berater-Dauerabo.",
    },
    {
      q: "Was ist der Unterschied zu einem ‚normalen' KI-Workshop?",
      a: "Drei Dinge: 1) Echte Prozessanalyse vorab, keine Schablone. 2) Eine Mac-Mini-Testmaschine mit allen Premium-Tools steht eine Woche bei euch im Büro — ihr könnt unter Realbedingungen testen. 3) Kein Vendor-Lock-in: Ihr entscheidet danach selber, was bleibt.",
    },
    {
      q: "Was läuft auf der Mac-Mini-Testmaschine?",
      a: "Eine kuratierte Auswahl: ChatGPT Plus, Claude Pro, Perplexity Pro, Whisper, einige spezialisierte Schweizer Tools (Datenschutz-konform), plus lokale Modelle für sensitive Aufgaben. Liste wird vor jedem Workshop aktualisiert.",
    },
    {
      q: "Wie sieht es mit Datenschutz und DSG aus?",
      a: "Wir gehen pro Tool durch, was wo läuft (EU/CH/US), welche Daten ihr eingebt und welche besser nicht. Mike bringt die regulatorische Erfahrung aus dem Bankenumfeld mit. Konkret heisst das: klare Empfehlungen, dokumentiert.",
    },
    {
      q: "Was, wenn unser Team noch nie KI verwendet hat?",
      a: "Genau dafür ist das Format gemacht. Tag 1 ist Grundlagen + Demos, Tag 2 ist Hands-on an euren Fällen. Niemand muss vorher etwas können. Wer schon weiter ist, bekommt anspruchsvollere Aufgaben.",
    },
    {
      q: "Kann man nur den Vortrag buchen, ohne Workshop?",
      a: "Ja. Der KI-Vortrag ist eigenständig (CHF 1'500 pauschal) und ideal für Firmen-Events, Kaderveranstaltungen oder Verbandstage. Viele Kunden buchen den Vortrag zuerst und entscheiden danach für den Workshop.",
    },
    {
      q: "Wie schnell könnt ihr starten?",
      a: "Workshop-Termine in der Regel 4–6 Wochen Vorlauf. Vorträge je nach Kalender oft kürzer. Maschine kann meist innerhalb von 2 Wochen geliefert werden.",
    },
    {
      q: "Bietet Shift10 auch laufende Beratung an?",
      a: "Bewusst nein als Standard. Das ganze Angebot ist darauf ausgelegt, dass ihr nach dem Workshop selber könnt. Wenn ihr danach Coaching wollt, machen wir das stundenweise — aber nie als Retainer.",
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <span className="eyebrow">FAQ</span>
            <h2 className="display display--md" style={{ marginTop: 24, fontWeight: 500 }}>
              Die echten Fragen — direkt beantwortet.
            </h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.65, color: "var(--color-neutral-600)" }}>
              Etwas nicht dabei? Schreib direkt an{" "}
              <a href="mailto:mike@shift10.ch" style={{ color: "var(--color-black)", textDecoration: "underline", textDecorationThickness: 1, textUnderlineOffset: 4 }}>mike@shift10.ch</a>.
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <h3 className="faq-question">{it.q}</h3>
                  <span className="faq-toggle" />
                </div>
                <div className="faq-answer">
                  <p>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQSection });