<x-filament-widgets::widget>
    <x-filament::section>
        <div class="rounded-3xl border border-white/80 bg-gradient-to-br from-white via-white to-primary-50/70 p-6 shadow-sm">
            <div class="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
                <div class="space-y-3">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-primary-600">Executive snapshot</p>
                    <div class="flex items-center gap-3">
                        <div>
                            <h2 class="text-3xl font-semibold tracking-tight text-gray-950">Producto limpio. KPI claro.</h2>
                            <p class="mt-2 text-sm text-gray-600">Solo decisión arriba. Lectura profunda bajo demanda.</p>
                        </div>
                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-sm text-gray-500" title="La comisión atribuible es el KPI principal del dashboard.">ℹ️</span>
                    </div>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-stretch">
                    <div class="min-w-[240px] rounded-3xl border border-gray-950/5 bg-gray-950 p-6 text-white shadow-sm">
                        <p class="text-[11px] font-bold uppercase tracking-[0.22em] text-white/60">KPI principal</p>
                        <p class="mt-3 text-4xl font-semibold tracking-tight">€{{ number_format($commission, 0) }}</p>
                        <div class="mt-3 flex items-center gap-2 text-sm text-white/70">
                            <span>Comisión atribuible</span>
                            <span class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-white/5 text-[11px]" title="Suma de commission_amount en bookings generados por el funnel.">ℹ️</span>
                        </div>
                    </div>

                    <a href="{{ route('home') }}" class="inline-flex items-center justify-center rounded-2xl bg-primary-600 px-5 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-500">
                        Ver front demo
                    </a>
                </div>
            </div>

            <div class="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                <article class="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">Taxi</p>
                        <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-[11px] text-gray-500" title="Total de rides creados.">ℹ️</span>
                    </div>
                    <p class="mt-3 text-2xl font-semibold tracking-tight text-gray-950">{{ number_format($rides) }}</p>
                </article>
                <article class="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">Bookings</p>
                        <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-[11px] text-gray-500" title="Reservas cerradas desde la demo.">ℹ️</span>
                    </div>
                    <p class="mt-3 text-2xl font-semibold tracking-tight text-gray-950">{{ number_format($bookingsCount) }}</p>
                </article>
                <article class="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">CTR</p>
                        <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-[11px] text-gray-500" title="Relación view → click sobre las recomendaciones visibles.">ℹ️</span>
                    </div>
                    <p class="mt-3 text-2xl font-semibold tracking-tight text-gray-950">{{ $clickThrough }}%</p>
                </article>
                <article class="rounded-2xl border border-white/80 bg-white/90 p-4 shadow-sm">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">GMV</p>
                        <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-[11px] text-gray-500" title="Volumen bruto de las reservas registradas.">ℹ️</span>
                    </div>
                    <p class="mt-3 text-2xl font-semibold tracking-tight text-gray-950">€{{ number_format($gmv, 0) }}</p>
                </article>
            </div>

            <div class="mt-6 grid gap-3 md:grid-cols-3">
                <article class="rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm">
                    <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">Espera útil</p>
                    <p class="mt-2 text-2xl font-semibold tracking-tight text-gray-950">{{ number_format($views) }}</p>
                </article>
                <article class="rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm">
                    <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">Detalle oferta</p>
                    <p class="mt-2 text-2xl font-semibold tracking-tight text-gray-950">{{ number_format($clicks) }}</p>
                </article>
                <article class="rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm">
                    <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500">Ride → booking</p>
                    <p class="mt-2 text-2xl font-semibold tracking-tight text-gray-950">{{ $rideToBooking }}%</p>
                </article>
            </div>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>
