@extends('layouts.app')

@section('title', 'Taxi confirmado | TAXILANZ Demo')
@section('meta_description', 'Pantalla de taxi confirmado con recomendaciones contextuales y tracking de visualización.')

@section('content')
<section class="hero">
    <article class="card hero-copy">
        <div>
            <span class="eyebrow">2 · Taxi confirmado</span>
            <h1>Tu taxi llega en {{ $ride->eta_minutes ?? 6 }} min.</h1>
            <p>
                Perfecto. Mientras llega, TAXILANZ no te enseña un catálogo infinito: te propone solo opciones que
                encajan con este trayecto, cerca de tu destino y fáciles de decidir ahora mismo.
            </p>
        </div>

        <div class="stats">
            <div class="stat">
                <strong>{{ $ride->eta_minutes ?? 6 }} min</strong>
                <span>ventana de atención antes de subir</span>
            </div>
            <div class="stat">
                <strong>{{ $recommendations->count() }}</strong>
                <span>opciones priorizadas, no ruido</span>
            </div>
            <div class="stat">
                <strong>1 toque</strong>
                <span>para pasar del trayecto a la reserva</span>
            </div>
        </div>

        <div class="list" style="margin-top:0;">
            <div class="list-item"><strong>Recogida:</strong> {{ $ride->pickup_label }}</div>
            <div class="list-item"><strong>Destino:</strong> {{ $ride->destination_label }}</div>
            <div class="list-item"><strong>Canal:</strong> {{ ucfirst($ride->source_channel) }} · <strong>Zona:</strong> {{ $ride->context_zone ?: 'General' }}</div>
        </div>
    </article>

    <aside class="phone-shell" aria-label="Vista móvil del taxi confirmado">
        <div class="phone-screen">
            <div class="phone-topbar">
                <span>Taxi confirmado</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="route-card">
                <small>Trayecto activo</small>
                <strong>{{ $ride->pickup_label }} → {{ $ride->destination_label }}</strong>
                <span>ETA {{ $ride->eta_minutes ?? 6 }} min · {{ ucfirst($ride->source_channel) }} · {{ $ride->context_zone ?: 'Zona activa' }}</span>
            </div>

            <span class="screen-badge">Encaja con tu ruta</span>
            <div class="phone-list">
                @forelse ($recommendations->take(3) as $recommendation)
                    <a class="phone-action {{ $recommendation->position === 1 ? 'phone-action--accent' : '' }}" href="{{ route('offers.show', $recommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $recommendation->id }}">
                        <div class="phone-action-top">
                            <strong class="phone-action-title">{{ $recommendation->offer->title }}</strong>
                            <span>Top {{ $recommendation->position }}</span>
                        </div>
                        <small>{{ $recommendation->position === 1 ? 'Parada rápida' : 'Plan al llegar' }}</small>
                        <div class="phone-action-meta">
                            @if($recommendation->offer->location_label)<span>{{ $recommendation->offer->location_label }}</span>@endif
                            @if($recommendation->offer->duration_minutes)<span>{{ $recommendation->offer->duration_minutes }} min</span>@endif
                            @if($recommendation->offer->price_from)<span>€{{ number_format((float) $recommendation->offer->price_from, 0) }}</span>@endif
                        </div>
                    </a>
                @empty
                    <div class="phone-empty">No hay recomendaciones activas todavía, pero el ride ya quedó listo para atribución.</div>
                @endforelse
            </div>
        </div>
    </aside>
</section>

<section class="section">
    <div class="section-head">
        <div>
            <span class="eyebrow">3 · Recomendaciones</span>
            <h2>Encajan con tu ruta ahora</h2>
        </div>
        <p>Primero relevancia. Después variedad. Siempre con contexto.</p>
    </div>

    @if ($recommendations->isEmpty())
        <div class="notice">
            No hay recomendaciones activas para este trayecto todavía. La solicitud sí quedó registrada y lista para atribución.
        </div>
    @else
        <div class="cards">
            @foreach ($recommendations as $recommendation)
                <article class="card offer-card">
                    <div class="offer-visual" aria-hidden="true"></div>
                    <div>
                        <div class="offer-meta">
                            <span class="pill">Top {{ $recommendation->position }}</span>
                            <span class="pill">{{ $recommendation->position === 1 ? 'Parada rápida' : 'Plan al llegar' }}</span>
                            @if($recommendation->offer->available_now)
                                <span class="pill">Disponible hoy</span>
                            @endif
                            @if($recommendation->offer->location_label)
                                <span class="pill">{{ $recommendation->offer->location_label }}</span>
                            @endif
                        </div>
                        <h3 style="margin-top:14px;">{{ $recommendation->offer->title }}</h3>
                        <p>{{ $recommendation->offer->excerpt }}</p>

                        <div class="list" style="margin-top:14px;">
                            @if($recommendation->offer->duration_minutes)
                                <div class="list-item"><strong>Duración:</strong> {{ $recommendation->offer->duration_minutes }} min · pensada para decidir sin fricción</div>
                            @endif
                            @if($recommendation->offer->price_from)
                                <div class="list-item"><strong>Desde:</strong> €{{ number_format((float) $recommendation->offer->price_from, 0) }} · ticket claro para mostrar impacto comercial</div>
                            @endif
                        </div>

                        <div class="notice" style="margin-top:14px;">
                            <strong>Por qué encaja:</strong> {{ $recommendation->reason }}
                        </div>
                    </div>
                    <a class="btn" href="{{ route('offers.show', $recommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $recommendation->id }}">Ver detalle y reservar</a>
                </article>
            @endforeach
        </div>
    @endif
</section>
@endsection
