@extends('layouts.app')

@section('title', 'TAXILANZ Demo | Taxi, recomendaciones contextuales y reserva simple')
@section('meta_description', 'Demo TAXILANZ en Laravel: el taxi funciona como punto de entrada para activar 2–3 propuestas relevantes y convertirlas en reservas medibles.')

@section('content')
@php
    $primaryOffer = $featuredOffers->first();
    $secondaryOffer = $featuredOffers->skip(1)->first();
@endphp
<section class="hero">
    <article class="card hero-copy hero-copy--compact">
        <div>
            <span class="eyebrow">Taxi-first product · TAXILANZ</span>
            <h1>Pide taxi. Decide una propuesta. Cierra la reserva.</h1>
            <p class="compact-lead">Solo 4 pantallas. Solo lo necesario para decidir.</p>
        </div>

        <div class="stats">
            <div class="stat"><strong>{{ $metrics['rides'] }}</strong><span>Taxi</span></div>
            <div class="stat"><strong>{{ $metrics['views'] }}</strong><span>Espera útil</span></div>
            <div class="stat"><strong>{{ $metrics['bookings'] }}</strong><span>Reservas</span></div>
        </div>

        <div class="inline-actions inline-actions--stack-mobile">
            <a class="btn" href="#request">Pedir taxi</a>
            <button type="button" class="btn btn-secondary" data-modal-open="home-story">ℹ️ Más info</button>
        </div>
    </article>

    <aside class="phone-shell" aria-label="Vista previa móvil de TAXILANZ">
        <div class="phone-screen phone-screen--focused">
            <div class="phone-topbar">
                <span>{{ now()->format('H:i') }} · Lanzarote</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>

            <span class="screen-badge">Taxi confirmado</span>
            <h2 class="screen-title">Tu taxi llega en 8 min</h2>

            <div class="route-card">
                <small>Trayecto activo</small>
                <strong>Aeropuerto César Manrique → Puerto del Carmen</strong>
                <span>Disponible ahora · 3 propuestas máximo</span>
            </div>

            <div class="recommendation-focus">
                <div class="phone-action-top">
                    <strong class="phone-action-title">{{ $primaryOffer?->title ?: 'Sunset Marina Table' }}</strong>
                    <span>Top 1</span>
                </div>
                <div class="phone-action-meta">
                    @if($primaryOffer?->price_from)
                        <span>€{{ number_format((float) $primaryOffer->price_from, 0) }}</span>
                    @endif
                    @if($primaryOffer?->duration_minutes)
                        <span>{{ $primaryOffer->duration_minutes }} min</span>
                    @endif
                    <span>{{ $primaryOffer?->location_label ?: 'Marina' }}</span>
                </div>
                <a class="btn" href="#request">Ver y reservar</a>
            </div>

            <div class="phone-list">
                <div class="phone-list-item">
                    <div class="phone-list-row">
                        <strong>{{ $secondaryOffer?->title ?: 'Hotel Spa Recovery' }}</strong>
                        <span>@if($secondaryOffer?->price_from)€{{ number_format((float) $secondaryOffer->price_from, 0) }}@else Ahora @endif</span>
                    </div>
                    <small>{{ $secondaryOffer?->location_label ?: 'Disponible ahora' }}</small>
                </div>
                <div class="phone-list-item">
                    <div class="phone-list-row">
                        <strong>Reserva confirmada</strong>
                        <span>OK</span>
                    </div>
                    <small>Estado, importe y cierre</small>
                </div>
            </div>
        </div>
    </aside>
</section>

<dialog class="app-modal" id="home-story" aria-labelledby="home-story-title">
    <div class="app-modal-card">
        <div class="app-modal-head">
            <div>
                <p class="eyebrow">Más info</p>
                <h2 id="home-story-title">Cómo se lee la demo</h2>
            </div>
            <button type="button" class="app-modal-close" data-modal-close aria-label="Cerrar modal">Cerrar</button>
        </div>

        <div class="metric-strip metric-strip--2">
            <div class="metric-cell">
                <strong>1 · Taxi</strong>
                <span>Entrada simple</span>
            </div>
            <div class="metric-cell">
                <strong>2 · Confirmado</strong>
                <span>ETA + atención</span>
            </div>
            <div class="metric-cell">
                <strong>3 · Oferta</strong>
                <span>Precio y disponibilidad</span>
            </div>
            <div class="metric-cell">
                <strong>4 · Reserva</strong>
                <span>Cierre atribuible</span>
            </div>
        </div>

        <ul class="accordion-list">
            <li>El turista ve primero movilidad: origen, destino y confirmación.</li>
            <li>La recomendación aparece cuando el taxi ya está confirmado.</li>
            <li>El detalle de la oferta muestra solo contexto, precio, duración y CTA.</li>
            <li>La reserva enseña estado e importe; el negocio queda bajo demanda.</li>
        </ul>
    </div>
</dialog>

<section class="section">
    <div class="section-head section-head--compact">
        <div>
            <span class="eyebrow">4 pantallas</span>
            <h2>Recorrido rápido</h2>
        </div>
        <button type="button" class="icon-button" data-modal-open="home-story" data-tooltip="Ver lectura completa">ℹ️ Más info</button>
    </div>

    <div class="storyboard-grid">
        <article class="card storyboard-card">
            <span class="eyebrow">1 · Taxi</span>
            <div class="storyboard-phone">
                <span class="storyboard-step">Start</span>
                <h3 style="margin:0;">Pedir taxi</h3>
                <div class="offer-meta">
                    <span class="pill">Origen</span>
                    <span class="pill">Destino</span>
                    <span class="pill">Canal</span>
                </div>
            </div>
        </article>

        <article class="card storyboard-card">
            <span class="eyebrow">2 · Confirmado</span>
            <div class="storyboard-phone">
                <span class="storyboard-step is-warm">ETA</span>
                <h3 style="margin:0;">Taxi confirmado</h3>
                <div class="offer-meta">
                    <span class="pill">{{ $metrics['views'] }} vistas</span>
                    <span class="pill">Top 3</span>
                    <span class="pill">CTA</span>
                </div>
            </div>
        </article>

        <article class="card storyboard-card">
            <span class="eyebrow">3 · Oferta</span>
            <div class="storyboard-phone">
                <span class="storyboard-step">Decision</span>
                <h3 style="margin:0;">Detalle oferta</h3>
                <div class="offer-meta">
                    <span class="pill">Precio</span>
                    <span class="pill">Duración</span>
                    <span class="pill">Disponibilidad</span>
                </div>
            </div>
        </article>

        <article class="card storyboard-card">
            <span class="eyebrow">4 · Reserva</span>
            <div class="storyboard-phone">
                <span class="storyboard-step is-success">Close</span>
                <h3 style="margin:0;">Reserva confirmada</h3>
                <div class="offer-meta">
                    <span class="pill">Estado</span>
                    <span class="pill">Importe</span>
                    <span class="pill">Booking</span>
                </div>
            </div>
        </article>
    </div>
</section>

<section id="request" class="split">
    <article class="card form-card">
        <span class="eyebrow">Pedir taxi</span>
        <h2>Activa un trayecto</h2>
        <p class="compact-lead">Origen, destino y canal. Nada más.</p>

        @if ($errors->any())
            <div class="errors">
                <strong>Revisa el formulario:</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="post" action="{{ route('rides.store') }}" style="margin-top:18px;">
            @csrf
            <div class="grid-2">
                <label>
                    <span class="field-label">Punto de recogida</span>
                    <input type="text" name="pickup_label" value="{{ old('pickup_label', 'Aeropuerto César Manrique') }}" placeholder="Aeropuerto César Manrique" required>
                </label>
                <label>
                    <span class="field-label">Destino</span>
                    <input type="text" name="destination_label" value="{{ old('destination_label', 'Puerto del Carmen') }}" placeholder="Puerto del Carmen, Marina, Playa Blanca..." required>
                </label>
            </div>
            <div class="grid-2">
                <label>
                    <span class="field-label">Programado para</span>
                    <input type="datetime-local" name="scheduled_for" value="{{ old('scheduled_for') }}">
                </label>
                <label>
                    <span class="field-label">Canal de origen</span>
                    <select name="source_channel" required>
                        @foreach (['web' => 'Web', 'hotel' => 'Hotel', 'reception' => 'Recepción', 'app' => 'App'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('source_channel', 'hotel') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <input type="hidden" name="locale" value="es">
            <button class="btn" type="submit">Pedir taxi</button>
        </form>
    </article>

    <aside class="card">
        <span class="eyebrow">Vista rápida</span>
        <h2>Qué verás después</h2>

        <div class="story-rail">
            <span class="story-chip is-done">1 · Taxi</span>
            <span class="story-chip is-active">2 · Confirmado</span>
            <span class="story-chip">3 · Oferta</span>
            <span class="story-chip">4 · Reserva</span>
        </div>

        <details class="disclosure disclosure--soft" style="margin-top:16px;">
            <summary>
                <span>ℹ️ Más info</span>
                <span>Abrir</span>
            </summary>
            <div class="disclosure-body">
                <ul class="accordion-list">
                    <li>Máximo 3 propuestas visibles en el momento de espera.</li>
                    <li>Precio, duración y disponibilidad por delante.</li>
                    <li>Atribución, comisión e impacto solo bajo demanda.</li>
                </ul>
            </div>
        </details>
    </aside>
</section>

@if ($featuredOffers->isNotEmpty())
<section class="section">
    <div class="section-head section-head--compact">
        <div>
            <span class="eyebrow">Propuestas activas</span>
            <h2>2–3 opciones máximo</h2>
        </div>
        <a class="inline-link" href="/admin/login">Ver dashboard</a>
    </div>

    <div class="cards cards--compact">
        @foreach ($featuredOffers as $offer)
            <article class="card offer-card offer-card--compact">
                <div class="offer-visual" aria-hidden="true"></div>
                <div>
                    <div class="offer-meta">
                        <span class="pill">{{ ucfirst($offer->category) }}</span>
                        @if($offer->location_label)
                            <span class="pill">{{ $offer->location_label }}</span>
                        @endif
                        @if($offer->price_from)
                            <span class="pill">Desde €{{ number_format((float) $offer->price_from, 0) }}</span>
                        @endif
                        @if($offer->duration_minutes)
                            <span class="pill">{{ $offer->duration_minutes }} min</span>
                        @endif
                    </div>
                    <h3 style="margin-top:14px;">{{ $offer->title }}</h3>
                    <p class="muted">Disponible ahora</p>
                </div>
            </article>
        @endforeach
    </div>
</section>
@endif

<section class="section">
    <article class="card" style="display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;">
        <div>
            <span class="eyebrow">Dashboard</span>
            <h2>KPI arriba. Funnel limpio.</h2>
            <p class="muted">Rides, reservas y comisión atribuible.</p>
        </div>
        <a class="btn btn-secondary" href="/admin/login">Abrir dashboard</a>
    </article>
</section>
@endsection