@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>
                Mientras esperas, mostramos propuestas que encajan con tu destino y tu momento.
                Aquí es donde TAXILANZ deja claro que no vende “más catálogo”, sino mejores decisiones justo a tiempo.
            </p>
        </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="card orb-wrap">
        <div class="stack">
            <div class="mini-card">
                <small>Señal capturada</small>
                <h3>Ride creado</h3>
                <p>La solicitud ya quedó registrada con contexto para atribución y operación.</p>
            </div>
            <div class="mini-card">
                <small>Motor simple</small>
                <h3>Solo 2–3 opciones</h3>
                <p>La lógica prioriza relevancia, disponibilidad y facilidad de cierre, no volumen.</p>
            </div>
            <div class="mini-card success">
                <small>Objetivo demo</small>
                <h3>Provocar clic útil</h3>
                <p>Si el usuario entra al detalle y reserva, el panel ya puede contar una historia de impacto.</p>
            </div>
        </div>
    </aside>
</section>

<section class="section">
    <div style="display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px;">
        <div>
            <span class="eyebrow">3 · Recomendaciones</span>
            <h2>Encajan con tu ruta ahora</h2>
        </div>
        <p>Estas vistas ya están generando eventos <code>recommendation_viewed</code>.</p>
    </div>

    <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">Score {{ (int) $recommendation->score }}</span>
                        @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="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>
</section>
@endsection
