"use client";

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { ChevronDown, HelpCircle, Sparkles } from 'lucide-react';
import { cn } from '@/lib/cn';

export function FAQ() {
    const [activeIndex, setActiveIndex] = useState<null | number>(0);
    const t = useTranslations();
    const faqs = t.raw("faqs");

    return (
        <section className="py-24 bg-white relative overflow-hidden" id="faq">
            {/* Background Decoration */}
            <div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none">
                <div className="absolute top-10 left-10 size-64 rounded-full bg-primary-tw-600 blur-3xl" />
                <div className="absolute bottom-10 right-10 size-96 rounded-full bg-blue-600 blur-3xl" />
            </div>

            <div className="container mx-auto px-4 box relative z-10">
                <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-tw-50 text-primary-tw-600 text-sm font-bold animate-fade-in">
                        <Sparkles className="size-4" />
                        <span>{t("routes.faq")}</span>
                    </div>
                    <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
                        {t("home.faq-header.title")} <span className="text-primary-tw-600">{t("mwaheb")}</span>
                    </h2>
                    <p className="text-gray-500 text-lg font-medium">
                        {t("home.faq-header.subtitle")}
                    </p>
                </div>

                <div className="max-w-4xl mx-auto space-y-4">
                    {faqs.map((faq: any, index: number) => {
                        const isOpen = activeIndex === index;
                        
                        return (
                            <div 
                                key={index} 
                                className={cn(
                                    "group border-2 transition-all duration-300 rounded-[2rem] overflow-hidden",
                                    isOpen 
                                        ? "border-primary-tw-600 bg-primary-tw-50/30 shadow-xl shadow-primary-tw-100/20" 
                                        : "border-gray-100 bg-white hover:border-primary-tw-200"
                                )}
                            >
                                <button
                                    className="w-full flex justify-between items-center p-6 md:p-8 cursor-pointer outline-none text-right"
                                    onClick={() => setActiveIndex(isOpen ? null : index)}
                                >
                                    <div className="flex items-center gap-4 md:gap-6">
                                        <div className={cn(
                                            "size-10 md:size-12 rounded-2xl flex items-center justify-center transition-all duration-300",
                                            isOpen ? "bg-primary-tw-600 text-white rotate-12" : "bg-gray-100 text-gray-400 group-hover:bg-primary-tw-100 group-hover:text-primary-tw-600"
                                        )}>
                                            <HelpCircle className="size-5 md:size-6" />
                                        </div>
                                        <h3 className={cn(
                                            "text-lg md:text-xl font-bold transition-colors duration-300",
                                            isOpen ? "text-primary-tw-900" : "text-gray-700 group-hover:text-gray-900"
                                        )}>
                                            {faq.question}
                                        </h3>
                                    </div>
                                    <div className={cn(
                                        "size-10 rounded-xl border flex items-center justify-center transition-all duration-500",
                                        isOpen ? "bg-primary-tw-600 border-primary-tw-600 text-white rotate-180" : "border-gray-200 text-gray-400"
                                    )}>
                                        <ChevronDown className="size-5" />
                                    </div>
                                </button>
                                
                                <div className={cn(
                                    "grid transition-all duration-500 ease-in-out px-8 md:px-12",
                                    isOpen ? "grid-rows-[1fr] pb-8 opacity-100" : "grid-rows-[0fr] opacity-0"
                                )}>
                                    <div className="overflow-hidden">
                                        <div className="h-px bg-primary-tw-200/50 mb-6" />
                                        <p className="text-gray-600 text-lg leading-relaxed font-medium">
                                            {faq.answer}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>

                {/* <div className="mt-20 p-10 bg-primary-tw-900 rounded-[3rem] text-center relative overflow-hidden group">
                    <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-transparent translate-x-full group-hover:translate-x-0 transition-transform duration-1000" />
                    <div className="relative z-10 space-y-6">
                        <h3 className="text-2xl md:text-3xl font-bold text-white">لديك المزيد من الأسئلة؟</h3>
                        <p className="text-primary-tw-100 text-lg opacity-80">فريقنا جاهز دائماً لمساعدتك في أي وقت.</p>
                        <button className="bg-yellow-400 text-primary-tw-900 font-black px-10 py-4 rounded-2xl hover:bg-white hover:scale-105 transition-all duration-300 shadow-xl shadow-yellow-400/20">
                            تواصل معنا الآن
                        </button>
                    </div>
                </div> */}
            </div>
        </section>
    );
}