@extends('layouts.auth', ['title' => 'Choose Plan - Booklio', 'wide' => true])

@php
    $booklioDemo = require resource_path('data/booklio.php');
    $plans = collect($booklioDemo['plans'])->map(function ($plan) {
        return array_merge($plan, [
            'variant' => match ($plan['name']) {
                'Free Trial' => 'primary',
                'Professional' => 'success',
                'Agency' => 'purple',
                default => 'muted',
            },
        ]);
    });
@endphp

@section('content')
    <div data-pricing-scope data-billing-cycle="monthly" class="mx-auto max-w-6xl">
        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <x-ui.badge>Choose Plan</x-ui.badge>
                <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark sm:text-4xl">Pick the right Booklio plan</h1>
                <p class="mt-2 max-w-2xl text-sm leading-6 text-booklio-muted">Use dummy pricing and features for now. Billing and subscription logic will be connected later.</p>
            </div>
            <div class="inline-flex rounded-lg border border-booklio-border bg-white p-1 shadow-soft">
                <button type="button" data-billing-cycle="monthly" class="h-10 rounded-md bg-booklio-primary px-4 text-sm font-bold text-white" aria-pressed="true">Monthly</button>
                <button type="button" data-billing-cycle="yearly" class="h-10 rounded-md px-4 text-sm font-bold text-booklio-muted" aria-pressed="false">Yearly</button>
            </div>
        </div>

        <div class="grid gap-5 lg:grid-cols-4">
            @foreach ($plans as $plan)
                @php($isFree = ($plan['monthly'] ?? $plan['price']) === '$0' && ($plan['yearly'] ?? '$0') === '$0')
                <section data-plan-card class="rounded-lg border {{ $plan['name'] === 'Professional' ? 'border-booklio-primary ring-4 ring-blue-100' : 'border-booklio-border' }} bg-white p-5 shadow-card">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-lg font-extrabold text-booklio-dark">{{ $plan['name'] }}</h2>
                            <p
                                data-plan-price
                                data-monthly="{{ $plan['monthly'] ?? $plan['price'] }}"
                                data-yearly="{{ $plan['yearly'] ?? $plan['price'] }}"
                                class="mt-3 text-3xl font-extrabold"
                            >{{ $plan['monthly'] ?? $plan['price'] }}</p>
                            <p
                                data-plan-period
                                data-monthly-period="{{ $isFree ? $plan['period'] : 'per month' }}"
                                data-yearly-period="{{ $isFree ? $plan['period'] : 'per year' }}"
                                class="mt-1 text-xs font-semibold text-booklio-muted"
                            >{{ $isFree ? $plan['period'] : 'per month' }}</p>
                            <p
                                data-plan-note
                                data-monthly-note="{{ $isFree ? 'Trial access' : 'Billed monthly' }}"
                                data-yearly-note="{{ $isFree ? 'Trial access' : 'Billed yearly' }}"
                                class="mt-1 text-xs font-semibold text-booklio-muted"
                            >{{ $isFree ? 'Trial access' : 'Billed monthly' }}</p>
                        </div>
                        <x-ui.badge :variant="$plan['variant']">{{ $plan['badge'] }}</x-ui.badge>
                    </div>
                    <div class="mt-5 space-y-3">
                        @foreach ($plan['features'] as $feature)
                            <div class="flex gap-2 text-sm font-semibold text-slate-700">
                                <x-ui.icon name="check" class="mt-0.5 h-4 w-4 shrink-0 text-booklio-success" />
                                <span>{{ $feature }}</span>
                            </div>
                        @endforeach
                    </div>
                    <x-ui.button class="mt-6 w-full" :variant="$plan['name'] === 'Professional' ? 'primary' : 'secondary'" href="{{ route('auth.trial-started') }}">Select plan</x-ui.button>
                </section>
            @endforeach
        </div>

        <x-ui.card class="mt-6" title="Plan feature comparison" description="A compact comparison buyers expect before starting a trial.">
            <div class="overflow-x-auto booklio-scrollbar">
                <table class="min-w-[760px] w-full divide-y divide-booklio-border text-sm">
                    <thead class="bg-slate-50">
                        <tr>
                            @foreach (['Feature', 'Free Trial', 'Starter', 'Professional', 'Agency'] as $header)
                                <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $header }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-booklio-border bg-white">
                        @foreach ([['Businesses', '1', '1', '3', 'Unlimited'], ['Staff members', '3', '5', '15', 'Unlimited'], ['WhatsApp reminders', 'No', 'No', 'Yes', 'Yes'], ['Reports', 'Basic', 'Basic', 'Advanced', 'Advanced']] as $row)
                            <tr>
                                @foreach ($row as $cell)
                                    <td class="px-4 py-4 font-semibold text-slate-700">{{ $cell }}</td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-ui.card>
    </div>
@endsection