import Header from '@/components/Header'
import Footer from '@/components/Footer'

interface FAQItem {
  question: string
  answer: string | string[]
}

const faqItems: FAQItem[] = [
  {
    question: 'Was ist bei Breakpilot eine „Aufgabe"?',
    answer: [
      'Eine Aufgabe ist ein abgeschlossener Arbeitsauftrag, den du mit Breakpilot erledigst.',
      'Typische Beispiele:',
      '• eine Klassenarbeit korrigieren (egal wie viele Seiten)',
      '• mehrere Klassenarbeiten in einer Serie korrigieren',
      '• einen Elternbrief erstellen',
      '• ein Elterngespraech vorbereiten',
      '• eine Unterrichtsvorbereitung strukturieren',
      'Wichtig: Die Anzahl der Seiten, Dateien oder Uploads spielt dabei keine Rolle.',
    ],
  },
  {
    question: 'Beispiel: Ich korrigiere 24 Klassenarbeiten mit je 5 Seiten – wie viele Aufgaben sind das?',
    answer: [
      '24 Aufgaben.',
      'Jede Klassenarbeit zaehlt als eine Aufgabe, unabhaengig von:',
      '• Seitenzahl',
      '• Scan-Format',
      '• ob du sie einzeln oder gesammelt hochlaedst',
    ],
  },
  {
    question: 'Zaehlt ein ganzer Scan mit vielen Arbeiten als nur eine Aufgabe?',
    answer: [
      'Nein.',
      'Entscheidend ist nicht der Upload, sondern die fachliche Arbeitseinheit.',
      'Wenn du mehrere Klassenarbeiten in einem Durchgang korrigierst, wird jede Arbeit als eine eigene Aufgabe gezaehlt.',
    ],
  },
  {
    question: 'Muss ich mich vor hohen Kosten fuerchten?',
    answer: [
      'Nein.',
      'Breakpilot arbeitet nicht mit Minuten-, Seiten- oder Token-Abrechnung.',
      '• Du hast ein klares Aufgaben-Kontingent',
      '• Es gibt keinen automatischen Mehrverbrauch',
      '• Wenn dein Kontingent aufgebraucht ist, kannst du aktiv entscheiden, wie es weitergeht',
      'Es entstehen keine ueberraschenden Kosten.',
    ],
  },
  {
    question: 'Verfallen meine Aufgaben am Monatsende?',
    answer: [
      'Nein.',
      'Ungenutzte Aufgaben verfallen nicht sofort, sondern koennen sich ueber mehrere Monate ansammeln.',
      '• Dein Kontingent kann sich bis zu 5 Monate aufbauen',
      '• So kannst du ruhigere Phasen ausgleichen und in Korrekturzeiten flexibel arbeiten',
    ],
  },
  {
    question: 'Warum gibt es ueberhaupt ein Aufgaben-Kontingent?',
    answer: [
      'Damit Breakpilot:',
      '• zuverlaessig funktioniert',
      '• fair fuer alle Nutzer bleibt',
      '• dauerhaft zu einem stabilen Preis angeboten werden kann',
      'Das Kontingent ist so ausgelegt, dass es den realen Schulalltag gut abbildet.',
    ],
  },
  {
    question: 'Was passiert, wenn mein Aufgaben-Kontingent aufgebraucht ist?',
    answer: [
      'Dann hast du volle Kontrolle:',
      '• Du kannst auf einen hoeheren Tarif wechseln',
      '• oder dein Kontingent im naechsten Abrechnungszeitraum wieder nutzen',
      'Breakpilot stoppt die weitere Nutzung automatisch, ohne zusaetzliche Kosten auszuloesen.',
    ],
  },
  {
    question: 'Kann ich Breakpilot kostenlos testen?',
    answer: [
      'Ja.',
      '• Du kannst Breakpilot 7 Tage kostenlos testen',
      '• Dafuer ist eine Kreditkarte erforderlich',
      '• Wenn du innerhalb der Testphase kuendigst, entstehen keine Kosten',
    ],
  },
  {
    question: 'Warum muss ich beim Testen eine Kreditkarte angeben?',
    answer: [
      'So kannst du Breakpilot ohne Unterbrechung weiter nutzen, wenn du dich nach dem Test dafuer entscheidest.',
      'Du kannst jederzeit innerhalb der Testphase kuendigen.',
    ],
  },
  {
    question: 'Gibt es einen Tarif ohne Nachdenken ueber Limits?',
    answer: [
      'Ja.',
      'Der Premium-Tarif ist fuer Vielnutzer und den schulischen Kontext gedacht.',
      'Er bietet sehr hohe Nutzungsmoeglichkeiten und ist im Alltag praktisch ohne Einschraenkungen nutzbar.',
    ],
  },
  {
    question: 'Eignet sich Breakpilot fuer Schulen oder Teams?',
    answer: [
      'Ja.',
      'Der Premium-Tarif ist fuer:',
      '• Teams',
      '• Fachschaften',
      '• schulische Nutzung',
      'konzipiert. Weitere schulische Lizenzmodelle sind geplant.',
    ],
  },
  {
    question: 'Was bedeutet „Fair Use" im Premium-Tarif?',
    answer: [
      'Breakpilot ist fuer die zeitnahe Unterstuetzung im Unterrichtsalltag gedacht.',
      'Eine systematische Ansammlung von Aufgaben ueber sehr lange Zeitraeume zur gebuendelten Verarbeitung stellt eine atypische Nutzung dar und kann eingeschraenkt werden.',
      'Im normalen schulischen Einsatz spielt das keine Rolle.',
    ],
  },
  {
    question: 'Werden meine Daten fuer KI-Training verwendet?',
    answer: [
      'Nein.',
      '• Deine Inhalte werden nicht fuer das Training oeffentlicher KI-Modelle genutzt',
      '• Die Verarbeitung erfolgt DSGVO-konform',
      '• Deine Daten bleiben unter deiner Kontrolle',
    ],
  },
  {
    question: 'Kann ich meinen Tarif jederzeit aendern oder kuendigen?',
    answer: [
      'Ja.',
      '• Upgrades sind jederzeit moeglich',
      '• Downgrades greifen zum naechsten Abrechnungszeitraum',
      '• Kuendigungen sind jederzeit moeglich',
    ],
  },
]

export default function FAQPage() {
  return (
    <main className="min-h-screen bg-white">
      <Header />

      {/* Hero Section */}
      <section className="pt-28 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
            Haeufige Fragen
          </h1>
          <p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
            Alles, was du ueber Breakpilot wissen musst – einfach erklaert.
          </p>
        </div>
      </section>

      {/* Summary Box */}
      <section className="py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">
          <div className="bg-primary-50 border border-primary-200 rounded-2xl p-6 text-center">
            <p className="text-lg font-medium text-primary-900">
              Breakpilot rechnet nach Aufgaben ab – nicht nach Technik.
            </p>
            <p className="mt-2 text-primary-700">
              Du weisst immer, woran du bist, und behaeltst die volle Kostenkontrolle.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ Items */}
      <section className="py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">
          <div className="space-y-6">
            {faqItems.map((item, index) => (
              <div
                key={index}
                className="bg-white rounded-xl p-6 border border-slate-200 hover:border-primary-200 hover:shadow-md transition-all"
              >
                <h3 className="text-lg font-semibold text-slate-900 mb-4">
                  {item.question}
                </h3>
                <div className="text-slate-600 space-y-2">
                  {Array.isArray(item.answer) ? (
                    item.answer.map((line, lineIndex) => (
                      <p key={lineIndex} className={line.startsWith('•') ? 'pl-4' : ''}>
                        {line}
                      </p>
                    ))
                  ) : (
                    <p>{item.answer}</p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-2xl font-bold text-slate-900 mb-4">
            Noch Fragen?
          </h2>
          <p className="text-slate-600 mb-8">
            Unser Support-Team hilft dir gerne weiter.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="mailto:support@breakpilot.de"
              className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-100 transition-all border border-slate-200"
            >
              support@breakpilot.de
            </a>
            <a
              href="/#pricing"
              className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all btn-press"
            >
              Jetzt kostenlos testen
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  )
}