@extends('layouts.app')
@section('title', 'Verify member')

@section('content')
<section class="mx-auto max-w-lg px-4 py-20 text-center sm:px-6">
    @if ($valid)
        <span class="mx-auto grid h-20 w-20 place-items-center rounded-full bg-emerald-100 text-emerald-600"><svg class="h-10 w-10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
        <h1 class="mt-6 font-display text-4xl font-bold text-navy">Verified NCA member</h1>
        <div class="card mt-8 p-6 text-left text-sm">
            <dl class="space-y-3">
                <div class="flex justify-between"><dt class="text-slate-500">Name</dt><dd class="font-semibold">{{ $member['name'] }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Member no.</dt><dd class="font-semibold">{{ $member['member_no'] }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Tier</dt><dd class="font-semibold">{{ $member['tier'] }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Status</dt><dd><x-status-badge :status="$member['status']" /></dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Valid until</dt><dd class="font-semibold">{{ $member['valid_until'] }}</dd></div>
            </dl>
        </div>
        <p class="mt-4 text-xs text-slate-400">Only minimal, non-sensitive details are ever shown here.</p>
    @else
        <span class="mx-auto grid h-20 w-20 place-items-center rounded-full bg-rose-100 text-rose-600"><svg class="h-10 w-10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6L6 18"/></svg></span>
        <h1 class="mt-6 font-display text-4xl font-bold text-navy">Member not found</h1>
        <p class="mt-3 text-slate-600">No active NCA member matches <strong>{{ $memberNo }}</strong>. The card may be invalid or expired.</p>
    @endif
</section>
@endsection