@extends('layouts.public')

@section('content')
@php
/** @var array $cuisines @var array $dishMap @var array $featured @var array $restaurants
 *  @var array $dishes  menu items keyed by restaurant id
 *  @var array $windows today's trading window keyed by restaurant id */
$dishes = $dishes ?? [];
$windows = $windows ?? [];

// Build the map markers — one per approved restaurant that has coordinates.
$mapPoints = [];
foreach ($restaurants as $r) {
    $lat = $r['lat'] ?? null;
    $lng = $r['lng'] ?? null;
    if ($lat === null || $lng === null || $lat === '' || $lng === '') { continue; }
    $mapPoints[] = [
        'lat'   => (float) $lat,
        'lng'   => (float) $lng,
        'label' => (string) $r['name'],
        'url'   => url('/restaurant/' . $r['slug']),
        // The restaurant's own storefront photo as the marker — same framed brandmark
        // pin the dashboard maps use for the logo, so a diner recognises the place from
        // the map itself. Falls back to the logo, then initials, when no cover is set.
        'iconHtml' => restaurant_cover_html($r, 'sm'),
        /* WHAT THE PIN SAYS WHEN IT IS OPENED. Built here rather than in the map script so it is
           translated, formatted and escaped by the same helpers as the rest of the product — a
           price is money(), a rating is number_format(), and none of that belongs in JavaScript.
           The map layer simply shows what it is handed. */
        'popupHtml' => partial('map-venue-popup', [
            'r'       => $r,
            'dishes'  => $dishes[(int) $r['id']] ?? [],
            'window'  => $windows[(int) $r['id']] ?? null,
        ]),
    ];
}
/* THE DINER'S OWN DOORSTEP, when they are signed in and have saved one.
   Added last so it draws over the restaurant pins, and it becomes the centre — a page called
   "Restaurants near you" that opens on somebody else's neighbourhood is answering a different
   question. A visitor who is not signed in, or has saved nothing, gets exactly what they got
   before: the first venue. */
$home = $home ?? null;
if ($home !== null) {
    $mapPoints[] = [
        'lat'   => (float) $home['lat'],
        'lng'   => (float) $home['lng'],
        'label' => (string) $home['label'],
        'glyph' => 'fa-home',
    ];
}
$center = $home !== null
    ? ['lat' => (float) $home['lat'], 'lng' => (float) $home['lng']]
    : ($mapPoints[0] ?? ['lat' => 37.7749, 'lng' => -122.4194]);
@endphp
<!-- Above the fold: restaurants near you (list) + live map with a marker per restaurant -->
@if (section_on('geo-explore'))
<section class="qm-section qm-findloc-explore">
    <div class="container-fluid">
        <div class="qm-findloc-split" data-reveal>
            <div class="qm-findloc-list">
                <div class="qm-findloc-list-head">
                    <h1>{{ t_raw('geo.title') }}</h1>
                    @php $placesTotal = (int) ($restaurantsTotal ?? count($restaurants));
@endphp
                    @if ($restaurants)<span class="qm-findloc-list-count">{{ t_raw($placesTotal === 1 ? 'common.places_one' : 'common.places_many', [':n' => $placesTotal]) }}</span>@endif
                </div>
                <div class="qm-findloc-list-scroll">
                    @foreach ($restaurants as $r)
                    <a class="qm-findloc-item" href="{!! url('/restaurant/' . e($r['slug'])) !!}"{!! (isset($r['lat'], $r['lng']) && $r['lat'] !== '' && $r['lng'] !== '') ? ' data-lat="' . e((string) $r['lat']) . '" data-lng="' . e((string) $r['lng']) . '"' : '' !!}>
                        <span class="qm-findloc-item-thumb"><img src="{{ media($r['cover_image'], 'assets/client/covers/shop-1.png') }}" alt="" loading="lazy"></span>
                        <span class="qm-findloc-item-body">
                            <span class="qm-findloc-item-name">{{ $r['name'] }}</span>
                            <span class="qm-findloc-item-sub">{!! ($r['cuisine_name'] ?? '') !== '' ? e($r['cuisine_name']) : t('common.multi_cuisine') !!}{!! !empty($r['city']) ? ' &middot; ' . e($r['city']) : '' !!}</span>
                            <span class="qm-findloc-item-meta"><i class="fas fa-star" aria-hidden="true"></i> {{ number_format((float) $r['rating_cache'], 1) }} &middot; <i class="far fa-clock" aria-hidden="true"></i> {{ (int) $r['avg_prep_time'] }} {{ t_raw('common.prep_min_suffix') }}</span>
                        </span>
                        <i class="fas fa-chevron-right qm-findloc-item-arrow" aria-hidden="true"></i>
                    </a>
                    @endforeach
                    @if (!$restaurants)<p class="qm-findloc-empty">{{ t_raw('geo.empty') }}</p>@endif
                </div>
            </div>
            <div class="qm-findloc-mapwrap">
                <div class="qm-findloc-map-canvas" data-qm-map data-lat="{{ (string) $center['lat'] }}" data-lng="{{ (string) $center['lng'] }}" data-zoom="15" data-markers="{{ json_encode($mapPoints, JSON_UNESCAPED_SLASHES) }}" role="application" aria-label="{{ t_raw('geo.map_aria') }}"></div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Craving something specific? — cuisine carousel (same premium card as the homepage) -->
@php // Same rule as the homepage strip: baseline taxonomy ships with the schema, so
      // only advertise cuisines once at least one actually has a live restaurant.
@endphp
@php $geoLiveCuisines = collect($cuisines ?? [])->filter(static fn ($c): bool => (int) ($c['restaurant_count'] ?? 0) > 0)->all();
@endphp
@if ($cuisines && !$geoLiveCuisines && section_on('geo-cuisines'))
@partial('sections/band-empty', ['eyebrow' => t('home.cuisine.eyebrow'), 'title' => t('geo.cuisines_title'), 'icon' => 'fa-globe', 'msg' => t('home.empty_cuisines')])
@endif
@if ($geoLiveCuisines && section_on('geo-cuisines'))
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-carousel qm-cuisbrowse" data-carousel>
            <div class="qm-rail-head" data-reveal>
                <div>
                    <span class="qm-eyebrow">{{ t_raw('home.cuisine.eyebrow') }}</span>
                    <h2 class="qm-section-title">{{ t_raw('geo.cuisines_title') }}</h2>
                    <p class="qm-section-sub">{{ t_raw('geo.cuisines_sub') }}</p>
                </div>
                <div class="qm-rail-controls">
                    <a href="{{ route('cuisines') }}" class="qm-btn qm-btn-sm qm-btn-outline">{{ t_raw('common.view_all') }}</a>
                    @partial('sections/carousel-nav', ['prevLabel' => t_raw('home.cuisine.scroll_left_aria'), 'nextLabel' => t_raw('home.cuisine.scroll_right_aria')])
                </div>
            </div>
            <div class="qm-carousel-track qm-cuisbrowse-track" data-reveal>
                @foreach ($cuisines as $c)
                @partial('cards/cuisine-card', ['cuisine' => $c, 'dishes' => $dishMap[(int) $c['id']] ?? [], 'variant' => 'carousel'])
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

<!-- How delivery works: 3-step strip -->
@if (section_on('geo-steps'))
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-how" data-reveal>
            <div class="qm-section-head">
                <span class="qm-eyebrow">{{ t_raw('home.how.eyebrow') }}</span>
                <h2 class="qm-section-title">{{ t_raw('geo.how_title') }}</h2>
                <p class="qm-section-sub">{{ t_raw('geo.how_sub') }}</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4" data-reveal>
                    <div class="qm-how-step">
                        <span class="qm-how-num" data-step="1"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>
                        <h3>{{ t_raw('geo.how_step1_title') }}</h3>
                        <p>{{ t_raw('geo.how_step1_text') }}</p>
                    </div>
                </div>
                <div class="col-md-4" data-reveal>
                    <div class="qm-how-step">
                        <span class="qm-how-num" data-step="2"><i class="fas fa-utensils" aria-hidden="true"></i></span>
                        <h3>{{ t_raw('geo.how_step2_title') }}</h3>
                        <p>{{ t_raw('geo.how_step2_text') }}</p>
                    </div>
                </div>
                <div class="col-md-4" data-reveal>
                    <div class="qm-how-step">
                        <span class="qm-how-num" data-step="3"><i class="fas fa-motorcycle" aria-hidden="true"></i></span>
                        <h3>{{ t_raw('geo.how_step3_title') }}</h3>
                        <p>{{ t_raw('geo.how_step3_text') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Featured restaurants preview -->
@if ($featured->isNotEmpty() && section_on('geo-featured'))
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-rail-head" data-reveal>
            <div>
                <span class="qm-eyebrow">{{ t_raw('geo.featured_eyebrow') }}</span>
                <h2 class="qm-section-title">{{ t_raw('geo.featured_title') }}</h2>
                <p class="qm-section-sub">{{ t_raw('geo.featured_sub') }}</p>
            </div>
            <div class="qm-rail-controls">
                <a href="{{ route('restaurants') }}" class="qm-btn qm-btn-sm qm-btn-outline">{{ t_raw('common.view_all') }}</a>
            </div>
        </div>
        <div class="row g-4 qm-stagger">
            @foreach ($featured as $r)
            <div class="col-lg-3 col-md-6" data-reveal>@partial('cards/restaurant', ['r' => $r])</div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection