@php
    // Deterministic scatter for the ambient dust particles (varied but stable across renders)
    // `depth` scales how far each particle drifts with the cursor — smaller = further back.
    $particles = [
        ['top' => '12%', 'left' => '18%', 'size' => 4, 'drift' => '14px, -22px', 'delay' => '0s', 'duration' => '7s', 'depth' => 0.8],
        ['top' => '22%', 'left' => '78%', 'size' => 3, 'drift' => '-10px, -18px', 'delay' => '0.6s', 'duration' => '9s', 'depth' => 0.4],
        ['top' => '68%', 'left' => '12%', 'size' => 5, 'drift' => '16px, -14px', 'delay' => '1.2s', 'duration' => '8s', 'depth' => 1],
        ['top' => '78%', 'left' => '82%', 'size' => 3, 'drift' => '-14px, -20px', 'delay' => '0.3s', 'duration' => '10s', 'depth' => 0.5],
        ['top' => '8%', 'left' => '52%', 'size' => 2, 'drift' => '8px, -16px', 'delay' => '1.8s', 'duration' => '7.5s', 'depth' => 0.3],
        ['top' => '48%', 'left' => '90%', 'size' => 4, 'drift' => '-12px, -22px', 'delay' => '0.9s', 'duration' => '8.5s', 'depth' => 0.7],
        ['top' => '85%', 'left' => '42%', 'size' => 3, 'drift' => '10px, -18px', 'delay' => '1.4s', 'duration' => '9.5s', 'depth' => 0.6],
        ['top' => '38%', 'left' => '6%', 'size' => 2, 'drift' => '12px, -12px', 'delay' => '0.2s', 'duration' => '7s', 'depth' => 0.9],
    ];

    $heroStats = \App\Models\Statistic::where('is_published', true)
        ->where('is_featured', true)
        ->orderBy('display_order')
        ->get();
    $heroStatThemes = ['blue', 'teal', 'gold'];
@endphp

<section id="hero" class="relative overflow-hidden bg-gradient-to-b from-blue-50 via-white to-white pt-32 pb-20 dark:from-ink dark:via-ink dark:to-ink lg:pt-40 lg:pb-28">
    <div class="pointer-events-none absolute -top-24 -right-24 h-96 w-96 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-secondary/10 blur-3xl dark:bg-secondary/15"></div>
    <div class="pointer-events-none absolute top-1/3 right-1/4 h-56 w-56 rounded-full bg-accent/10 blur-3xl dark:bg-accent/10"></div>

    <div class="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-16 px-6 lg:grid-cols-2">
        <div class="reveal">
            <div class="hero-eyebrow mb-6 inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">
                <span class="relative flex h-1.5 w-1.5">
                    <span class="hero-eyebrow__ring absolute"></span>
                    <span class="h-1.5 w-1.5 rounded-full bg-secondary pulse-dot"></span>
                </span>
                Now live across Kathmandu Valley
            </div>
            <h1 class="font-heading text-4xl font-extrabold leading-tight tracking-tight text-slate-900 dark:text-white sm:text-5xl lg:text-6xl">
                Nepal travels
                <span class="relative inline-block">
                    <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">on a tap.</span>
                    <svg class="hero-tap-underline" viewBox="0 0 220 16" preserveAspectRatio="none" aria-hidden="true">
                        <path d="M4 10 C 50 2, 100 14, 140 6 S 200 2, 216 8" />
                    </svg>
                </span>
            </h1>
            <p class="mt-6 max-w-lg text-lg leading-relaxed text-slate-600 dark:text-slate-400">
                Fintech turns two coins and a queue into one motion. Tap when you board.
                Tap when you get off. The fare works itself out, down to the rupee.
            </p>
            <div class="mt-8 flex flex-wrap gap-4">
                <a href="#card-types"
                   class="hero-cta-primary flex items-center gap-2 rounded-xl bg-accent px-7 py-3.5 text-sm font-semibold text-ink transition duration-300 hover:scale-105">
                    <i class="fa-solid fa-id-card"></i>
                    Get Your Card
                </a>
                <a href="#how-it-works"
                   class="hero-cta-secondary flex items-center gap-3 rounded-xl border border-slate-200 bg-white pl-3 pr-7 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition duration-300 hover:scale-105 hover:border-primary hover:text-primary dark:border-white/10 dark:bg-panel dark:text-slate-200 dark:hover:border-secondary dark:hover:text-secondary">
                    <span class="hero-cta-play">
                        <i class="fa-solid fa-play text-[9px]"></i>
                    </span>
                    See How It Works
                </a>
            </div>
            <p class="mt-3 text-xs text-slate-400 dark:text-slate-500">No app required to ride. No cash required, ever.</p>

            @if ($heroStats->isNotEmpty())
                <div class="mt-10 grid grid-cols-3 gap-3 sm:max-w-md">
                    @foreach ($heroStats as $index => $stat)
                        <div class="hero-stat-chip glow-card--{{ $heroStatThemes[$index % count($heroStatThemes)] }} p-3">
                            <div class="hero-stat-chip__icon mb-2">
                                <i class="fa-solid {{ $stat->icon }}"></i>
                            </div>
                            <p class="font-heading text-lg font-extrabold text-slate-900 dark:text-white">{{ $stat->number }}</p>
                            <p class="text-[11px] leading-tight text-slate-500 dark:text-slate-400">{{ $stat->name }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Apple-style premium card stage -->
        <div class="reveal [transition-delay:150ms]">
            <div class="apple-card-stage relative rounded-[2.5rem] p-10 shadow-2xl sm:p-14">
                <div class="apple-card-stage__glow -top-10 -left-10 h-56 w-56 bg-secondary"></div>
                <div class="apple-card-stage__glow -right-10 -bottom-10 h-64 w-64 bg-primary" style="animation-delay: -6s"></div>

                <div class="card-light-beam" style="left: 22%"></div>
                <div class="card-light-beam" style="left: 68%; animation-delay: -4.5s"></div>

                @foreach ($particles as $p)
                    <span class="particle-parallax" data-depth="{{ $p['depth'] }}" style="top: {{ $p['top'] }}; left: {{ $p['left'] }};">
                        <span class="card-particle" style="
                            width: {{ $p['size'] }}px; height: {{ $p['size'] }}px;
                            --drift-x: {{ explode(',', $p['drift'])[0] }}; --drift-y: {{ explode(',', $p['drift'])[1] }};
                            animation-delay: {{ $p['delay'] }}; animation-duration: {{ $p['duration'] }};
                        "></span>
                    </span>
                @endforeach

                <div class="apple-card-scene relative mx-auto max-w-sm sm:max-w-md">
                    <div class="card-shadow-shift">
                        <div class="card-ambient-shadow"></div>
                    </div>

                    <!-- Each layer below owns exactly one transform aspect (magnetic pull,
                         ambient float, or mouse/gyro tilt) so nothing fights for `transform`. -->
                    <div class="apple-card-magnet">
                        <div class="animate-float">
                            {{-- Same card face partial the journey section uses (and the
                                 hero-journey-bridge morphs into) — one image, three places. --}}
                            <div id="hero-card-face" class="apple-card aspect-[16/10] overflow-hidden bg-gradient-to-br from-[#123a63] via-[#0F4C81] to-[#0d6e63] text-white">
                                <div class="card-glare"></div>
                                @include('frontend.partials.home.journey-card-inner')
                            </div>
                        </div>
                    </div>

                    <!-- Floating icon badges — pushed further outward on mobile so they
                         clear the (proportionally smaller) card instead of sitting on top of it.
                         Capped under the stage's 40px mobile padding (.apple-card-stage
                         has overflow:hidden) so they don't get clipped. -->
                    <div class="absolute -top-8 -left-9 grid h-14 w-14 place-items-center rounded-2xl bg-white text-primary shadow-xl sm:-top-6 sm:-left-8">
                        <i class="fa-solid fa-bus text-xl"></i>
                    </div>
                    <div class="absolute -right-9 top-6 grid h-12 w-12 place-items-center rounded-xl bg-white text-secondary-a11y dark:text-secondary shadow-xl sm:-right-6 sm:top-8">
                        <i class="fa-solid fa-shield-halved text-lg"></i>
                    </div>
                    <div class="absolute -bottom-8 left-4 grid h-12 w-12 place-items-center rounded-xl bg-white text-accent-a11y dark:text-accent shadow-xl sm:-bottom-6 sm:left-6">
                        <i class="fa-solid fa-wallet text-lg"></i>
                    </div>
                    <div class="absolute -right-7 -bottom-9 grid h-14 w-14 place-items-center rounded-2xl bg-white text-emerald-500 shadow-xl sm:-right-4 sm:-bottom-8">
                        <i class="fa-solid fa-circle-check text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{--
    The hero card "hands off" to the journey section's card as you scroll
    between them: resources/js/hero-journey-bridge.js measures #hero-card-face
    at the moment it would scroll out of view, fades the real hero card out,
    and drives this fixed-position clone (same face partial, so it's pixel-
    identical) from that exact spot to dead center of the journey stage —
    landing exactly where #journey-card-face already sits at rest, so the
    swap back to the journey section's own card is invisible. Desktop only;
    see the reduced-motion / <1024px guard in the JS.

    #hero-journey-city-preview rides the same scroll progress, fading the
    city skyline in underneath the flying card — so the card is never seen
    flying over a blank/plain background while journey.js's own stage is
    still hidden (it stays hidden until the pin engages, to avoid a
    different bug: its card anchor peeking early via normal scroll).
--}}
<div id="hero-journey-city-preview" class="hero-journey-city-preview" aria-hidden="true">
    <img src="{{ asset('images/journey/city-skyline.svg') }}" alt="" class="journey-scene-image journey-scene-image--bottom">
</div>
<div id="hero-journey-bridge" class="hero-journey-bridge" aria-hidden="true">
    <div class="apple-card aspect-[16/10] overflow-hidden bg-gradient-to-br from-[#123a63] via-[#0F4C81] to-[#0d6e63] text-white">
        @include('frontend.partials.home.journey-card-inner')
    </div>
</div>