@php($faqCounter = 0)
<div x-data="{ openIndex: null }">
    <section class="section-padding {{ $bg }}">
        <div class="container-padding">
            {{-- Section Title --}}
            <div class="text-center mb-16">
                <h1 class="text-hero mb-6">
                    {!! $content['title'] !!}
                </h1>
                @if(!empty($content['subtitle']))
                <p class="text-large text-muted-foreground max-w-2xl mx-auto">
                    {!! $content['subtitle'] !!}
                </p>
                @endif
            </div>

            {{-- FAQ Container --}}
            <div class="max-w-4xl mx-auto space-y-12">
                {{-- Allgemeine Fragen (ungrouped) --}}
                @if(!empty($content['questions']))
                    <div class="space-y-4">
                        @foreach($content['questions'] as $faq)
                            @php($index = $faqCounter++)
                            <div class="card-elevated rounded-xl overflow-hidden">
                                <dt>
                                    <button
                                        @click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
                                        class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
                                        :aria-expanded="openIndex === {{ $index }}"
                                    >
                                        <span class="text-lg font-medium text-foreground pr-6">
                                            {{ $faq['question'] }}
                                        </span>
                                        <span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
                                              :class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
                                            <svg class="w-5 h-5 transition-transform duration-200"
                                                 :class="openIndex === {{ $index }} ? 'rotate-180' : ''"
                                                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </dt>
                                <dd x-show="openIndex === {{ $index }}"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="px-6 pb-6">
                                    <div class="border-t border-border pt-4">
                                        <p class="text-muted-foreground leading-relaxed">
                                            {{ $faq['answer'] }}
                                        </p>
                                    </div>
                                </dd>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Gruppierte Sektionen --}}
                @if(!empty($content['sections']))
                    @foreach($content['sections'] as $section)
                        <div>
                            {{-- Sektions-Header --}}
                            <div class="flex items-center gap-3 mb-6">
                                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-secondary/10 text-secondary shrink-0">
                                    @svg('heroicon-o-' . ($section['icon'] ?? 'question-mark-circle'), 'w-5 h-5')
                                </div>
                                <h2 class="text-lg font-semibold text-foreground">{{ $section['title'] }}</h2>
                                <div class="flex-1 h-px bg-border"></div>
                            </div>

                            <div class="space-y-4">
                                @foreach($section['questions'] as $faq)
                                    @php($index = $faqCounter++)
                                    <div class="card-elevated rounded-xl overflow-hidden">
                                        <dt>
                                            <button
                                                @click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
                                                class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
                                                :aria-expanded="openIndex === {{ $index }}"
                                            >
                                                <span class="text-lg font-medium text-foreground pr-6">
                                                    {{ $faq['question'] }}
                                                </span>
                                                <span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
                                                      :class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
                                                    <svg class="w-5 h-5 transition-transform duration-200"
                                                         :class="openIndex === {{ $index }} ? 'rotate-180' : ''"
                                                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                    </svg>
                                                </span>
                                            </button>
                                        </dt>
                                        <dd x-show="openIndex === {{ $index }}"
                                            x-transition:enter="transition ease-out duration-200"
                                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                                            x-transition:enter-end="opacity-100 transform translate-y-0"
                                            x-transition:leave="transition ease-in duration-150"
                                            x-transition:leave-start="opacity-100 transform translate-y-0"
                                            x-transition:leave-end="opacity-0 transform -translate-y-2"
                                            class="px-6 pb-6">
                                            <div class="border-t border-border pt-4">
                                                <p class="text-muted-foreground leading-relaxed">
                                                    {{ $faq['answer'] }}
                                                </p>
                                            </div>
                                        </dd>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                @endif

                @if(empty($content['questions']) && empty($content['sections']))
                    <div class="text-center py-12">
                        <p class="text-muted-foreground">Keine FAQ-Inhalte verfügbar.</p>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>