<div class="px-4 pt-3 pb-4">

    {{-- ══ TENTANG ══════════════════════════════════════════════════════ --}}
    @if ($page === 'about')
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-5 mb-4">
            <div class="w-14 h-14 rounded-2xl bg-orange-500 flex items-center justify-center mb-4 shadow-sm shadow-orange-200">
                <span class="text-white font-black text-xl leading-none">T</span>
            </div>
            <h2 class="text-base font-bold text-slate-800 mb-3">{{ $storeName }}</h2>
            <div class="space-y-3 text-sm text-slate-600 leading-relaxed">
                <p>
                    {{ $storeName }} adalah layanan titip beli <em>(jastip)</em> hyperlocal yang membantu Anda
                    mendapatkan produk kebutuhan sehari-hari dari mitra terpercaya di sekitar Anda.
                </p>
                <p>
                    Kami hadir untuk menjembatani pembeli dan penjual lokal, mempercepat proses belanja,
                    dan memastikan setiap transaksi berjalan dengan aman dan terpercaya.
                </p>
                <p>
                    Dengan satu keranjang, Anda bisa memesan produk dari berbagai toko sekaligus.
                    Admin kami yang akan menangani seluruh proses pengambilan dan pengantaran.
                </p>
            </div>
        </div>

        @if ($waNumber)
            @php $waMsg = urlencode('Halo Admin ' . $storeName . ', saya ingin bertanya tentang layanan.'); @endphp
            <a href="https://wa.me/{{ $waNumber }}?text={{ $waMsg }}"
               target="_blank" rel="noopener"
               class="w-full h-12 flex items-center justify-center gap-2.5 bg-green-500 hover:bg-green-600
                      text-white text-sm font-semibold rounded-xl shadow-sm active:scale-[0.98] transition-all">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Hubungi Admin
            </a>
        @endif
    @endif

    {{-- ══ HUBUNGI KAMI ═══════════════════════════════════════════════════ --}}
    @if ($page === 'contact')
        <div class="space-y-3">

            @if ($waNumber)
                @php $waMsg = urlencode('Halo Admin ' . $storeName . ', saya ingin bertanya...'); @endphp
                <a href="https://wa.me/{{ $waNumber }}?text={{ $waMsg }}"
                   target="_blank" rel="noopener"
                   class="flex items-center gap-4 bg-white rounded-xl border border-slate-100 shadow-sm p-4
                          hover:border-green-200 hover:shadow-md active:scale-[0.99] transition-all">
                    <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shrink-0 shadow-sm">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-semibold text-slate-800 text-sm">Chat WhatsApp</p>
                        <p class="text-xs text-slate-400 mt-0.5">Respons cepat jam operasional</p>
                    </div>
                    <svg class="w-4 h-4 text-slate-300 ml-auto shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                    </svg>
                </a>
            @endif

            @php $opHours = \App\Models\Setting::get('operating_hours'); @endphp
            @if ($opHours)
                <div class="flex items-center gap-4 bg-white rounded-xl border border-slate-100 shadow-sm p-4">
                    <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                        <svg class="w-6 h-6 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-semibold text-slate-800 text-sm">Jam Operasional</p>
                        <p class="text-xs text-slate-500 mt-0.5">{{ $opHours }}</p>
                    </div>
                </div>
            @endif

            @php $storeAddress = \App\Models\Setting::get('store_address'); @endphp
            @if ($storeAddress)
                <div class="flex items-center gap-4 bg-white rounded-xl border border-slate-100 shadow-sm p-4">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
                        <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-semibold text-slate-800 text-sm">Alamat</p>
                        <p class="text-xs text-slate-500 mt-0.5 leading-relaxed">{{ $storeAddress }}</p>
                    </div>
                </div>
            @endif

        </div>
    @endif

    {{-- ══ FAQ ══════════════════════════════════════════════════════════════ --}}
    @if ($page === 'faq')
        @php
        $faqs = [
            ['q' => 'Bagaimana cara memesan?',
             'a' => 'Pilih produk yang diinginkan, tambahkan ke keranjang, lalu lanjutkan ke checkout. Isi data penerima, pilih area pengiriman dan metode pembayaran, kemudian tekan "Buat Pesanan".'],
            ['q' => 'Berapa lama pesanan diproses?',
             'a' => 'Admin akan menghubungi Anda via WhatsApp setelah pesanan masuk. Proses pengambilan dan pengantaran bergantung pada ketersediaan kurir dan lokasi.'],
            ['q' => 'Metode pembayaran apa saja yang tersedia?',
             'a' => 'Tersedia Transfer Bank, QRIS, dan COD (bayar di tempat). Untuk Transfer dan QRIS, Anda akan mendapat konfirmasi dari admin setelah pembayaran terverifikasi.'],
            ['q' => 'Bagaimana jika produk yang saya pesan habis?',
             'a' => 'Admin akan menginformasikan via WhatsApp jika ada produk yang tidak tersedia, dan memberikan alternatif atau pembatalan sebagian pesanan.'],
            ['q' => 'Bisakah saya membatalkan pesanan?',
             'a' => 'Pembatalan dapat dilakukan sebelum pesanan berstatus "Diproses". Hubungi admin via WhatsApp untuk proses pembatalan.'],
            ['q' => 'Apakah data saya aman?',
             'a' => 'Data pribadi Anda hanya digunakan untuk keperluan pemrosesan pesanan dan tidak dibagikan kepada pihak ketiga.'],
        ];
        @endphp

        <div class="space-y-2">
            @foreach ($faqs as $i => $faq)
                <div x-data="{ open: false }" class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
                    <button type="button" @click="open = !open"
                        class="w-full flex items-start gap-3 px-4 py-3.5 text-left hover:bg-slate-50 transition-colors">
                        <span class="shrink-0 w-5 h-5 rounded-full bg-orange-100 text-orange-600 text-[11px]
                                     font-bold flex items-center justify-center mt-0.5">
                            {{ $i + 1 }}
                        </span>
                        <span class="flex-1 text-sm font-medium text-slate-800 leading-snug">{{ $faq['q'] }}</span>
                        <svg class="w-4 h-4 text-slate-300 shrink-0 mt-0.5 transition-transform duration-200"
                             :class="open ? 'rotate-180' : ''"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                        </svg>
                    </button>
                    <div x-show="open" x-transition.duration.150ms
                         class="px-4 pb-4 text-sm text-slate-500 leading-relaxed border-t border-slate-50 pt-3">
                        {{ $faq['a'] }}
                    </div>
                </div>
            @endforeach
        </div>

        @if ($waNumber)
            @php $waMsg = urlencode('Halo Admin ' . $storeName . ', saya ingin bertanya...'); @endphp
            <div class="mt-4 bg-orange-50 rounded-xl border border-orange-100 p-4 text-center">
                <p class="text-sm text-slate-600 mb-3">Pertanyaan lain? Hubungi kami langsung.</p>
                <a href="https://wa.me/{{ $waNumber }}?text={{ $waMsg }}"
                   target="_blank" rel="noopener"
                   class="h-11 px-6 inline-flex items-center gap-2 bg-green-500 hover:bg-green-600
                          text-white text-sm font-semibold rounded-xl active:scale-95 transition-all">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                    Chat WhatsApp
                </a>
            </div>
        @endif
    @endif

    {{-- ══ KEBIJAKAN PRIVASI ═══════════════════════════════════════════════ --}}
    @if ($page === 'privacy')
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-5">
            <div class="space-y-4 text-sm text-slate-600 leading-relaxed">

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">1. Data yang Kami Kumpulkan</h3>
                    <p>Kami mengumpulkan nama lengkap, nomor WhatsApp, dan alamat pengiriman yang Anda berikan saat melakukan pemesanan.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">2. Penggunaan Data</h3>
                    <p>Data Anda digunakan semata-mata untuk memproses pesanan, menghubungi Anda terkait status pesanan, dan memastikan pengiriman tepat sasaran.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">3. Keamanan Data</h3>
                    <p>Kami berkomitmen menjaga kerahasiaan data Anda dan tidak membagikan informasi pribadi kepada pihak ketiga tanpa izin, kecuali diperlukan untuk proses pengiriman.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">4. Penyimpanan Data</h3>
                    <p>Data pesanan disimpan untuk keperluan riwayat transaksi. Data tersebut terikat pada sesi browser Anda.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">5. Perubahan Kebijakan</h3>
                    <p>Kebijakan ini dapat diperbarui sewaktu-waktu. Perubahan akan diinformasikan melalui halaman ini.</p>
                </div>

            </div>
        </div>
    @endif

    {{-- ══ SYARAT & KETENTUAN ══════════════════════════════════════════════ --}}
    @if ($page === 'terms')
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-5">
            <div class="space-y-4 text-sm text-slate-600 leading-relaxed">

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">1. Layanan</h3>
                    <p>{{ $storeName }} adalah layanan titip beli (jastip) yang membantu pelanggan mendapatkan produk dari mitra lokal. Kami bertindak sebagai perantara antara pembeli dan penjual.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">2. Pemesanan</h3>
                    <p>Pesanan dianggap sah setelah diterima dan dikonfirmasi oleh admin. Ketersediaan produk bergantung pada stok mitra saat pesanan diproses.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">3. Pembayaran</h3>
                    <p>Pembayaran dilakukan sesuai metode yang dipilih saat checkout. Untuk transfer dan QRIS, pembayaran harus diselesaikan dalam batas waktu yang ditentukan.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">4. Pengiriman</h3>
                    <p>Ongkos kirim ditentukan berdasarkan area pengiriman yang dipilih. Estimasi waktu pengiriman bersifat perkiraan dan dapat berubah tergantung kondisi.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">5. Pembatalan</h3>
                    <p>Pembatalan pesanan hanya dapat dilakukan sebelum pesanan berstatus "Diproses". Hubungi admin via WhatsApp untuk mengajukan pembatalan.</p>
                </div>

                <div>
                    <h3 class="font-semibold text-slate-800 mb-1.5">6. Perubahan Ketentuan</h3>
                    <p>{{ $storeName }} berhak mengubah syarat dan ketentuan ini sewaktu-waktu. Penggunaan layanan setelah perubahan berarti Anda menyetujui ketentuan yang baru.</p>
                </div>

            </div>
        </div>
    @endif

</div>
