@extends('layouts.app')

@section('title', 'FAQs')

@section('content')
<div class="container">
    <h1 class="mb-2">Frequently asked questions</h1>
    <p class="text-muted mb-4">This section is designed as a practical shrimp-keeping wiki for new and intermediate keepers. Guidance is intentionally conservative, especially around tank maturity, medication, and fish compatibility.</p>
    @foreach ($faqs as $category => $items)
        <div class="card section-card mb-4">
            <div class="card-body p-4">
                <h2 class="h4 mb-3">{{ $category }}</h2>
                <div class="accordion" id="faq-{{ \Illuminate\Support\Str::slug($category) }}">
                    @foreach ($items as $faq)
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq-{{ $faq->id }}">{{ $faq->question }}</button>
                            </h2>
                            <div id="faq-{{ $faq->id }}" class="accordion-collapse collapse">
                                <div class="accordion-body">{{ $faq->answer }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection