@extends('layouts.app')
@section('title', 'Membership')

@section('content')
<section class="bg-ink py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <x-section-heading eyebrow="Membership" title="Choose your tier" :dark="true">
            Pay a one-time registration fee, then a monthly contribution by M-Pesa. Fees are provisional until confirmed by NCA.
        </x-section-heading>
    </div>
</section>

<section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        @foreach ($tiers as $slug => $tier)
            <x-tier-card :slug="$slug" :tier="$tier" />
        @endforeach
    </div>
</section>

<section class="mx-auto max-w-4xl px-4 pb-8 sm:px-6 lg:px-8" x-data="{ open: 1 }">
    <x-section-heading eyebrow="Questions" title="Good to know" :center="true" />
    <div class="mt-10 divide-y divide-slate-200 rounded-2xl border border-slate-200 bg-white">
        @foreach ([
            ['What do I need to register?', 'Your national ID (front and back), a clear selfie, an M-Pesa number and, optionally, a business certificate or professional credential.'],
            ['How long does approval take?', 'Once your payment is received, our verifiers review your application. You will be notified by SMS and email when it is approved. We may call you to confirm details.'],
            ['How do monthly contributions work?', 'You will receive an M-Pesa prompt each month. We are also applying for M-Pesa standing orders (Ratiba) so contributions can be automatic.'],
            ['Is my data safe?', 'National ID numbers are encrypted, documents are kept on private storage, and we follow the Data Protection Act, 2019. See our privacy policy.'],
            ['Can I register through an agent?', 'Yes. NCA agents and cyber cafés can register you on your behalf using an Agent Code.'],
        ] as $i => [$q, $a])
            <div>
                <button class="flex w-full items-center justify-between gap-4 px-6 py-5 text-left" @click="open = open === {{ $i + 1 }} ? 0 : {{ $i + 1 }}" :aria-expanded="open === {{ $i + 1 }}">
                    <span class="font-semibold text-navy">{{ $q }}</span>
                    <svg class="h-5 w-5 shrink-0 text-gold-deep transition" :class="open === {{ $i + 1 }} ? 'rotate-45' : ''" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>
                </button>
                <p x-show="open === {{ $i + 1 }}" x-cloak class="px-6 pb-5 text-sm leading-relaxed text-slate-600">{{ $a }}</p>
            </div>
        @endforeach
    </div>
</section>
@endsection