@props(['stats' => []])

@php
$heroImage = file_exists(public_path('assets/images/cinematic/dashboard/hero-arena-composite.webp'))
    ? asset('assets/images/cinematic/dashboard/hero-arena-composite.webp')
    : asset('assets/images/cinematic/hero/stadium_arena_hero.webp');
@endphp

<section class="hero-scene" aria-labelledby="hero-heading" data-hero>
    <img
        class="hero-scene__bg"
        src="{{ $heroImage }}"
        alt=""
        width="1920"
        height="600"
        fetchpriority="high"
        decoding="async"
    >
    <div class="hero-scene__lights" aria-hidden="true"></div>
    <div class="hero-scene__fog" aria-hidden="true"></div>
    <div class="hero-scene__sweep" aria-hidden="true"></div>
    <div class="hero-scene__pulse" aria-hidden="true"></div>

    <div class="hero-scene__content">
        <div class="hero-scene__eyebrow">Global Esports Community</div>
        <h1 class="hero-scene__headline" id="hero-heading">
            <span class="hero-scene__headline-line hero-headline-line">Compete.</span>
            <span class="hero-scene__headline-line hero-headline-line">Climb.</span>
            <span class="hero-scene__headline-line hero-headline-line">Become Legend.</span>
        </h1>
        <p class="hero-scene__desc">
            Join thousands of players in epic battles, enter tournaments, win prizes, and build your esports legacy.
        </p>
        <div class="hero-scene__actions">
            <a href="{{ route('events.index') }}" class="btn-arena btn-primary hero-cta">Explore Events</a>
            <a href="#trailerModal" class="btn-arena btn-secondary hero-cta" data-trailer>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                Watch Trailer
            </a>
        </div>
    </div>

    <x-dashboard.stats :stats="$stats" />
</section>
