@extends('layouts.shop')
@section('title', 'FAQ')
@section('content')
<div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold mb-8">Häufige Fragen</h1>
    @foreach($groups as $group)
    <h2 class="text-xl font-semibold mb-4 text-blue-700">{{ $group->name }}</h2>
    <div class="space-y-3 mb-8" x-data>
        @foreach($group->faqs as $faq)
        <div class="border rounded-lg" x-data="{ open: false }">
            <button @click="open = !open" class="w-full text-left px-5 py-4 flex justify-between items-center font-medium">
                {{ $faq->question }}
                <span x-text="open ? '▲' : '▼'" class="text-sm text-gray-400"></span>
            </button>
            <div x-show="open" x-collapse class="px-5 pb-4 text-gray-600 text-sm">
                {!! nl2br(e($faq->answer)) !!}
            </div>
        </div>
        @endforeach
    </div>
    @endforeach
</div>
@endsection