@extends('layouts.app')
@section('title', 'Coaster World')
@push('head')
    <link rel="stylesheet" href="{{ asset('css/world-globe.css') }}?v=1.105.4">
    <script type="module" src="{{ asset('js/world-globe.js') }}?v=1.113.38"></script>
@endpush
@section('content')
<section class="hero-section world-explorer-hero">
    <div class="home-static-backdrop" aria-hidden="true"></div>
    <div class="container hero-layout explorer-layout">
        <div class="hero-copy explorer-copy">
            <span class="eyebrow hero-eyebrow"><span></span>{{ __('ui.world_eyebrow') }}</span>
            <h1 class="world-title">{{ __('ui.world_title_line1') }}<br><em>{{ __('ui.world_title_line2') }}</em></h1>
            <p class="world-lead">{{ __('ui.world_text') }}</p>
            <x-search-bar large />
            <div class="hero-actions">
                <a href="{{ route('search') }}" class="button button-primary">{{ __('ui.world_cta') }}</a>
                <a href="#discover" class="button button-ghost">{{ __('ui.world_secondary') }}</a>
            </div>
            <aside class="hero-proof" data-home-catalogue-stats aria-label="{{ __('ui.world_stats_label') }}">
                <div class="hero-proof-head">
                    <span class="hero-proof-mark" aria-hidden="true"></span>
                    <span>{{ __('ui.world_stats_title') }}</span>
                </div>
                <div class="hero-proof-grid">
                    <div class="hero-proof-stat"><strong data-count-up="{{ $stats['parks'] }}">{{ number_format($stats['parks']) }}</strong><span>{{ __('ui.stat_parks') }}</span></div>
                    <div class="hero-proof-stat"><strong data-count-up="{{ $stats['coasters'] }}">{{ number_format($stats['coasters']) }}</strong><span>{{ __('ui.stat_coasters') }}</span></div>
                    <div class="hero-proof-stat"><strong data-count-up="{{ $stats['attractions'] }}">{{ number_format($stats['attractions']) }}</strong><span>{{ __('ui.stat_attractions') }}</span></div>
                    <div class="hero-proof-stat"><strong data-count-up="{{ $stats['countries'] }}">{{ number_format($stats['countries']) }}</strong><span>{{ __('ui.stat_countries') }}</span></div>
                </div>
            </aside>
        </div>

        <div
            class="hero-world explorer-world"
            data-world-globe-3d
            data-parks='@json($globeParks)'
            data-map-url="{{ asset('data/ne_110m_admin_0_countries.geojson') }}"
            data-three-url="{{ asset('vendor/three/three.module.js') }}"
            data-orbit-controls-url="{{ asset('vendor/three/addons/controls/OrbitControls.js') }}"
            data-error="{{ __('ui.world_globe_error') }}"
            data-picker-count="{{ __('ui.world_globe_picker_count', ['count' => ':count']) }}"
            data-picker-count-one="{{ __('ui.world_globe_picker_count_one') }}"
            data-state-open="{{ __('ui.park_status_open_now') }}"
            data-state-opening-later="{{ __('ui.park_status_opening_later') }}"
            data-state-closed="{{ __('ui.park_status_closed_now') }}"
            data-state-unknown="{{ __('ui.park_status_unknown_now') }}"
            data-hours-label="{{ __('ui.park_opening_hours') }}"
            data-hours-unavailable="{{ __('ui.park_hours_unavailable') }}"
        >
            <div class="globe-halo" aria-hidden="true"></div>
            <canvas class="world-canvas" data-world-canvas aria-label="{{ __('ui.world_globe_label') }}"></canvas>
            <div class="world-compass" aria-hidden="true"><span>N</span><i></i><span>S</span></div>
            <div class="world-tooltip" data-world-tooltip hidden></div>
            <section class="world-park-picker" data-world-park-picker hidden role="dialog" aria-modal="false" aria-labelledby="world-park-picker-title">
                <header>
                    <div>
                        <strong id="world-park-picker-title">{{ __('ui.world_globe_picker_title') }}</strong>
                        <span data-world-park-picker-count></span>
                    </div>
                    <button type="button" data-world-park-picker-close aria-label="{{ __('ui.world_globe_picker_close') }}">×</button>
                </header>
                <div class="world-park-picker-list" data-world-park-picker-list></div>
            </section>
            <p class="world-hint">{{ __('ui.world_globe_hint') }}</p>
        </div>
    </div>
    <a class="hero-scroll" href="#discover" aria-label="{{ __('ui.world_secondary') }}"><span></span>{{ __('ui.world_scroll') }}</a>
</section>

@auth
    @if($personalPreview)
        @php
            $homeProgression = $personalPreview['progression'];
            $homeNextAdventure = $personalPreview['nextAdventure'];
            $homeNextPark = $homeNextAdventure['park'] ?? null;
            $homeNextProgress = $homeNextAdventure['progress'] ?? null;
            $homeNextHref = $homeNextPark ? route('parks.show', $homeNextPark) : route('my-world');
            if (($homeNextAdventure['type'] ?? null) === 'road_trip' && isset($homeNextAdventure['road_trip'])) {
                $homeNextHref = route('road-trips.show', $homeNextAdventure['road_trip']);
            }
        @endphp
        <section class="section home-adventure-section" aria-labelledby="home-adventure-title">
            <div class="container home-adventure-shell">
                <header class="home-adventure-head">
                    <div>
                        <span class="eyebrow">{{ __('ui.home_adventure_kicker') }}</span>
                        <h2 id="home-adventure-title">{{ __('ui.home_adventure_title') }}</h2>
                        <p>{{ __('ui.home_adventure_text') }}</p>
                    </div>
                    <a class="button button-ghost" href="{{ route('my-world') }}">{{ __('ui.home_adventure_open') }}</a>
                </header>

                <div class="home-adventure-overview">
                    <a class="home-adventure-level" href="{{ route('progression') }}" aria-label="{{ __('ui.home_adventure_level_aria', ['level' => $homeProgression['level'], 'xp' => $homeProgression['total_xp']]) }}">
                        <span class="home-adventure-level-orb">
                            <small>{{ __('ui.home_adventure_level_short') }}</small>
                            <strong>{{ $homeProgression['level'] }}</strong>
                        </span>
                        <span class="home-adventure-level-copy">
                            <small>{{ __('ui.progression_explorer_rank_'.$homeProgression['rank_key']) }}</small>
                            <strong>{{ number_format($homeProgression['total_xp'], 0, ',', ' ') }} XP</strong>
                            <progress max="100" value="{{ $homeProgression['level_percent'] }}" aria-label="{{ __('ui.progression_global_progress') }}">{{ $homeProgression['level_percent'] }}%</progress>
                            <em>{{ __('ui.home_adventure_xp_remaining', ['xp' => number_format($homeProgression['xp_remaining'], 0, ',', ' ')]) }}</em>
                        </span>
                        <b aria-hidden="true">↗</b>
                    </a>

                    <div class="home-adventure-stats" aria-label="{{ __('ui.my_world_summary') }}">
                        <div><span aria-hidden="true">◎</span><strong>{{ $personalPreview['summary']['followed_parks'] }}</strong><small>{{ __('ui.my_world_followed_parks') }}</small></div>
                        <div><span aria-hidden="true">⌁</span><strong>{{ $personalPreview['summary']['ridden_coasters'] }}</strong><small>{{ __('ui.my_world_ridden_coasters') }}</small></div>
                        <div><span aria-hidden="true">♡</span><strong>{{ $personalPreview['summary']['wishlist_items'] }}</strong><small>{{ __('ui.my_world_wishlist_items') }}</small></div>
                    </div>
                </div>

                @if($homeNextAdventure && $homeNextPark)
                    <div class="home-adventure-content">
                        <a class="home-adventure-feature {{ $homeNextAdventure['image_url'] ? 'has-image' : '' }}" href="{{ $homeNextHref }}">
                            @if($homeNextAdventure['image_url'])
                                <img src="{{ $homeNextAdventure['image_url'] }}" alt="" loading="lazy" decoding="async">
                            @endif
                            <span class="home-adventure-feature-shade" aria-hidden="true"></span>
                            <span class="home-adventure-feature-body">
                                <small class="home-adventure-feature-kicker">
                                    @if(($homeNextAdventure['type'] ?? null) === 'visit')
                                        {{ __('ui.home_adventure_next_visit') }}
                                    @elseif(($homeNextAdventure['type'] ?? null) === 'road_trip')
                                        {{ __('ui.home_adventure_next_road_trip') }}
                                    @else
                                        {{ __('ui.home_adventure_next_park') }}
                                    @endif
                                </small>
                                <strong>{{ $homeNextPark->official_name }}</strong>
                                <span class="home-adventure-feature-meta">
                                    @if(($homeNextAdventure['type'] ?? null) === 'visit' && data_get($homeNextAdventure, 'visit.status') === 'active')
                                        {{ __('ui.home_adventure_visit_active') }}
                                    @elseif($homeNextAdventure['starts_on'])
                                        {{ __('ui.home_adventure_planned_for', ['date' => $homeNextAdventure['starts_on']->locale(app()->getLocale())->translatedFormat('d M Y')]) }}
                                    @elseif($homeNextPark->city)
                                        {{ $homeNextPark->city }}
                                    @else
                                        {{ __('ui.home_adventure_next_park_hint') }}
                                    @endif
                                </span>

                                @if($homeNextProgress)
                                    @if((int) $homeNextProgress['completion_percent'] >= 100)
                                        <span class="home-adventure-completed">✓ {{ __('ui.home_adventure_completed') }}</span>
                                    @else
                                        <span class="home-adventure-progress-copy">
                                            <span>{{ __('ui.home_adventure_park_progress', ['validated' => $homeNextProgress['validated_attractions'], 'total' => $homeNextProgress['total_attractions']]) }}</span>
                                            <b>{{ $homeNextProgress['completion_percent'] }}%</b>
                                        </span>
                                        <progress max="100" value="{{ $homeNextProgress['completion_percent'] }}" aria-label="{{ __('ui.home_adventure_park_progress_aria') }}">{{ $homeNextProgress['completion_percent'] }}%</progress>
                                    @endif
                                @endif

                                <span class="home-adventure-feature-action">{{ __('ui.home_adventure_view') }} <b aria-hidden="true">→</b></span>
                            </span>
                        </a>

                        <aside class="home-adventure-continue" aria-labelledby="home-adventure-continue-title">
                            <div class="home-adventure-continue-head">
                                <div>
                                    <small>{{ __('ui.home_adventure_continue_kicker') }}</small>
                                    <h3 id="home-adventure-continue-title">{{ __('ui.home_adventure_continue_title') }}</h3>
                                </div>
                                <a href="{{ route('my-world') }}" aria-label="{{ __('ui.home_adventure_open') }}">↗</a>
                            </div>

                            @if($personalPreview['continueParks']->isNotEmpty())
                                <div class="home-adventure-continue-list">
                                    @foreach($personalPreview['continueParks'] as $homeFollowed)
                                        <a href="{{ route('parks.show', $homeFollowed['park']) }}" class="{{ $homeFollowed['completion_percent'] >= 100 ? 'is-complete' : '' }} {{ $homeFollowed['image_url'] ? 'has-image' : '' }}">
                                            @if($homeFollowed['image_url'])
                                                <img class="home-adventure-continue-image" src="{{ $homeFollowed['image_url'] }}" alt="" loading="lazy" decoding="async">
                                                <span class="home-adventure-continue-shade" aria-hidden="true"></span>
                                            @endif
                                            <span class="home-adventure-continue-score">
                                                @if($homeFollowed['completion_percent'] >= 100)
                                                    ✓
                                                @else
                                                    {{ $homeFollowed['completion_percent'] }}%
                                                @endif
                                            </span>
                                            <span class="home-adventure-continue-copy">
                                                <strong>{{ $homeFollowed['park']->official_name }}</strong>
                                                <small>
                                                    @if($homeFollowed['completion_percent'] >= 100)
                                                        {{ __('ui.home_adventure_completed') }}
                                                    @else
                                                        {{ trans_choice('ui.home_adventure_attractions_left', $homeFollowed['missing_attractions'], ['count' => $homeFollowed['missing_attractions']]) }}
                                                    @endif
                                                </small>
                                                <progress max="100" value="{{ $homeFollowed['completion_percent'] }}" aria-label="{{ __('ui.home_adventure_park_progress_aria') }}">{{ $homeFollowed['completion_percent'] }}%</progress>
                                            </span>
                                            <b aria-hidden="true">→</b>
                                        </a>
                                    @endforeach
                                </div>
                            @else
                                <div class="home-adventure-continue-empty">
                                    <span>✦</span>
                                    <p>{{ __('ui.home_adventure_continue_empty') }}</p>
                                </div>
                            @endif
                        </aside>
                    </div>
                @else
                    <div class="home-adventure-empty">
                        <span aria-hidden="true">◎</span>
                        <div>
                            <strong>{{ __('ui.home_adventure_empty_title') }}</strong>
                            <p>{{ __('ui.home_adventure_empty_text') }}</p>
                        </div>
                        <a class="button button-primary" href="{{ route('search', ['type' => 'park']) }}">{{ __('ui.home_adventure_empty_action') }}</a>
                    </div>
                @endif

                @if($personalPreview['opportunities']->isNotEmpty())
                    @php($homeOpportunity = $personalPreview['opportunities']->first())
                    @php($homeOpportunityAttraction = $homeOpportunity['attraction'])
                    <a class="home-adventure-live" data-cw-live-attraction="{{ $homeOpportunityAttraction->id }}" href="{{ $homeOpportunity['is_coaster'] ? route('coasters.show', $homeOpportunityAttraction->coaster) : route('attractions.show', $homeOpportunityAttraction) }}">
                        <span><i></i>{{ __('ui.my_world_live_now') }}</span>
                        <strong>{{ $homeOpportunityAttraction->official_name }}</strong>
                        <x-ride-queue-badges :attraction="$homeOpportunityAttraction" size="compact" class="home-queue-badges" />
                        <small>{{ $homeOpportunity['park']->official_name }} · <span data-cw-live-wait-text>{{ __('ui.wait_minutes', ['minutes' => $homeOpportunity['wait_minutes']]) }}</span></small>
                        <b aria-hidden="true">↗</b>
                    </a>
                @endif
            </div>
        </section>
    @endif
@endauth

<section id="discover" class="section discover-hub-section discover-park-card-section">
    <div class="container">
        <div class="section-heading discover-heading discover-heading-cards">
            <div>
                <span class="eyebrow">World Explorer</span>
                <h2>{{ __('ui.discover_parks_title') }}</h2>
                <p>{{ __('ui.discover_parks_visual_text') }}</p>
            </div>
            <div class="discover-heading-actions">
                <button type="button" class="discover-shuffle-button" data-discover-shuffle>
                    <span aria-hidden="true">↻</span>
                    <span>{{ __('ui.discover_shuffle') }}</span>
                </button>
                <a href="{{ route('search', ['type' => 'park']) }}" class="text-link">{{ __('ui.discover_all') }} →</a>
            </div>
        </div>

        <div
            id="discover-park-deck"
            class="discover-park-cards"
            data-discover-park-deck
            data-url="{{ url('/api/v1/discovery/home-parks') }}"
            data-status-open="{{ __('ui.park_status_open_now') }}"
            data-status-opening="{{ __('ui.park_status_opening_later') }}"
            data-status-closed="{{ __('ui.park_status_closed_now') }}"
            data-status-unknown="{{ __('ui.park_status_unknown_now') }}"
            data-hours-label="{{ __('ui.park_opening_hours') }}"
            data-hours-unavailable="{{ __('ui.park_hours_unavailable') }}"
            data-coasters-label="{{ __('ui.park_coasters') }}"
            data-attractions-label="{{ __('ui.park_attractions') }}"
        >
            @foreach($featuredParks->take(4) as $park)
                <a class="discover-park-card" href="{{ route('parks.show', $park) }}" data-discover-park-card data-park-id="{{ $park->id }}">
                    <span class="discover-park-visual has-placeholder">
                        <span class="discover-park-placeholder" aria-hidden="true">CW</span>
                        <span class="discover-park-image-shade" aria-hidden="true"></span>
                        <span class="discover-park-status is-unknown"><i aria-hidden="true"></i>{{ __('ui.park_status_unknown_now') }}</span>
                    </span>
                    <span class="discover-park-body">
                        <span class="discover-park-intro">
                            <span>
                                @if($park->city || $park->country?->official_name)
                                    <small>
                                        @if($park->city){{ $park->city }}@if($park->country?->official_name) · @endif @endif
                                        @if($park->country?->official_name)
                                            <x-country-label :code="$park->country?->iso2" :name="$park->country?->official_name" size="small" />
                                        @endif
                                    </small>
                                @endif
                                <strong>{{ $park->official_name }}</strong>
                            </span>
                            <b aria-hidden="true">↗</b>
                        </span>
                        <span class="discover-park-hours">
                            <small>{{ __('ui.park_opening_hours') }}</small>
                            <strong>{{ __('ui.park_hours_unavailable') }}</strong>
                        </span>
                    </span>
                </a>
            @endforeach
        </div>

        @if($featuredParks->isEmpty())
            <div class="discover-empty">
                <strong>{{ __('ui.empty_parks_title') }}</strong>
                <span>{{ __('ui.empty_parks_text') }}</span>
            </div>
        @endif
    </div>
</section>

<section class="section section-soft nearby-discovery-section">
    <div class="container nearby-discovery-layout" data-nearby-discovery data-url="{{ url('/api/v1/discovery/nearby-parks') }}" data-error="{{ __('ui.nearby_error') }}" data-empty="{{ __('ui.nearby_empty') }}">
        <div class="nearby-copy">
            <span class="eyebrow">Nearby Explorer</span>
            <h2>{{ __('ui.nearby_title') }}</h2>
            <p>{{ __('ui.nearby_text') }}</p>
            <button class="button button-primary" type="button" data-nearby-trigger>{{ __('ui.nearby_button') }}</button>
            <small>{{ __('ui.nearby_privacy') }}</small>
        </div>
        <div class="nearby-results" data-nearby-results>
            <div class="nearby-radar" aria-hidden="true"><i></i><i></i><i></i><span></span></div>
            <p>{{ __('ui.nearby_initial') }}</p>
        </div>
    </div>
</section>
@endsection