import { ChevronDown, HelpCircle } from 'lucide-react';
import React, { useState } from 'react';

const FAQS = [
    {
        q: 'Wie schnell ist mein Server nach der Bestellung online?',
        a: 'Alle VPS und Gameserver werden vollautomatisch innerhalb von ca. 30 Sekunden im Rechenzentrum installiert und freigeschaltet. Du erhältst deine Zugangsdaten per E-Mail & im Dashboard.',
    },
    {
        q: 'Verbraucht die Webseite oder das Hosting viele PC-Ressourcen?',
        a: 'Nein! Unsere Plattform verwendet eine ultra-schlanke Frontend-Architektur (React + Tailwind CSS) ohne schwere WebGL-3D-Bibliotheken oder verlangsamende Tracker. Die Client-CPU-Auslastung liegt nahezu bei 0%. Auch serverseitig garantieren wir dedizierte Hardware ohne Überbuchung.',
    },
    {
        q: 'Gibt es eine Vertragslaufzeit oder Kündigungsfrist?',
        a: 'Keine Mindestvertragslaufzeit! Alle Server arbeiten auf Prepaid- oder Monatsbasis. Du kannst deinen Server jederzeit mit 1 Klick im Dashboard zum Monatsende kündigen.',
    },
    {
        q: 'Welche DDoS-Protection kommt zum Einsatz?',
        a: 'Wir nutzen eine mehrstufige Hardware-Filterung von Arbor Networks & Voxility mit 2.4 Tbps Gesamtkapazität. Angriffe (Syn-Flood, UDP-Amplification, Layer-7) werden automatisch gefiltert.',
    },
    {
        q: 'Kann ich meinen Server später jederzeit upgraden?',
        a: 'Ja! Du kannst vCPU Cores, RAM und Speicherplatz direkt in deinem Dashboard upgraden, ohne deine Daten oder IP-Adresse zu verlieren.',
    },
];

export const FaqSection: React.FC = () => {
    const [openIndex, setOpenIndex] = useState<number | null>(1);

    return (
        <section id="faq" className="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
            <div className="text-center mb-12">
                <div className="inline-flex items-center gap-2 rounded-full border border-[#311119] bg-[#0c0507] px-3.5 py-1 text-xs font-semibold text-slate-300 mb-4">
                    <HelpCircle className="h-3.5 w-3.5 text-rose-400" />
                    Häufig gestellte Fragen
                </div>
                <h2 className="text-3xl font-extrabold text-white tracking-tight">FAQ & Support</h2>
                <p className="mt-2 text-slate-400 text-sm">Alles, was du über unsere Server & Hosting-Infrastruktur wissen musst.</p>
            </div>

            <div className="space-y-4">
                {FAQS.map((faq, i) => {
                    const isOpen = openIndex === i;
                    return (
                        <div
                            key={i}
                            className="rounded-2xl border border-[#260e13] bg-[#0c0507] overflow-hidden transition-all"
                        >
                            <button
                                onClick={() => setOpenIndex(isOpen ? null : i)}
                                className="w-full p-5 text-left flex items-center justify-between font-semibold text-white text-sm hover:text-rose-400 transition-colors"
                            >
                                <span>{faq.q}</span>
                                <ChevronDown className={`h-4 w-4 text-slate-400 transition-transform duration-300 ${isOpen ? 'rotate-180 text-rose-400' : ''}`} />
                            </button>
                            {isOpen && (
                                <div className="px-5 pb-5 text-xs text-slate-400 leading-relaxed border-t border-[#1f0b0f] pt-3 animate-fade-in">
                                    {faq.a}
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </section>
    );
};