import { useState } from 'react'
import { ChevronDown } from 'lucide-react'

interface FAQItem {
  question: string
  answer: string
}

const faqs: FAQItem[] = [
  {
    question: 'Wie funktioniert der KI-Chatbot?',
    answer:
      'Unser Chatbot nutzt modernste KI-Technologie (RAG - Retrieval Augmented Generation). Sie laden Ihre Dokumente hoch, und der Bot durchsucht diese, um präzise Antworten auf Kundenfragen zu geben. Die KI versteht den Kontext und formuliert natürliche Antworten.',
  },
  {
    question: 'Welche Dateiformate werden unterstützt?',
    answer:
      'Aktuell unterstützen wir PDF-Dateien. Weitere Formate wie Word, Excel und Textdateien sind in Planung. Sie können beliebig viele PDFs hochladen – FAQs, Produktkataloge, Anleitungen, etc.',
  },
  {
    question: 'Ist der Service DSGVO-konform?',
    answer:
      'Ja, 100%! Alle Daten werden ausschließlich auf Servern in Deutschland gehostet. Wir verarbeiten keine Daten außerhalb der EU. Sie erhalten einen Auftragsverarbeitungsvertrag (AVV) auf Anfrage.',
  },
  {
    question: 'Kann ich den Chatbot an mein Design anpassen?',
    answer:
      'Ja! Im Starter- und Business-Plan können Sie Farben, Logo und Begrüßungstext anpassen. Der Chatbot fügt sich nahtlos in Ihr Website-Design ein.',
  },
  {
    question: 'Was passiert nach der Trial-Phase?',
    answer:
      'Nach 7 Tagen endet Ihre Trial automatisch. Sie können jederzeit auf einen bezahlten Plan upgraden. Wenn Sie innerhalb der ersten 3 Tage upgraden, erhalten Sie 30% Rabatt!',
  },
  {
    question: 'Wie integriere ich den Chatbot in meine Website?',
    answer:
      'Ganz einfach! Sie erhalten einen Code-Snippet, den Sie vor dem </body>-Tag Ihrer Website einfügen. Das funktioniert mit WordPress, Shopify, Wix, und jeder anderen Website.',
  },
]

export default function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  const toggle = (idx: number) => {
    setOpenIndex((prev) => (prev === idx ? null : idx))
  }

  return (
    <section id="faq" className="py-[100px] bg-white">
      <div className="max-w-container mx-auto px-6">
        {/* Section Header */}
        <div className="text-center max-w-[700px] mx-auto mb-[60px]">
          <span
            className="inline-block px-4 py-1.5 text-white text-xs font-semibold uppercase tracking-wider rounded-full mb-4"
            style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
          >
            FAQ
          </span>
          <h2 className="text-[clamp(2rem,4vw,3rem)] font-bold text-gray-900 mb-4">
            Häufig gestellte Fragen
          </h2>
          <p className="text-lg text-gray-600">Alles was Sie wissen müssen</p>
        </div>

        {/* Accordion */}
        <div className="max-w-[800px] mx-auto">
          {faqs.map((item, idx) => (
            <div key={idx} className="border-b border-gray-200">
              <button
                onClick={() => toggle(idx)}
                className="w-full flex items-center justify-between py-6 bg-transparent border-none cursor-pointer text-left text-lg font-semibold text-gray-900 hover:text-primary transition-colors duration-150"
              >
                <span>{item.question}</span>
                <ChevronDown
                  size={16}
                  className={`text-gray-400 flex-shrink-0 transition-transform duration-300 ${
                    openIndex === idx ? 'rotate-180' : ''
                  }`}
                />
              </button>

              <div className={`faq-answer ${openIndex === idx ? 'open' : ''}`}>
                <p className="pb-6 text-gray-600 leading-[1.7]">{item.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}