@extends('layouts.public')

@section('title', 'FAQ - IPA')

@section('content')
    <section class="bg-gradient-to-br from-primary-500 to-primary-600 text-white">
        <div class="container-custom py-14">
            <h1 class="text-4xl font-bold">Pertanyaan yang Sering Diajukan</h1>
            <p class="text-white/80 mt-3 max-w-2xl">Cari jawaban cepat tentang portal IPA, cara mencari aset, dan proses pemanfaatan aset daerah.</p>
        </div>
    </section>

    <section class="container-custom py-12 max-w-3xl">
        @php
            $faqs = [
                [
                    'q' => 'Apa itu portal IPA?',
                    'a' => 'IPA (Implementasi Pemanfaatan Aset) adalah portal informasi resmi pemanfaatan aset daerah yang dapat dimanfaatkan atau disewa oleh masyarakat umum.',
                ],
                [
                    'q' => 'Bagaimana cara menyewa aset?',
                    'a' => 'Portal IPA hanya menyediakan informasi aset. Untuk proses penyewaan, silakan hubungi kontak pengelola yang tercantum pada detail aset melalui telepon, email, atau WhatsApp.',
                ],
                [
                    'q' => 'Apakah tarif yang tercantum sudah final?',
                    'a' => 'Tarif yang tercantum merupakan tarif resmi yang berlaku. Namun, disarankan untuk mengkonfirmasi ulang kepada pengelola karena tarif dapat berubah sewaktu-waktu.',
                ],
                [
                    'q' => 'Apakah saya bisa booking aset secara online?',
                    'a' => 'Pada versi saat ini, portal IPA belum mendukung booking online. Pemesanan dilakukan langsung melalui kontak pengelola aset.',
                ],
                [
                    'q' => 'Bagaimana cara mencari aset sesuai kebutuhan?',
                    'a' => 'Anda dapat menggunakan fitur pencarian pada halaman beranda, atau menggunakan filter kategori dan lokasi di halaman Daftar Aset.',
                ],
                [
                    'q' => 'Apa arti status aset pada portal?',
                    'a' => 'Tersedia: siap dimanfaatkan. Tidak Tersedia: sedang dipakai. Dalam Pemeliharaan: tidak bisa disewa untuk sementara. Tidak Dipublikasikan: tidak ditampilkan di portal.',
                ],
            ];
        @endphp

        <div class="space-y-3" x-data="{ active: null }">
            @foreach($faqs as $i => $faq)
                <div class="card p-0">
                    <button type="button" @click="active = active === {{ $i }} ? null : {{ $i }}"
                        class="w-full flex items-center justify-between gap-4 p-5 text-left">
                        <span class="font-semibold text-gray-900">{{ $faq['q'] }}</span>
                        <svg :class="active === {{ $i }} ? 'rotate-180' : ''" class="w-5 h-5 text-gray-400 transition-transform flex-shrink-0" 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"/>
                        </svg>
                    </button>
                    <div x-show="active === {{ $i }}" x-collapse style="display:none" class="px-5 pb-5 text-gray-600 leading-relaxed">
                        {{ $faq['a'] }}
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection