"use client"

import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { useTranslation } from "@/lib/i18n"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { motion } from "framer-motion"
import { ChevronDown, HelpCircle } from "lucide-react"

export default function FAQPage() {
    const { t } = useTranslation()

    const faqs = ['q1', 'q2', 'q3', 'q4']

    return (
        <div className="min-h-screen flex flex-col">
            <Navbar />

            <main className="flex-1 bg-muted/10">
                {/* Hero */}
                <section className="bg-primary/5 py-16">
                    <div className="container mx-auto px-4 text-center">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                        >
                            <h1 className="text-4xl font-bold mb-4">{t('faq.title')}</h1>
                            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                                {t('faq.subtitle')}
                            </p>
                        </motion.div>
                    </div>
                </section>

                {/* FAQ Content */}
                <section className="py-12 container mx-auto px-4 max-w-3xl">
                    <div className="space-y-4">
                        {faqs.map((key, index) => (
                            <motion.div
                                key={key}
                                initial={{ opacity: 0, y: 10 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: index * 0.1 }}
                            >
                                <Card>
                                    <CardHeader className="pb-2">
                                        <CardTitle className="text-lg flex items-start gap-3">
                                            <HelpCircle className="h-5 w-5 text-primary shrink-0 mt-1" />
                                            {t(`faq.items.${key}.q`)}
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent className="pt-2">
                                        <p className="text-muted-foreground ml-8">
                                            {t(`faq.items.${key}.a`)}
                                        </p>
                                    </CardContent>
                                </Card>
                            </motion.div>
                        ))}
                    </div>

                    <div className="mt-12 text-center">
                        <p className="text-muted-foreground mb-4">
                            {t('faq.items.q4.a')}
                        </p>
                        <Link href="/contact">
                            <Button>{t('contact.info.support.title')} &rarr;</Button>
                        </Link>
                    </div>
                </section>
            </main>

            <Footer />
        </div>
    )
}
