import Reveal from "@/components/reveal";

export const HOMEPAGE_FAQS = [
  {
    q: "Was ist Entscheidomat?",
    a: "Entscheidomat ist ein kostenloses Portal mit acht Zufalls- und Entscheidungs-Tools: Ja-Nein-Generator, Münze, Entweder-oder-Generator, Glücksrad, Würfel, Zufallszahl, Magic 8-Ball und Listen-Auslosung – alle direkt im Browser nutzbar.",
  },
  {
    q: "Ist Entscheidomat wirklich kostenlos?",
    a: "Ja, vollständig kostenlos. Es gibt keine versteckten Kosten und keine Pflicht-Anmeldung, um die Tools zu nutzen.",
  },
  {
    q: "Muss ich mich registrieren?",
    a: "Nein. Es ist keine Anmeldung, keine E-Mail-Adresse und kein Account nötig – einfach öffnen und loslegen.",
  },
  {
    q: "Werden meine Daten gespeichert oder weitergegeben?",
    a: "Eigene Einstellungen (z. B. Beschriftungen oder Listen) werden nur lokal im localStorage deines Browsers gespeichert und nicht an einen Server übertragen. Details findest du in der Datenschutzerklärung.",
  },
  {
    q: "Funktioniert Entscheidomat auch auf dem Handy?",
    a: "Ja, alle Tools sind vollständig responsiv und funktionieren auf Smartphone, Tablet und Desktop.",
  },
  {
    q: "Wie zufällig sind die Ergebnisse?",
    a: "Jedes Tool erzeugt bei jeder Anfrage einen neuen Zufallswert, unabhängig von vorherigen Ergebnissen.",
  },
  {
    q: "Kann ich die Tools für wichtige Entscheidungen nutzen?",
    a: "Die Tools sind für spielerische Alltagsentscheidungen gedacht. Bei wichtigen persönlichen, finanziellen, rechtlichen oder gesundheitlichen Entscheidungen solltest du dich nicht auf einen Zufallsgenerator verlassen.",
  },
  {
    q: "Gibt es Werbung auf Entscheidomat?",
    a: "Die Tools sind kostenlos nutzbar. Informationen zu Werbung und Datenverarbeitung findest du in der Datenschutzerklärung.",
  },
  {
    q: "Wie kann ich Feedback geben oder Kontakt aufnehmen?",
    a: "Am einfachsten per E-Mail an info@entscheidomat.com – die Kontaktdaten findest du auch im Impressum.",
  },
];

export default function HomepageFaq() {
  return (
    <section id="faq" className="relative scroll-mt-20 py-20 sm:py-28">
      <div className="mx-auto w-full max-w-3xl px-5 sm:px-8">
        <Reveal className="text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
            Häufige Fragen
          </p>
          <h2 className="mt-3 text-4xl font-medium tracking-[-0.02em] sm:text-5xl">
            Noch Fragen zu{" "}
            <em className="font-display italic text-[#0d7a57]">Entscheidomat</em>?
          </h2>
        </Reveal>

        <Reveal delay={0.1} className="mt-10 space-y-3">
          {HOMEPAGE_FAQS.map((faq) => (
            <details
              key={faq.q}
              className="group rounded-2xl border border-line bg-cream/70 px-5 py-4"
            >
              <summary className="cursor-pointer list-none font-semibold text-ink marker:content-none">
                {faq.q}
              </summary>
              <p className="mt-2 text-sm leading-relaxed text-ink-soft">
                {faq.a}
              </p>
            </details>
          ))}
        </Reveal>
      </div>
    </section>
  );
}