"use client";

import { useState } from "react";
import { Plus, Minus } from "lucide-react";

const faqs = [
    {
        question: "Do you offer emergency electrical services in Corpus Christi?",
        answer: "Yes, Budd Electric Co. provides 24/7 emergency electrical services in Corpus Christi and surrounding areas. We have licensed electricians on call around the clock to handle power outages, storm damage, and dangerous electrical faults safely."
    },
    {
        question: "Are your electricians licensed and insured?",
        answer: "Absolutely. We are fully licensed by the State of Texas (TECL #17007) and carry comprehensive insurance. All our electricians are background-checked and drug-tested for your peace of mind."
    },
    {
        question: "Do you install Kohler whole-home generators?",
        answer: "Yes, we are an authorized Kohler Generator dealer. We specialize in the sale, professional installation, and ongoing maintenance of Kohler standby generators to keep your home powered during outages."
    },
    {
        question: "What areas do you serve besides Corpus Christi?",
        answer: "We serve the entire Coastal Bend region, including Portland, Robstown, Ingleside, Rockport, Aransas Pass, and Port Aransas. If you're in South Texas, give us a call!"
    }
];

export default function FAQSection() {
    const [openIndex, setOpenIndex] = useState<number | null>(0);

    // Generate FAQ Schema
    const faqSchema = {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": faqs.map(faq => ({
            "@type": "Question",
            "name": faq.question,
            "acceptedAnswer": {
                "@type": "Answer",
                "text": faq.answer
            }
        }))
    };

    return (
        <section className="py-24 bg-gray-50">
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
            />
            <div className="mx-auto max-w-3xl px-6 lg:px-8">
                <div className="text-center mb-16">
                    <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</h2>
                    <h3 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h3>
                </div>

                <div className="space-y-4">
                    {faqs.map((faq, index) => (
                        <div key={index} className="bg-white rounded-lg border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition">
                            <button
                                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                                className="w-full flex items-center justify-between p-6 text-left focus:outline-none focus:ring-2 focus:ring-[color:var(--brand)] focus:ring-offset-2 rounded-lg"
                                aria-expanded={openIndex === index}
                                aria-controls={`faq-answer-${index}`}
                            >
                                <span className="font-bold text-[color:var(--ink)] text-lg pr-8">{faq.question}</span>
                                {openIndex === index ? (
                                    <Minus className="text-[color:var(--brand)] flex-shrink-0" size={20} aria-hidden="true" />
                                ) : (
                                    <Plus className="text-gray-400 flex-shrink-0" size={20} aria-hidden="true" />
                                )}
                            </button>
                            <div
                                id={`faq-answer-${index}`}
                                className={`overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
                                    }`}
                                role="region"
                                aria-labelledby={`faq-question-${index}`}
                            >
                                <div className="p-6 pt-0 text-gray-600 leading-relaxed">
                                    {faq.answer}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}