@extends('mobile.layouts.app', ['title' => 'Portal Home'])

@section('content')
    <section class="space-y-5">
        <div>
            <h2 class="text-xl font-semibold text-slate-900">Welcome, {{ $customerName }}!</h2>
            <p class="mt-1 text-sm text-slate-600">Your mobile portal is connected and ready.</p>
        </div>

        <div class="rounded-xl border border-emerald-100 bg-emerald-50 p-4">
            <p class="text-xs uppercase tracking-[0.14em] text-emerald-700">Loyalty Points</p>
            <p class="mt-2 text-3xl font-bold text-emerald-800">{{ $loyaltyPoints }}</p>
        </div>

        <div>
            <p class="text-sm font-medium text-slate-700">Features coming soon</p>
            <div class="mt-3 grid grid-cols-2 gap-3">
                @foreach (['Menu', 'Orders', 'Loyalty', 'Profile'] as $item)
                    <div class="rounded-lg border border-slate-200 bg-slate-100 px-3 py-2 text-center text-sm text-slate-500">
                        {{ $item }}
                    </div>
                @endforeach
            </div>
        </div>

        <form method="POST" action="{{ route('portal.logout') }}" class="pt-2">
            @csrf
            <button
                type="submit"
                class="w-full rounded-lg bg-slate-900 px-4 py-3 text-sm font-medium text-white hover:bg-slate-700"
            >
                Sign out
            </button>
        </form>
    </section>
@endsection