39498-vm/resources/views/home.blade.php

@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')
<section class="hero">
    <article class="card hero-copy">
        <div>
            <span class="eyebrow">Laravel-first demo · TAXILANZ</span>
            <h1>El taxi se convierte en el inicio de una reserva útil.</h1>
            <p>
                Esta demo cuenta una historia muy concreta: un turista pide taxi, el trayecto se confirma,
                aparecen 2–3 propuestas relevantes y una de ellas se convierte en reserva con tracking real.
                Sin marketplace. Sin catálogo infinito. Solo activación en el momento exacto.
            </p>
        </div>

        <div class="stats">
            <div class="stat"><strong>{{ $metrics['rides'] }}</strong><span>Solicitudes de taxi</span></div>
            <div class="stat"><strong>{{ $metrics['views'] }}</strong><span>Vistas de recomendación</span></div>
            <div class="stat"><strong>{{ $metrics['bookings'] }}</strong><span>Reservas cerradas</span></div>
        </div>
    </article>

    <aside class="phone-shell" aria-label="Vista previa móvil de TAXILANZ">
        <div class="phone-screen">
            <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">Hoy en Lanzarote</span>
            <h2 class="screen-title">Pedir taxi</h2>
            <p class="screen-copy">La app entra por movilidad y enseguida abre una siguiente decisión útil, simple y medible.</p>

            <div class="route-card">
                <small>Trayecto sugerido</small>
                <strong>Aeropuerto César Manrique → Puerto del Carmen</strong>
                <span>Contexto suficiente para activar sugerencias relevantes sin parecer marketplace.</span>
            </div>

            <div class="screen-kpis">
                <div class="screen-kpi"><strong>{{ $metrics['rides'] }}</strong><span>rides</span></div>
                <div class="screen-kpi"><strong>{{ $metrics['clicks'] }}</strong><span>clics</span></div>
                <div class="screen-kpi"><strong>{{ $metrics['bookings'] }}</strong><span>bookings</span></div>
            </div>

            <div class="phone-list">
                @foreach ($featuredOffers->take(2) as $offer)
                    <div class="phone-list-item">
                        <div class="phone-list-row">
                            <strong>{{ $offer->title }}</strong>
                            <span>{{ $loop->first ? 'Top now' : 'Next' }}</span>
                        </div>
                        <small>{{ $offer->location_label ?: 'Zona activa' }}</small>
                    </div>
                @endforeach
            </div>

            <a class="btn" href="#request">Activar demo</a>
        </div>
    </aside>
</section>

<section class="section">
    <div class="proof-grid">
        <article class="card proof-card">
            <span class="eyebrow">Impacto partner</span>
            <strong class="proof-stat">{{ $metrics['ride_to_booking_rate'] }}%</strong>
            <h2>Conversión ride → booking</h2>
            <p>La demo enseña que un trayecto confirmado puede convertirse en ingreso atribuible, no solo en transporte resuelto.</p>
        </article>

        <article class="card proof-card">
            <span class="eyebrow">Señal comercial</span>
            <strong class="proof-stat">€{{ number_format($metrics['commission'], 0) }}</strong>
            <h2>Comisión estimada trazable</h2>
            <p>Desde el panel puedes enseñar GMV demo, comisión y etapas del funnel sin depender de discurso abstracto.</p>
        </article>

        <article class="card proof-card">
            <span class="eyebrow">Ángulo ventas</span>
            <strong class="proof-stat">{{ $metrics['clicks'] }}</strong>
            <h2>Clics con intención real</h2>
            <p>Menos catálogo, más contexto. Ese es el argumento que entienden hotel, recepción y operador local.</p>
            <a class="inline-link" href="/admin/login">Abrir panel demo</a>
        </article>
    </div>
</section>

<section id="request" class="split">
    <article class="card form-card">
        <span class="eyebrow">1 · Solicitar taxi</span>
        <h2>Activa un trayecto demo</h2>
        <p class="muted">Usa un origen y destino realistas de Lanzarote para que el motor pueda puntuar mejor las propuestas.</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

        <div class="form-note">
            Acción principal first. Cuatro campos, cero fricción y suficiente señal para contar la historia completa en móvil.
        </div>

        <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">Confirmar taxi y activar sugerencias</button>
        </form>
    </article>

    <aside id="how" class="card">
        <span class="eyebrow">Qué demuestra esta demo</span>
        <h2>Flujo MVP real</h2>
        <div class="list">
            <div class="list-item"><strong>1.</strong> Se guarda el ride con contexto, ETA y canal. <p>Eso ya deja una señal útil para operación y atribución.</p></div>
            <div class="list-item"><strong>2.</strong> Un motor simple puntúa ofertas publicadas. <p>No busca mostrarlo todo; solo lo que mejor encaja ahora.</p></div>
            <div class="list-item"><strong>3.</strong> La pantalla de taxi confirmado genera vistas y clics medibles. <p>Ahí empieza el funnel de impacto.</p></div>
            <div class="list-item"><strong>4.</strong> La reserva cierra el circuito con conversión trazable. <p>Es la historia mínima que necesita un demo killer.</p></div>
        </div>
    </aside>
</section>

<section class="section">
    <div class="section-head">
        <div>
            <span class="eyebrow">Inventario demo</span>
            <h2>Ofertas listas para sugerir</h2>
        </div>
        <p>Contenido corto, accionable y relevante para un turista que ya ha pedido transporte.</p>
    </div>

    <div class="cards">
        @foreach ($featuredOffers as $offer)
            <article class="card offer-card">
                <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
                    </div>
                    <h3 style="margin-top:14px;">{{ $offer->title }}</h3>
                    <p>{{ $offer->excerpt }}</p>
                </div>
            </article>
        @endforeach
    </div>
</section>

<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">Cierre demo</span>
            <h2>Front simple para turista. Historia clara para negocio.</h2>
            <p class="muted">Cuando termines el recorrido, entra en el panel para enseñar funnel, canales y reservas sin salir de la narrativa TAXILANZ.</p>
        </div>
        <a class="btn btn-secondary" href="/admin/login">Ir al dashboard Filament</a>
    </article>
</section>
@endsection