---
// src/components/FAQ.astro
---
<!-- FAQ Section -->
<section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
    <div class="max-w-4xl mx-auto px-6">
        <div class="text-center mb-16">
            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
            <h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
        </div>
        
        <div class="space-y-4">
            <!-- FAQ 1 -->
            <div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
                <div class="flex justify-between items-center p-6 select-none">
                    <h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
                    <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
                </div>
                <div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                    Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
                </div>
            </div>
        </div>
    </div>
</section>