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

@section('content')
<div class="mb-6 text-center">
    <span class="chip mb-2"><x-icon name="sparkles" class="w-3.5 h-3.5 text-qr-gold"/> Pilih Paket</span>
    <h1 class="text-2xl font-extrabold">Jadi Member Quran Review</h1>
    <p class="mt-1 text-sm text-qr-muted">Akses penuh semua konten premium & harga khusus event.</p>
</div>

@if($current)
<div class="card mb-5 p-4 border-qr-accent/40 bg-qr-accent/10">
    <p class="text-sm font-semibold text-qr-accent-light">Anda member aktif ✓</p>
    <p class="text-xs text-qr-muted">Paket {{ $current->package->name }} — berakhir {{ $current->ends_at?->translatedFormat('d M Y') }}.</p>
</div>
@endif

<div class="space-y-4">
    @foreach($packages as $i => $package)
    <div class="card p-5 {{ $i === 1 ? 'border-qr-accent/50 shadow-glow' : '' }}">
        <div class="flex items-start justify-between">
            <div>
                <h2 class="text-lg font-bold">{{ $package->name }}</h2>
                <p class="text-xs text-qr-muted">{{ $package->duration_days }} hari akses</p>
            </div>
            @if($i === 1)<span class="chip bg-qr-gold/20 text-qr-gold">Populer</span>@endif
        </div>
        <div class="mt-3 flex items-baseline gap-1">
            <span class="text-3xl font-extrabold">Rp{{ number_format($package->price, 0, ',', '.') }}</span>
            <span class="text-sm text-qr-muted">/{{ $package->duration_days }} hari</span>
        </div>
        <ul class="mt-4 space-y-2">
            @foreach(($package->benefits ?? []) as $benefit)
            <li class="flex items-start gap-2 text-sm">
                <x-icon name="check" class="mt-0.5 w-4 h-4 shrink-0 text-qr-accent-light"/>
                <span>{{ $benefit }}</span>
            </li>
            @endforeach
        </ul>
        <form method="POST" action="{{ route('membership.checkout', $package->slug) }}" class="mt-5">
            @csrf
            <button class="{{ $i === 1 ? 'btn-accent' : 'btn-outline' }} w-full">
                Pilih {{ $package->name }}
            </button>
        </form>
    </div>
    @endforeach
</div>

<p class="mt-6 text-center text-xs text-qr-muted">
    Pembayaran via transfer bank dengan kode unik (otomatis terverifikasi). Aman & syariah.
</p>
@endsection