@extends('layouts.shell')
@section('title', 'FAQ — '.($brand['name'] ?? 'Quran Review'))

@section('content')
<h1 class="mb-5 text-2xl font-extrabold">Pertanyaan Umum</h1>

<div class="space-y-3" x-data="{ open: null }">
    @foreach([
        ['Bagaimana cara menjadi member?','Pilih paket di halaman Membership, lalu transfer sesuai nominal + kode unik. Akses aktif otomatis setelah pembayaran terverifikasi.'],
        ['Metode pembayaran apa saja?','Saat ini transfer bank dengan kode unik (verifikasi otomatis via Moota). Pastikan nominal sama persis hingga 3 digit terakhir.'],
        ['Apakah bisa berhenti berlangganan?','Ya. Membership berlaku sesuai durasi paket dan tidak diperpanjang otomatis. Anda bebas memperpanjang kapan saja.'],
        ['Bagaimana akses video?','Video tersedia via streaming dalam aplikasi. Sebagian konten preview gratis, selebihnya khusus member aktif.'],
        ['Bagaimana checkout produk?','Checkout produk diarahkan ke marketplace resmi (Shopee) untuk keamanan transaksi.'],
    ] as $i => [$q,$a])
    <div class="card overflow-hidden">
        <button @click="open = open === {{ $i }} ? null : {{ $i }}" class="flex w-full items-center justify-between p-4 text-left">
            <span class="text-sm font-semibold">{{ $q }}</span>
            <x-icon name="chevron-right" class="w-5 h-5 text-qr-muted transition" ::class="open === {{ $i }} ? 'rotate-90' : ''"/>
        </button>
        <div x-show="open === {{ $i }}" x-collapse class="px-4 pb-4 text-sm text-qr-muted">{{ $a }}</div>
    </div>
    @endforeach
</div>
@endsection