"use client";

import React, { useState } from "react";
import { useI18n } from "@/lib/i18n/context";
import { Plus, Minus } from "lucide-react";

export function FAQSection() {
  const { language } = useI18n();
  const isDe = language === "de";
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const faqs = [
    {
      q: isDe
        ? "Wie funktioniert der Dual-Sheet Excel-Export beim Belege scannen?"
        : "How does the Dual-Sheet Excel export work when I scan receipts into Excel?",
      a: isDe
        ? "Unsere Excel-Engine erstellt beim Belege scannen eine echte .xlsx-Datei mit zwei formatierten Tabellenblättern: Blatt 1 enthält die Belegübersicht (Datum, Händler, Netto, MwSt 7 %, MwSt 19 %, Brutto) mit dynamischen =SUM()-Formeln in den Summenzeilen. Blatt 2 enthält die lückenlose Einzelposten-Aufschlüsselung aller gekauften Artikel mit Mengen und Steuersätzen – so wird aus jedem Kassenbon oder jeder Rechnung eine fertige Excel-Tabelle."
        : "When you scan receipts into Excel, our engine creates an authentic .xlsx workbook with two styled worksheets: Sheet 1 provides the master summary with dynamic =SUM() formulas for net and tax columns. Sheet 2 provides itemized breakdowns of all purchased products with quantities and tax rates – turning every receipt to spreadsheet in seconds, no manual retyping.",
    },
    {
      q: isDe
        ? "Was bedeutet 'Deterministischer Math-Check' bei unserem Kassenbon Scanner?"
        : "What is the 'Deterministic Math Cross-Check' in this receipt scanner?",
      a: isDe
        ? "Im Gegensatz zu reinen LLM-Scannern überlässt unser Kassenbon Scanner das Rechnen nicht dem Zufall. Nach der KI-Erkennung prüft eine TypeScript-Engine nach: Ergibt Netto + MwSt die Bruttosumme? Passt jeder ausgewiesene Steuerbetrag zu seinem Steuersatz? Stimmt die Summe der Artikelzeilen? Was sich nicht sauber aufrechnet, landet in der Prüfleiste – statt unbemerkt im Excel-Export."
        : "Unlike naive LLM wrappers, our OCR receipt scanner doesn't leave the arithmetic to chance. After the AI pass, a TypeScript engine checks it: does net + VAT equal the gross total? Does each declared tax amount match its rate? Does the line-item sum add up? Anything that doesn't reconcile is flagged for review instead of silently landing in your spreadsheet.",
    },
    {
      q: isDe
        ? "Sind meine gescannten Belege sicher gespeichert?"
        : "Are my scanned receipts stored securely?",
      a: isDe
        ? "Ja. Deine Belege werden sicher gespeichert und sind über dein Konto jederzeit von jedem Gerät abrufbar – praktisch, wenn du unterwegs Belege digitalisieren und später am Rechner weiterarbeiten möchtest. Du kannst auch ganz ohne Konto sofort loslegen; deine Daten werden dabei nie an Dritte weitergegeben."
        : "Yes. Your receipts are stored securely and stay accessible from any device once you're signed in – handy if you scan receipts into Excel on your phone and pick up the export later on your laptop. You can also get started instantly without an account, and your data is never shared with third parties.",
    },
    {
      q: isDe
        ? "Funktioniert der Scanner auch für Bewirtungsbelege und Spesenbelege?"
        : "Does this expense receipt scanner also handle invoices?",
      a: isDe
        ? "Ja. Neben klassischen Kassenbons erkennt der Scanner auch Bewirtungsbelege, Rechnungen und andere Spesenbelege zuverlässig. Beim Erfassen von Bewirtungsbelegen werden Trinkgeld, Anlass-Feld und die Aufteilung nach Steuersätzen automatisch mit ausgelesen. Der Export landet wahlweise als formatierte Excel-Datei (.xlsx) mit echten Datumswerten und Summenformeln oder als schlanke CSV – ideal, um Spesen schnell zu erfassen und weiterzuverarbeiten."
        : "Yes. As both an expense receipt scanner and invoice to Excel converter, it reliably reads business invoices, expense receipts and itemized bills. When capturing expense receipts, tip amounts, occasion fields and the tax-rate breakdown are pulled automatically. Export comes either as a styled Excel workbook (.xlsx) with real date values and live formulas, or as a lean CSV – built for turning a stack of receipts into expenses fast.",
    },
    {
      q: isDe
        ? "Wie genau ist die Texterkennung beim Kassenbon in Excel umwandeln?"
        : "How accurate is the OCR when I scan a receipt to Excel?",
      a: isDe
        ? "Ein aktuelles multimodales KI-Modell liest Händler, Datum, Artikel, Mengen und alle Steuersätze vom Foto ab. Damit beim Umwandeln von Kassenbon in Excel keine Fehler durchrutschen, läuft danach automatisch der Math-Check über jede erkannte Summe. Unklare oder unlesbare Werte werden markiert statt geraten – so bleibt die Trefferquote hoch, auch bei verblassten oder schräg fotografierten Belegen."
        : "A current multimodal AI model reads merchant, date, items, quantities and every tax rate straight off the photo. To keep errors from slipping through when you scan a receipt to Excel, the deterministic math check automatically re-verifies every detected total afterward. Unclear or unreadable values get flagged instead of guessed – keeping accuracy high even on faded or crooked receipt photos.",
    },
    {
      q: isDe
        ? "Kann ich Belege direkt auf dem iPhone scannen?"
        : "Can I scan receipts on my iPhone?",
      a: isDe
        ? "Ja. ScanReceipts läuft direkt in Safari auf dem iPhone – kein App-Store-Download nötig. Öffne die Seite, tippe auf die Kamera und scanne los; KI-Erkennung und Math-Check laufen sofort, genau wie am Desktop. Eine native iPhone-App ist zusätzlich in Arbeit."
        : "Yes. ScanReceipts runs right in Safari on iPhone – no App Store download required. Open the page, tap the camera, and start scanning; AI extraction and the math-check run immediately, just like on desktop. A native iPhone app is also in the works.",
    },
  ];

  const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.q,
      acceptedAnswer: { "@type": "Answer", text: faq.a },
    })),
  };

  return (
    <section id="faq" className="w-full bg-[#F6F9FF] font-sans py-20 relative">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd).replace(/</g, "\\u003c") }}
      />
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">

        {/* Header */}

        <div className="mb-14 pb-6 border-b border-[#E2E8F0]">
          <div className="flex items-center gap-2 mb-3">
            <span className="w-2.5 h-2.5 bg-black"></span>
            <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
              {isDe ? "HÄUFIGE FRAGEN (FAQ)" : "FREQUENTLY ASKED QUESTIONS"}
            </span>
          </div>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black">
            {isDe ? "Häufige Fragen & Antworten." : "Frequently Asked Questions."}
          </h2>
        </div>


        {/* FAQ Accordion List */}
        <div className="max-w-4xl space-y-4">
          {faqs.map((faq, idx) => {
            const isOpen = openIndex === idx;
            return (
              <div
                key={idx}
                className="bg-white border border-[#E2E8F0] transition-colors"
              >
                <button
                  onClick={() => setOpenIndex(isOpen ? null : idx)}
                  className="w-full p-6 text-left flex items-center justify-between gap-4 font-sans hover:bg-[#F8FAFC] transition-colors"
                >
                  <span className="font-display text-lg font-bold text-black tracking-tight">
                    {faq.q}
                  </span>
                  <div className="w-7 h-7 border border-[#E2E8F0] flex items-center justify-center text-black shrink-0">
                    {isOpen ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
                  </div>
                </button>
                {isOpen && (
                  <div className="px-6 pb-6 pt-2 text-sm text-[#475569] leading-relaxed border-t border-[#F1F5F9] font-sans">
                    {faq.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
