// src/pages/FAQ.tsx

import React, { useState } from 'react';
import faqData from '../data/faq.json';
import { ChevronDown, ChevronUp, MessageCircleQuestionMark } from 'lucide-react';

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

    const toggleQuestion = (index: string) => {
        setOpenIndex(openIndex === index ? null : index);
    };

    return (
        <div className="w-full animate-fade-in">
            <div className="mb-8">
                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
                    <MessageCircleQuestionMark className="mr-3 text-seafoam" size={32} />
                    Veckoschema
                </h1>
                <p className="text-moss font-medium mt-2 ml-11">Här hittar du när vi bemannar Kullaberg.</p>
            </div>

            <div className="columns-1 lg:columns-2 gap-6 space-y-6">
                {faqData.map((section, sIndex) => (
                    <div key={sIndex} className="break-inside-avoid bg-white/40 backdrop-blur-md border border-white p-6 rounded-3xl shadow-lg shadow-ebony/5">
                        <h2 className="text-lg font-black text-ebony/70 uppercase tracking-widest mb-4">
                            {section.category}
                        </h2>
                        <div className="space-y-3">
                            {section.questions.map((item, qIndex) => {
                                const id = `${sIndex}-${qIndex}`;
                                const isOpen = openIndex === id;
                                return (
                                    <div key={id} className={`rounded-2xl overflow-hidden transition-all duration-300 ${isOpen ? 'bg-white shadow-md shadow-seafoam/10' : 'bg-eggshell/50 hover:bg-white'}`}>
                                        <button
                                            className="w-full text-left p-4 flex justify-between items-center focus:outline-none"
                                            onClick={() => toggleQuestion(id)}
                                        >
                                            <span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{item.q}</span>
                                            <div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : 'bg-transparent text-seafoam'}`}>
                                                {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                                            </div>
                                        </button>
                                        <div className={`transition-all duration-300 ease-in-out ${isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
                                            <div className="p-4 pt-0 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/5 mx-4 mt-2">
                                                {item.a}
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};