"use client";

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

const faqs = [
    {
        question: "Do you install Kohler whole-home generators?",
        answer: "Yes, Budd Electric Co. is an authorized Kohler dealer. We are certified to maintain and install generators and electrical fixtures by Kohler. Our backup generators on standby keep your whole home or business powered in the event of a local community blackout due to inclement weather or utility failure."
    },
    {
        question: "What areas do you serve?",
        answer: "We serve Corpus Christi, Texas and the entire Coastal Bend, as well as the entire South Texas general geographic area. No project is too large or too small for Budd Electric Co."
    },
    {
        question: "How long have you been in business?",
        answer: "Since 1969, Budd Electric Co. has been providing commercial and residential electrical services to the Coastal Bend. We are a three-generation family owned and operated electrical contracting company with almost half a century of experience, specializing in electrical upgrades, installations and generators."
    }
];

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">
                    <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</p>
                    <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h2>
                </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-visible:ring-2 focus-visible:ring-[color:var(--brand)] focus-visible: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>
    );
}
