@extends('layouts.app')

@section('title', 'Reserva confirmada | TAXILANZ Demo')
@section('meta_description', 'Pantalla de éxito de la reserva para el funnel taxi → recomendación → booking.')

@section('content')
<section class="split">
    <article class="card success form-card">
        <span class="eyebrow">6 · Reserva confirmada</span>
        <h1 style="font-size:clamp(2.15rem,4vw,3.7rem);max-width:14ch;">Reserva cerrada.</h1>
        <p>
            {{ $booking->customer_name }} ya quedó registrado para <strong>{{ $booking->offer->title }}</strong>.
            Aquí se ve el valor del MVP: un trayecto real terminó en una intención comercial medible y atribuible.
        </p>

        <div class="route-card">
            <small>Resultado visible</small>
            <strong>{{ $booking->offer->title }}</strong>
            <span>{{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'Importe pendiente' }} · {{ ucfirst($booking->status) }} · {{ $booking->ride?->context_zone ?: ($booking->offer->location_label ?: 'General') }}</span>
        </div>

        <div class="screen-kpis">
            <div class="screen-kpi">
                <strong>{{ $booking->amount ? '€'.number_format((float) $booking->amount, 0) : '—' }}</strong>
                <span>importe</span>
            </div>
            <div class="screen-kpi">
                <strong>{{ $booking->commission_amount ? '€'.number_format((float) $booking->commission_amount, 0) : '—' }}</strong>
                <span>comisión</span>
            </div>
            <div class="screen-kpi">
                <strong>{{ $booking->recommendation?->id ? 'Top '.$booking->recommendation->position : 'Directa' }}</strong>
                <span>atribución</span>
            </div>
        </div>

        <div class="list">
            <div class="list-item">Booking UUID: {{ $booking->uuid }}</div>
            <div class="list-item">Estado: {{ ucfirst($booking->status) }}</div>
            <div class="list-item">Importe: {{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'Pendiente' }}</div>
            <div class="list-item">Comisión estimada: {{ $booking->commission_amount ? '€'.number_format((float) $booking->commission_amount, 2) : 'Pendiente' }}</div>
        </div>

        <div class="notice">
            <strong>Qué demuestra este cierre:</strong>
            el taxi no fue solo transporte. Funcionó como disparador de una reserva adicional con valor económico visible.
        </div>
    </article>

    <aside class="card form-card">
        <span class="eyebrow">Lectura de negocio</span>
        <div class="phone-screen" style="padding:18px;">
            <div class="phone-topbar">
                <span>Conversión atribuida</span>
                <span class="phone-dot-group" aria-hidden="true">
                    <span class="phone-dot"></span>
                    <span class="phone-dot"></span>
                    <span class="phone-dot is-live"></span>
                </span>
            </div>
            <div class="phone-list">
                <div class="phone-list-item"><strong>Ride vinculado</strong><small>{{ $booking->ride?->uuid ?? 'Reserva directa' }}</small></div>
                <div class="phone-list-item"><strong>Canal de origen</strong><small>{{ $booking->ride?->source_channel ? ucfirst($booking->ride->source_channel) : 'Directo' }}</small></div>
                <div class="phone-list-item"><strong>Zona</strong><small>{{ $booking->ride?->context_zone ?: ($booking->offer->location_label ?: 'General') }}</small></div>
                <div class="phone-list-item"><strong>Recomendación vinculada</strong><small>{{ $booking->recommendation?->id ? 'Top '.$booking->recommendation->position : 'No' }}</small></div>
                <div class="phone-list-item"><strong>Email cliente</strong><small>{{ $booking->customer_email ?: 'No informado' }}</small></div>
            </div>
        </div>
        <div class="cta-row" style="margin-top:18px;">
            <a class="btn" href="{{ route('home') }}">Iniciar otro trayecto</a>
            @if($booking->ride)
                <a class="btn btn-secondary" href="{{ route('rides.confirmed', $booking->ride) }}">Volver al taxi confirmado</a>
            @endif
        </div>
    </aside>
</section>
@endsection
