'use client'

import {Accordion, AccordionContent, AccordionItem, AccordionTrigger,} from "@/components/ui/accordion"
import {motion} from "framer-motion"

const faqItems = [
    {
        id: "dauer",
        question: "Wie lange dauert es, bis meine Website oder App online ist?",
        answers: [
            "Das hängt vom Umfang des Projekts ab – einfache Websites oder MVPs sind meist innerhalb von 4–6 Wochen realisierbar.",
            "Komplexere Anwendungen oder individuelle Features benötigen entsprechend mehr Zeit. Wir geben dir zu Beginn eine realistische Einschätzung.",
        ],
    },
    {
        id: "inhalte",
        question: "Muss ich Texte und Bilder selbst liefern?",
        answers: [
            "Wenn du Inhalte hast, bauen wir diese gerne ein. Falls nicht, unterstützen wir dich mit Textvorschlägen, Icons oder lizenzfreien Bildern.",
            "Bei Apps helfen wir dir auch bei der Strukturierung und Formulierung von App-Inhalten, z. B. Onboarding-Texte oder UI-Texte.",
        ],
    },
    {
        id: "technik",
        question: "Ich habe keine Ahnung von Technik – funktioniert das trotzdem?",
        answers: [
            "Auf jeden Fall. Wir begleiten dich Schritt für Schritt und erklären alles verständlich – ganz ohne Fachkenntnisse..",
            "Du bekommst eine Lösung, die für dich funktioniert – egal ob Website, App oder Backend.",
        ],
    },
    {
        id: "änderungen",
        question: "Was ist, wenn ich im Nachhinein etwas ändern möchte?",
        answers: [
            "Kein Problem. Du kannst jederzeit neue Inhalte, Features oder Anpassungen beauftragen.",
            "Auf Wunsch übernehmen wir auch die laufende Wartung oder stellen dir ein CMS bzw. Admin-Interface bereit.",
        ],
    },
    {
        id: "seo",
        question: "Wird meine Website oder App auch für Suchmaschinen optimiert?",
        answers: [
            "Ja. Jede Website wird suchmaschinenfreundlich aufgebaut – inkl. technischer SEO-Basics wie saubere Struktur, schnelle Ladezeit und mobile Optimierung.",
            "Bei Apps unterstützen wir dich z.B. auch mit App Store Optimierung (ASO), damit du besser gefunden wirst.",
        ],
    },
]

export default function Faq() {
    return (
        <section id="faq" className="py-24 px-4 bg-background text-foreground">
            <div className="max-w-3xl mx-auto">
                <motion.h2
                    className="text-3xl md:text-4xl font-bold mb-2 text-center"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4}}
                >
                    Fragen? Antworten.
                </motion.h2>

                <motion.div
                    className="w-12 h-[2px] mt-2 mb-6 bg-amber-500 mx-auto"
                    initial={{opacity: 0, x: -20}}
                    whileInView={{opacity: 1, x: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.1}}
                />

                <motion.p
                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    Hier beantworten wir häufige Fragen rund um Web- und App-Projekte – klar gegliedert nach Themen.
                    Wenn du darüber hinaus etwas wissen möchtest, melde dich gerne persönlich bei uns.
                </motion.p>

                <motion.div
                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.4}}
                >
                    <Accordion
                        type="single"
                        collapsible
                        className="w-full"
                    >
                        {faqItems.map((item, index) => (
                            <AccordionItem key={index} value={`faq-${index}`}>
                                <AccordionTrigger>{item.question}</AccordionTrigger>
                                <AccordionContent className="flex flex-col gap-4 text-left">
                                    {item.answers.map((text, idx) => (
                                        <p key={idx}>{text}</p>
                                    ))}
                                </AccordionContent>
                            </AccordionItem>
                        ))}
                    </Accordion>
                </motion.div>
            </div>
        </section>
    )
}