@extends('layouts.admin', ['title' => 'Trial Ending Soon - Booklio', 'pageTitle' => 'Trial Ending Soon', 'active' => 'subscription'])

@include('admin.subscription.partials.data')

@section('content')
    <div class="space-y-5">
        <div class="rounded-lg border border-amber-100 bg-amber-50 p-5 shadow-card">
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                    <x-ui.badge variant="warning">Trial Ending Soon Banner</x-ui.badge>
                    <h1 class="mt-3 text-2xl font-extrabold text-amber-800">Your free trial ends in {{ $subscriptionState['trial_days_left'] ?? 3 }} days</h1>
                    <p class="mt-2 text-sm leading-6 text-amber-700">Choose a plan now to keep your booking page, staff calendar, reminders, invoices, and customer CRM running without interruption.</p>
                </div>
                <x-ui.button href="{{ route('admin.subscription.upgrade') }}">Upgrade before trial ends</x-ui.button>
            </div>
        </div>

        <x-ui.card title="What happens after trial?" description="These placeholders explain subscription behavior to non-technical business owners.">
            <div class="grid gap-4 md:grid-cols-3">
                @foreach ([['Booking page', 'Paused until a plan is selected'], ['Reminders', 'Scheduled reminders stop sending'], ['Dashboard', 'Read-only access placeholder']] as $item)
                    <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                        <p class="text-sm font-extrabold">{{ $item[0] }}</p>
                        <p class="mt-2 text-sm leading-6 text-booklio-muted">{{ $item[1] }}</p>
                    </div>
                @endforeach
            </div>
        </x-ui.card>
    </div>
@endsection