/* global React, useReveal, SectionHeader, useState */

const FAQS = [
  {
    q: "Wie läuft die Video-Hilfe genau ab?",
    a: "Sie bekommen von mir per WhatsApp oder E-Mail einen Link (FaceTime, Jitsi oder Google Meet). Ein Klick und Sie sind drin — keine App-Installation nötig. Sie teilen Ihren Bildschirm, ich sehe was bei Ihnen passiert und führe Sie Schritt für Schritt zur Lösung.",
  },
  {
    q: "Was kostet es genau?",
    a: "Video-Hilfe: 7,90 € pauschal pro gelöstes Problem. Vor-Ort am Bodensee: 14,90 € pauschal. Hardware-Probleme (kaputtes Display, Akku, etc.) auf Anfrage — mit Diagnose und festem Kostenvoranschlag bevor irgendwas passiert. Wenn ich nicht löse: 0 €.",
  },
  {
    q: "Was wenn das Problem nicht gelöst werden kann?",
    a: "Dann zahlen Sie 0 €. Ich bin transparent: Bei Hardware-Schäden kann ich oft nur diagnostizieren — aber ich sage Ihnen ehrlich wo es günstig repariert werden kann.",
  },
  {
    q: "Brauche ich besondere Apps für die Video-Hilfe?",
    a: "Nein. FaceTime ist auf jedem iPhone/Mac vorinstalliert. Jitsi und Google Meet laufen direkt im Browser — Sie klicken den Link und sind drin. Ich richte mich nach dem was bei Ihnen läuft.",
  },
  {
    q: "Wie schnell können Sie da sein?",
    a: "Video-Termine meist am gleichen oder nächsten Tag, werktags abends ab 15 Uhr, am Wochenende auch tagsüber. Vor-Ort-Besuche meist innerhalb von zwei bis drei Tagen.",
  },
  {
    q: "Kommen Sie nur nach Radolfzell?",
    a: "Per Video-Chat helfe ich von überall — ob Sie in Konstanz, Stuttgart oder Hamburg sitzen ist egal. Vor-Ort komme ich nach Radolfzell, Böhringen, Markelfingen, Moos und Allensbach.",
  },
  {
    q: "Sind meine Daten und Passwörter bei Ihnen sicher?",
    a: "Absolut. Ich notiere mir keine Passwörter, schaue nicht in private Fotos oder Nachrichten, und sobald wir den Call beenden habe ich keinen Zugriff mehr. Sicherheit hat oberste Priorität.",
  },
  {
    q: "Wie kann ich bezahlen?",
    a: "PayPal, Überweisung, Wero — und vor Ort auch in bar. Sie zahlen erst nach gelöstem Problem.",
  },
  {
    q: "Bekomme ich eine Rechnung?",
    a: "Auf Wunsch gerne. Es ist eine einfache Quittung — kein Mehrwertsteuerausweis, da Kleinunternehmer.",
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <SectionHeader
          eyebrow="Häufige Fragen"
          title={<>Klingt zu gut um wahr zu sein? <br /><span className="ital grad-text">Hier die Antworten.</span></>}
          sub="Falls etwas fehlt — fragen Sie mich einfach direkt per WhatsApp oder E-Mail."
        />

        <div className="faq-list" style={{ maxWidth: 820, margin: "0 auto" }}>
          {FAQS.map((f, i) => (
            <FAQItem key={i} {...f} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, open, onClick }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="reveal faq-item" style={{ borderBottom: "1px solid var(--line)", padding: "4px 0" }}>
      <button onClick={onClick} style={{
        width: "100%",
        display: "flex",
        alignItems: "center",
        gap: 16,
        padding: "24px 0",
        textAlign: "left",
        fontSize: 18,
        fontWeight: 500,
        letterSpacing: "-0.01em",
        color: "var(--ink)",
      }}>
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          width: 32, height: 32,
          borderRadius: 999,
          background: open ? "var(--ink)" : "var(--bg-soft)",
          color: open ? "#fff" : "var(--ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
          transition: "all .3s ease",
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ transition: "transform .3s", transform: open ? "rotate(45deg)" : "rotate(0)" }}>
            <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows .4s cubic-bezier(.22,.61,.36,1)" }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ fontSize: 16, color: "var(--muted)", lineHeight: 1.55, paddingBottom: 24, paddingRight: 48, maxWidth: 680 }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FAQ });