88 lines
4.4 KiB
TypeScript
88 lines
4.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|