@extends('layouts.app')

@section('title', 'Taxi arrival demo | ArrivalFlow')
@section('meta_description', 'Request a taxi, confirm the ride, and convert the arrival into a contextual local booking.')

@section('content')
<section class="hero">
    <article class="card hero-copy">
        <div>
            <span class="eyebrow">Thin slice · Laravel-first demo</span>
            <h1>Turn a taxi request into a booking in under two minutes.</h1>
            <p>This demo keeps the story brutally simple: request a taxi, confirm the arrival, surface 2–3 relevant offers, and close a booking with measurable tracking.</p>
        </div>
        <div class="stats">
            <div class="stat"><strong>{{ $metrics['rides'] }}</strong><span>Taxi requests</span></div>
            <div class="stat"><strong>{{ $metrics['views'] }}</strong><span>Recommendation views</span></div>
            <div class="stat"><strong>{{ $metrics['bookings'] }}</strong><span>Bookings completed</span></div>
        </div>
    </article>
    <aside class="card orb-wrap">
        <div class="stack">
            <div class="mini-card">
                <small>Story hook</small>
                <h3>Taxi confirmed</h3>
                <p>Now show the guest something useful while they wait or right after arrival.</p>
            </div>
            <div class="mini-card">
                <small>Signal</small>
                <h3>Real tracking</h3>
                <p>We log request creation, recommendation views, clicks, and booking completion.</p>
            </div>
            <div class="mini-card success">
                <small>Admin angle</small>
                <h3>Demo-ready funnel</h3>
                <p>Enough structure to seed content, show traction, and extend into a fuller platform later.</p>
            </div>
        </div>
    </aside>
</section>

<section id="request" class="split">
    <article class="card">
        <span class="eyebrow">1 · Request taxi</span>
        <h2>Request a ride</h2>
        <p class="muted">Use realistic destination context so the recommendation engine has something to work with.</p>

        @if ($errors->any())
            <div class="errors" style="margin-top:16px;">
                <strong>Please fix the form:</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>
                    Pickup label
                    <input type="text" name="pickup_label" value="{{ old('pickup_label', 'Airport Terminal 1') }}" placeholder="Airport Terminal 1" required>
                </label>
                <label>
                    Destination label
                    <input type="text" name="destination_label" value="{{ old('destination_label', 'Old Town') }}" placeholder="Old Town, Marina, Beach..." required>
                </label>
            </div>
            <div class="grid-2">
                <label>
                    Scheduled for
                    <input type="datetime-local" name="scheduled_for" value="{{ old('scheduled_for') }}">
                </label>
                <label>
                    Source channel
                    <select name="source_channel" required>
                        @foreach (['web' => 'Web', 'hotel' => 'Hotel', 'reception' => 'Reception', 'app' => 'App'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('source_channel', 'web') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <input type="hidden" name="locale" value="en">
            <button class="btn" type="submit">Confirm taxi and show offers</button>
        </form>
    </article>

    <aside class="card" id="how">
        <span class="eyebrow">Demo logic</span>
        <h2>What happens next</h2>
        <div class="list" style="margin-top:18px;">
            <div class="list-item"><strong>1.</strong> Ride is stored with context zone, ETA, and source channel.</div>
            <div class="list-item"><strong>2.</strong> A simple rules engine scores live offers for that destination.</div>
            <div class="list-item"><strong>3.</strong> The confirmed ride screen logs recommendation views and invites a click.</div>
            <div class="list-item"><strong>4.</strong> The booking form confirms demand and logs the conversion path.</div>
        </div>
    </aside>
</section>

<section class="section">
    <div style="display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px;">
        <div>
            <span class="eyebrow">Demo inventory</span>
            <h2>Seeded offers</h2>
        </div>
        <p>These are the kinds of offers the ride confirmation step can surface.</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->price_from)
                            <span class="pill">From €{{ 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>{{ $offer->excerpt }}</p>
                </div>
            </article>
        @endforeach
    </div>
</section>
@endsection