100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { ChevronDown } from "lucide-react";
|
||
|
||
const FAQ_ITEMS = [
|
||
{
|
||
question: "Brauche ich Vorkenntnisse, um bei Sportbox zu trainieren?",
|
||
answer:
|
||
"Nein, bei uns sind alle willkommen – vom absoluten Anfänger bis zum erfahrenen Sportler. Unsere Trainer erstellen individuelle Trainingspläne und begleiten Sie in Ihrem Tempo.",
|
||
},
|
||
{
|
||
question: "Bieten Sie ein Probetraining an?",
|
||
answer:
|
||
"Ja, wir bieten ein unverbindliches Probetraining an. Kontaktieren Sie uns einfach über das Kontaktformular oder telefonisch, um einen Termin zu vereinbaren.",
|
||
},
|
||
{
|
||
question: "Welche Öffnungszeiten haben Sie?",
|
||
answer:
|
||
"Wir haben großzügige Öffnungszeiten, damit Fitness in Ihren Alltag passt. Die aktuellen Öffnungszeiten erfahren Sie bei uns vor Ort oder telefonisch.",
|
||
},
|
||
{
|
||
question: "Welche Kurse bieten Sie an?",
|
||
answer:
|
||
"Unser Kursangebot umfasst unter anderem Yoga, Pilates, HIIT, Functional Training und Krafttraining. Die Kurse sind für verschiedene Fitnesslevel geeignet. Schauen Sie sich unsere Leistungen an oder fragen Sie direkt bei uns an.",
|
||
},
|
||
{
|
||
question: "Kann ich meinen Trainingsplan anpassen lassen?",
|
||
answer:
|
||
"Selbstverständlich. Wir passen Ihren Trainingsplan regelmäßig an Ihre Fortschritte und sich verändernde Ziele an. Sprechen Sie einfach Ihren Trainer an.",
|
||
},
|
||
{
|
||
question: "Bieten Sie auch Online-Training an?",
|
||
answer:
|
||
"Wir arbeiten daran, unser Angebot um Online-Trainingsmöglichkeiten zu erweitern. Kontaktieren Sie uns für aktuelle Informationen.",
|
||
},
|
||
] as const;
|
||
|
||
export function FaqSection() {
|
||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||
|
||
function toggle(index: number) {
|
||
setOpenIndex(openIndex === index ? null : index);
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-3xl mx-auto space-y-2">
|
||
{FAQ_ITEMS.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="border border-border bg-background"
|
||
style={{ borderRadius: "var(--radius-md)" }}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => toggle(index)}
|
||
aria-expanded={openIndex === index}
|
||
className="w-full flex items-center justify-between px-6 py-4 text-left text-sm font-medium"
|
||
>
|
||
<span>{item.question}</span>
|
||
<ChevronDown
|
||
size={18}
|
||
className={`shrink-0 ml-4 transition-transform duration-200 ${
|
||
openIndex === index ? "rotate-180" : ""
|
||
}`}
|
||
aria-hidden="true"
|
||
/>
|
||
</button>
|
||
{openIndex === index && (
|
||
<div className="px-6 pb-4">
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
{item.answer}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
|
||
{/* FAQ Schema Markup */}
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{
|
||
__html: JSON.stringify({
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
mainEntity: FAQ_ITEMS.map((item) => ({
|
||
"@type": "Question",
|
||
name: item.question,
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: item.answer,
|
||
},
|
||
})),
|
||
}),
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|