@extends('layouts.public')

@section('title', 'ALGA ARENA — The Global Esports Operating System')
@section('meta_description', 'Compete. Connect. Conquer. Join 48,000+ players, 3,200 teams, and 1,280 tournaments on the world\'s most advanced esports platform.')

@push('styles')
<!-- Cinematic stylesheet imports -->
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/cinematic-base.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/depth-system.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/reflection-system.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/hero.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/section-scenes.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/interactive-cards.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/cinematic-mobile.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/cinematic/reduced-motion.css') }}">
@endpush

@section('content')

<!-- Global Vignette Grid Layer -->
<div class="cinematic-vignette" aria-hidden="true"></div>
<div class="arena-grid-overlay" aria-hidden="true"></div>

{{-- ============================================================
     SECTION 1 — HERO CINEMATIC LOBBY
     ============================================================ --}}
<section class="landing-hero" id="arena-3d-container" aria-label="Hero Arena">
    <!-- Three.js Canvas resides here (mounted in JS) -->

    <!-- Left Content Editorial Column -->
    <div class="hero-content depth-layer-mid" data-reveal="left">
        <div class="hero-tag">
            <span class="dot" aria-hidden="true"></span>
            SEASON 01 · GLOBAL CIRCUIT LIVE
        </div>

        <h1 class="hero-headline text-white my-3">
            COMPETE.<br>
            CONNECT.<br>
            <span class="accent">CONQUER.</span>
        </h1>

        <p class="hero-desc mb-4">
            Build your esports identity, join professional teams, enter global tournaments, and create your legacy across every game.
        </p>

        <div class="hero-actions">
            <a href="/register" class="btn-arena btn-primary btn-lg" aria-label="Enter the Arena">
                <i class="bi bi-shield-lock" aria-hidden="true"></i> Enter the Arena
            </a>
            <a href="/preview/discover" class="btn-arena btn-secondary btn-lg" aria-label="Explore Tournaments">
                <i class="bi bi-compass" aria-hidden="true"></i> Explore Tournaments
            </a>
        </div>
    </div>

    <!-- Right 3D Visual Column -->
    <div class="hero-scene-wrap depth-container">
        <!-- Floating spatial statistics labels linked in depth -->
        <div class="spatial-stat-label depth-layer-front" style="top: 25%; left: 15%;" aria-hidden="true">
            🌐 48K Athletes
        </div>
        <div class="spatial-stat-label depth-layer-front" style="bottom: 30%; right: 10%;" aria-hidden="true">
            🏆 1,280 Tourneys
        </div>
        
        <!-- Three.js Arena Core Fallback Image Container -->
        <div class="depth-layer-mid reflective-stage">
            <img src="{{ asset('assets/images/cinematic/hero/arena_core.webp') }}" class="pop-out-object" alt="The Arena Core Artifact" style="max-height: 480px; width: auto; object-fit: contain;">
            <div class="floor-reflection">
                <img src="{{ asset('assets/images/cinematic/hero/arena_core.webp') }}" class="reflection-target" alt="" style="max-height: 480px; width: auto; object-fit: contain;">
            </div>
        </div>
    </div>
</section>

{{-- ============================================================
     SECTION 2 — MULTI-GAME PORTAL
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="games-portal-heading">
    <div class="container-arena depth-layer-mid">
        <div class="row align-items-center mb-5" data-reveal>
            <div class="col-md-7">
                <span class="section-eyebrow">Supported Portals</span>
                <h2 class="section-heading mt-2" id="games-portal-heading">One Platform.<br>Every Game.</h2>
            </div>
            <div class="col-md-5 text-md-end">
                <a href="/preview/games" class="btn-arena btn-ghost">Directory Gate <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>

        <div class="games-depth-grid">
            <!-- Featured portal node (Extends out of frame) -->
            <div class="featured-game-slab p-5 d-flex flex-column justify-content-between depth-container" data-game-accent="red">
                <div class="depth-layer-front" style="position: absolute; right: -20px; top: -30px;">
                    <img src="{{ asset('assets/images/cinematic/games/portal_gate.webp') }}" alt="Portal Gate 3D" style="width: 200px; object-fit: contain;">
                </div>
                <div class="depth-layer-mid">
                    <span class="badge-arena badge-red mb-3">Featured Gate</span>
                    <h3 class="display-md text-white mt-1 mb-2">{{ $games[0]['name'] }}</h3>
                    <p class="text-muted fs-sm mb-4">Lead regional operations in tactical target matches.</p>
                </div>
                <div class="d-flex justify-content-between text-muted fs-xs pt-3 mt-auto border-top" style="border-color: var(--arena-border) !important;">
                    <span>👥 {{ number_format($games[0]['players_count']) }} Players</span>
                    <span>🏆 {{ $games[0]['active_tournaments'] }} Tourneys</span>
                </div>
            </div>

            <!-- Other portal cards -->
            @foreach(array_slice($games, 1, 2) as $g)
            <div class="card-console p-4 d-flex flex-column justify-content-between h-100">
                <div>
                    <span class="badge-arena badge-muted mb-3">{{ $g['genre'] }}</span>
                    <h4 class="text-white fw-800 fs-5 mb-2">{{ $g['name'] }}</h4>
                    <p class="text-muted fs-xs">{{ number_format($g['players_count']) }} active competitors.</p>
                </div>
                <a href="/preview/games/{{ $g['id'] }}" class="btn-arena btn-ghost btn-xs w-100 text-center mt-4">Access Gate</a>
            </div>
            @endforeach
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 3 — GATEWAY: CHOOSE YOUR PATH (SPLIT-SCREEN)
     ============================================================ --}}
<section class="section-lg position-relative overflow-hidden" id="gateway-section" style="background: #030407; min-height: 700px; display: flex; align-items: center; justify-content: center; padding: var(--sp-12) 0;" aria-label="Gateway Selector">
    <div class="container-arena position-relative" style="z-index: 10;">
        
        <div class="text-center mb-5 d-lg-none">
            <span style="font-size: 0.55rem; color: var(--arena-broadcast-blue); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;">EXPLORE BOTH PATHS</span>
        </div>

        <div class="row g-4 align-items-center position-relative">
            
            <!-- Left Panel: Player Career -->
            <div class="col-lg-6 pr-lg-4">
                <div class="gateway-panel panel-left depth-container" id="playerGatewayPanel" style="height: 520px; border-radius: 24px; overflow: hidden; position: relative; border-right: 3px solid rgba(0, 212, 255, 0.35);">
                    <!-- Layer 1: Background Arena -->
                    <div class="position-absolute inset-0 panel-bg-layer" style="background: linear-gradient(135deg, rgba(5,7,12,0.95), rgba(5,7,12,0.75)), url('{{ asset('assets/images/cinematic/hero/dashboard_hero.webp') }}') no-repeat center/cover; opacity: 0.65; transform: scale(1.05);"></div>
                    
                    <!-- Layer 2: Main Subject + Interface -->
                    <div class="position-absolute inset-0 d-flex flex-column justify-content-between p-5 panel-content-layer" style="z-index: 3;">
                        <div>
                            <span class="badge-arena badge-cyan mb-2">PLAYER CAREER</span>
                            <h3 class="display-sm text-white fw-900 mt-2 mb-3">Build Your<br>Competitive Identity.</h3>
                            <p class="text-muted fs-sm mb-4" style="max-width: 380px;">Create your player profile, connect your game accounts, display your ranks, achievements, and match history.</p>
                        </div>
                        <div class="mt-auto d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-800 text-white fs-4">18,542</div>
                                <div class="text-label text-info" style="font-size: 0.6rem;">Active Players</div>
                            </div>
                            <a href="/register" class="btn-arena btn-primary btn-sm">Create Player Profile</a>
                        </div>
                    </div>

                    <!-- Layer 3: Foreground Floating badge -->
                    <div class="position-absolute panel-fg-layer" style="right: 8%; top: 25%; width: 140px; height: 180px; z-index: 5; pointer-events: none;">
                        <img src="{{ asset('assets/images/cinematic/players/player_card.webp') }}" class="pop-out-object" alt="Player Badge Core" style="width: 100%; height: 100%; object-fit: contain;">
                        <!-- Floor reflection inside the panel -->
                        <div class="position-absolute" style="bottom: -35px; left: 0; right: 0; height: 60px; opacity: 0.15; filter: blur(3px) scaleY(-1);">
                            <img src="{{ asset('assets/images/cinematic/players/player_card.webp') }}" alt="" style="width: 100%; height: 100%; object-fit: contain;">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Panel: Team Ecosystem -->
            <div class="col-lg-6 pl-lg-4">
                <div class="gateway-panel panel-right depth-container" id="teamGatewayPanel" style="height: 520px; border-radius: 24px; overflow: hidden; position: relative; border-left: 3px solid rgba(124, 92, 252, 0.35);">
                    <!-- Layer 1: Background Arena -->
                    <div class="position-absolute inset-0 panel-bg-layer" style="background: linear-gradient(135deg, rgba(5,7,12,0.95), rgba(5,7,12,0.75)), url('{{ asset('assets/images/cinematic/hero/dashboard_hero.webp') }}') no-repeat center/cover; opacity: 0.65; transform: scale(1.05); filter: hue-rotate(60deg);"></div>
                    
                    <!-- Layer 2: Main Subject + Interface -->
                    <div class="position-absolute inset-0 d-flex flex-column justify-content-between p-5 panel-content-layer" style="z-index: 3;">
                        <div>
                            <span class="badge-arena badge-violet mb-2">TEAM ECOSYSTEM</span>
                            <h3 class="display-sm text-white fw-900 mt-2 mb-3">Build a Team<br>That Becomes a Legacy.</h3>
                            <p class="text-muted fs-sm mb-4" style="max-width: 380px;">Recruit players, manage multiple game divisions, schedule scrims, and compete in global tournaments.</p>
                        </div>
                        <div class="mt-auto d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-800 text-white fs-4">2,103</div>
                                <div class="text-label text-info" style="font-size: 0.6rem;">Registered Teams</div>
                            </div>
                            <a href="/register" class="btn-arena btn-primary btn-sm">Create Your Team</a>
                        </div>
                    </div>

                    <!-- Layer 3: Foreground Floating Nodes -->
                    <div class="position-absolute panel-fg-layer" style="right: 8%; top: 25%; width: 140px; height: 180px; z-index: 5; pointer-events: none;">
                        <img src="{{ asset('assets/images/cinematic/teams/team_nodes.webp') }}" class="pop-out-object" alt="Team Nodes Core" style="width: 100%; height: 100%; object-fit: contain;">
                        <div class="position-absolute" style="bottom: -35px; left: 0; right: 0; height: 60px; opacity: 0.15; filter: blur(3px) scaleY(-1);">
                            <img src="{{ asset('assets/images/cinematic/teams/team_nodes.webp') }}" alt="" style="width: 100%; height: 100%; object-fit: contain;">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Center Animated Energy Rail (Thin gradient line) -->
            <div class="d-none d-lg-block position-absolute start-50 top-0 bottom-0 translate-middle-x" style="width: 2px; background: rgba(255,255,255,0.05); z-index: 15;">
                <div class="h-100 w-100" id="energyRailFill" style="background: linear-gradient(to bottom, var(--arena-broadcast-blue), var(--arena-violet)); transform: scaleY(0); transform-origin: top center; box-shadow: 0 0 10px var(--arena-broadcast-blue);"></div>
            </div>

            <!-- Center Control Dial -->
            <div class="d-none d-lg-flex position-absolute start-50 top-50 translate-middle" id="gatewayControlDial" style="width: 80px; height: 80px; border-radius: 50%; background: #0b0d16; border: 2px solid var(--arena-border-accent); box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), var(--shadow-lg); z-index: 20; align-items: center; justify-content: center; flex-direction: column;">
                <i class="bi bi-arrow-down-up text-info fs-5" id="dialArrow"></i>
                <span style="font-size: 0.45rem; color: var(--arena-text-muted); font-weight: 700; text-transform: uppercase; margin-top: 2px; letter-spacing: 0.05em;">PATH</span>
            </div>
            
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 5 — TOURNAMENT GLOBE
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="tournaments-heading">
    <div class="container-arena">
        <div class="row align-items-center mb-5" data-reveal>
            <div class="col-md-7">
                <span class="section-eyebrow">Championship Circuits</span>
                <h2 class="section-heading mt-2" id="tournaments-heading">Compete in<br>Global Tourneys.</h2>
            </div>
            <div class="col-md-5 text-md-end">
                <a href="/preview/tournaments" class="btn-arena btn-ghost">All Leagues <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>

        <div class="row g-4 align-items-center">
            <!-- 3D Globe Visual -->
            <div class="col-md-5 depth-layer-front reflective-stage" data-reveal="left">
                <img src="{{ asset('assets/images/cinematic/tournaments/tournament_globe.webp') }}" class="pop-out-object" alt="Championship Rings Globe" style="max-height: 380px; object-fit: contain;">
                <div class="floor-reflection">
                    <img src="{{ asset('assets/images/cinematic/tournaments/tournament_globe.webp') }}" class="reflection-target" alt="" style="max-height: 380px; object-fit: contain;">
                </div>
            </div>

            <!-- Brief Roster List -->
            <div class="col-md-7 depth-layer-mid" data-reveal="right">
                <div class="card-console p-4">
                    <span class="card-title">Featured Leagues</span>
                    <div class="d-flex flex-column gap-3 mt-3">
                        @foreach($tournaments as $t)
                        <div class="p-3 d-flex justify-content-between align-items-center" style="background: var(--arena-surface-02); border-radius: var(--r-md);">
                            <div>
                                <div class="fw-700 text-white fs-sm">{{ $t['name'] }}</div>
                                <div class="fs-xs text-muted">Prize: <span class="text-warning">${{ number_format($t['prize_pool']) }}</span></div>
                            </div>
                            <span class="badge-arena badge-green">{{ $t['status_label'] }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 6 — GLOBAL LEADERS PODIUM
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="rankings-heading">
    <div class="container-arena">
        <div class="row g-5 align-items-center">
            <!-- Left Editorial -->
            <div class="col-md-4 depth-layer-mid" data-reveal="left">
                <span class="section-eyebrow">Rankings Podiums</span>
                <h2 class="section-heading mt-2" id="rankings-heading">Claim the<br>Top Pedestal.</h2>
                <p class="section-subheading">Climb the regional ladders daily. Show your score metrics globally.</p>
                <a href="/preview/rankings" class="btn-arena btn-primary mt-4"><i class="bi bi-bar-chart"></i> Full Leaderboard</a>
            </div>

            <!-- Right 3D Podium render -->
            <div class="col-md-8 depth-layer-front" data-reveal="right">
                <div class="rankings-podium-scene reflective-stage">
                    <!-- 2nd Pedestal -->
                    <div class="podium-pedestal second">
                        <img src="{{ asset($topPlayers[1]['avatar'] ?? '') }}" alt="" style="width: 44px; height: 44px; border-radius: var(--r-full); border: 2px solid var(--arena-border);" onerror="this.style.display='none';">
                        <div class="fw-700 text-white fs-xs mt-2">{{ $topPlayers[1]['username'] ?? 'stellarx' }}</div>
                        <span class="badge-arena badge-muted mt-1" style="font-size: 0.5rem;">🥈 2ND</span>
                    </div>
                    <!-- 1st Pedestal -->
                    <div class="podium-pedestal first">
                        <div style="position: absolute; top: -30px; z-index: 12;">
                            <img src="{{ asset('assets/images/cinematic/rankings/leaderboard_podium.webp') }}" alt="Winner Emblem 3D" style="width: 70px; object-fit: contain;">
                        </div>
                        <img src="{{ asset($topPlayers[0]['avatar'] ?? '') }}" alt="" style="width: 54px; height: 54px; border-radius: var(--r-full); border: 3px solid var(--arena-border-accent);" onerror="this.style.display='none';">
                        <div class="fw-800 text-white fs-sm mt-2">{{ $topPlayers[0]['username'] ?? 'nightfalcon' }}</div>
                        <span class="badge-arena badge-accent mt-1" style="font-size: 0.55rem;">🥇 1ST</span>
                    </div>
                    <!-- 3rd Pedestal -->
                    <div class="podium-pedestal third">
                        <img src="{{ asset($topPlayers[2]['avatar'] ?? '') }}" alt="" style="width: 44px; height: 44px; border-radius: var(--r-full); border: 2px solid var(--arena-border);" onerror="this.style.display='none';">
                        <div class="fw-700 text-white fs-xs mt-2">{{ $topPlayers[2]['username'] ?? 'ironclad' }}</div>
                        <span class="badge-arena badge-muted mt-1" style="font-size: 0.5rem;">🥉 3RD</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 7 — SCRIM TACTICAL BLUEPRINTS
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="scrims-heading">
    <div class="container-arena">
        <div class="feature-row">
            <!-- Left Info -->
            <div class="depth-layer-mid" data-reveal="left">
                <span class="section-eyebrow">Tactical Blueprints</span>
                <h2 class="section-heading mt-2" id="scrims-heading">Lobby Training.<br>Scrim Matchmaking.</h2>
                <p class="section-subheading">Coordinate practice matchups against teams of similar tier, log scores, and analyze strategy vectors.</p>
                <div class="mt-4">
                    <a href="/preview/scrims" class="btn-arena btn-secondary"><i class="bi bi-sword"></i> Access Lobby</a>
                </div>
            </div>

            <!-- Right 3D Visual -->
            <div class="depth-layer-front reflective-stage" data-reveal="right">
                <img src="{{ asset('assets/images/cinematic/training/scrim_arena.webp') }}" class="pop-out-object" alt="Scrim Tactical Grid 3D" style="max-height: 380px; object-fit: contain;">
                <div class="floor-reflection">
                    <img src="{{ asset('assets/images/cinematic/training/scrim_arena.webp') }}" class="reflection-target" alt="" style="max-height: 380px; object-fit: contain;">
                </div>
            </div>
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 8 — TRANSFER TOKENS
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="transfer-heading">
    <div class="container-arena">
        <div class="feature-row reversed">
            <!-- Right 3D Visual -->
            <div class="depth-layer-front reflective-stage" data-reveal="right">
                <img src="{{ asset('assets/images/cinematic/transfers/transfer_tokens.webp') }}" class="pop-out-object" alt="Transfer Tokens 3D" style="max-height: 380px; object-fit: contain;">
                <div class="floor-reflection">
                    <img src="{{ asset('assets/images/cinematic/transfers/transfer_tokens.webp') }}" class="reflection-target" alt="" style="max-height: 380px; object-fit: contain;">
                </div>
            </div>

            <!-- Left Info -->
            <div class="depth-layer-mid" data-reveal="left">
                <span class="section-eyebrow">Talent Marketplace</span>
                <h2 class="section-heading mt-2" id="transfer-heading">Trade Athletes.<br>Sign Contracts.</h2>
                <p class="section-subheading">Settle short-term loan seals or transfer listings on the global professional market portal.</p>
                <div class="mt-4">
                    <a href="/preview/transfer-market" class="btn-arena btn-primary"><i class="bi bi-arrow-left-right"></i> Marketplace</a>
                </div>
            </div>
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 9 — SUBSCRIPTION CORES
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="pricing-heading">
    <div class="container-arena">
        <div class="text-center mb-5 depth-layer-mid">
            <span class="section-eyebrow">Subscriptions</span>
            <h2 class="section-heading mt-2" id="pricing-heading">Power Up Your Ranks.</h2>
        </div>

        <div class="row g-4 justify-content-center">
            @foreach(array_slice($subscriptions, 0, 3) as $i => $plan)
            <div class="col-md-6 col-lg-4 depth-layer-mid">
                <div class="pricing-card card-console {{ isset($plan['featured']) && $plan['featured'] ? 'featured' : '' }}">
                    @if(isset($plan['featured']) && $plan['featured'])
                    <div class="pricing-tag">Most Popular</div>
                    @endif

                    <!-- Energy Core illustration floating at top -->
                    @if($loop->index === 1)
                    <div style="display: flex; justify-content: center; margin-bottom: var(--sp-4);">
                        <img src="{{ asset('assets/images/cinematic/subscriptions/subscription_cores.webp') }}" alt="Sub Energy Core" style="width: 100px; height: 100px; object-fit: contain;">
                    </div>
                    @endif

                    <div class="pricing-tier">{{ strtoupper($plan['name']) }}</div>
                    <div class="pricing-price">
                        <span class="currency">$</span>
                        <span class="amount">{{ $plan['price_monthly'] == 0 ? '0' : $plan['price_monthly'] }}</span>
                        <span class="period">/ month</span>
                    </div>
                    <ul class="pricing-features mb-4">
                        @foreach(array_slice($plan['features'], 0, 4) as $f)
                        <li class="pricing-feature">
                            <i class="bi bi-check-circle-fill check"></i>
                            <span>{{ $f['text'] }}</span>
                        </li>
                        @endforeach
                    </ul>
                    <a href="/preview/subscriptions" class="btn-arena {{ $loop->index === 1 ? 'btn-primary' : 'btn-secondary' }} w-100">Upgrade</a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 10 — COMMUNITY NETWORK
     ============================================================ --}}
<section class="section-lg depth-container" aria-labelledby="community-heading">
    <div class="container-arena">
        <div class="feature-row">
            <!-- Left Info -->
            <div class="depth-layer-mid" data-reveal="left">
                <span class="section-eyebrow">Global Network</span>
                <h2 class="section-heading mt-2" id="community-heading">Interact with the<br>Esports Sphere.</h2>
                <p class="section-subheading">Track achievements and react to match wins in the public updates community space.</p>
                <div class="mt-4">
                    <a href="/register" class="btn-arena btn-primary">Join Network</a>
                </div>
            </div>

            <!-- Right 3D Sphere Visual -->
            <div class="depth-layer-front reflective-stage" data-reveal="right">
                <img src="{{ asset('assets/images/cinematic/community/community_sphere.webp') }}" class="pop-out-object" alt="Global Community Sphere 3D" style="max-height: 380px; object-fit: contain;">
                <div class="floor-reflection">
                    <img src="{{ asset('assets/images/cinematic/community/community_sphere.webp') }}" class="reflection-target" alt="" style="max-height: 380px; object-fit: contain;">
                </div>
            </div>
        </div>
    </div>
</section>

<hr class="arena-divider glow">

{{-- ============================================================
     SECTION 11 — FINAL CTA LOBBY
     ============================================================ --}}
<section class="section-xl depth-container" aria-labelledby="cta-heading">
    <div class="container-arena text-center depth-layer-mid">
        <span class="section-eyebrow">Assemble Core</span>
        <h2 class="section-heading display-xl my-4" id="cta-heading">Your Arena Awaits.</h2>
        <p class="text-muted fs-sm mx-auto mb-5" style="max-width: 480px;">Join 48K competitors from 47 countries. Climb the rankings and build your legacy now.</p>
        <div class="d-flex gap-3 justify-content-center">
            <a href="/register" class="btn-arena btn-primary btn-lg"><i class="bi bi-shield-lock"></i> Create Free Account</a>
            <a href="/preview/discover" class="btn-arena btn-ghost btn-lg">Explore First</a>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<!-- GSAP & ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<!-- Cinematic JS Modules -->
<script src="{{ asset('assets/js/cinematic/scene-manager.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/arena-core.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/fragment-system.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/reflective-floor.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/camera-controller.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/lighting-system.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/particle-system.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/pointer-parallax.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/section-timelines.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/quality-manager.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/asset-loader.js') }}"></script>
<script src="{{ asset('assets/js/cinematic/dispose.js') }}"></script>

<script>
// Trigger cinematic timelines & WebGL manager after fonts compile
document.fonts.ready.then(() => {
    // 1. Initial WebGL Mount
    if (typeof window.CinematicManager !== 'undefined') {
        window.CinematicManager.init('arena-3d-container');
    }

    // 2. Gateway Section GSAP Timeline Integration
    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
        gsap.registerPlugin(ScrollTrigger);

        const isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        const isMobile = window.innerWidth < 768;

        if (!isReduced) {
            // Panels entry timeline
            gsap.from("#playerGatewayPanel", {
                scrollTrigger: {
                    trigger: "#gateway-section",
                    start: "top 80%",
                    end: "bottom 20%"
                },
                x: -80,
                scale: 0.94,
                opacity: 0,
                duration: 1.2,
                ease: "power3.out"
            });

            gsap.from("#teamGatewayPanel", {
                scrollTrigger: {
                    trigger: "#gateway-section",
                    start: "top 80%",
                    end: "bottom 20%"
                },
                x: 80,
                scale: 0.94,
                opacity: 0,
                duration: 1.2,
                ease: "power3.out"
            });

            // Energy Rail Scroll Sync
            gsap.to("#energyRailFill", {
                scrollTrigger: {
                    trigger: "#gateway-section",
                    start: "top 60%",
                    end: "bottom 40%",
                    scrub: true
                },
                scaleY: 1
            });

            // Dial scroll displacement
            gsap.to("#gatewayControlDial", {
                scrollTrigger: {
                    trigger: "#gateway-section",
                    start: "top 60%",
                    end: "bottom 40%",
                    scrub: true
                },
                y: 80
            });
        }

        // Desktop Pointer Tilt & Parallax Inside Panels
        if (!isReduced && !isMobile) {
            const panels = document.querySelectorAll('.gateway-panel');
            panels.forEach(panel => {
                panel.addEventListener('mousemove', (e) => {
                    const rect = panel.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    const xc = rect.width / 2;
                    const yc = rect.height / 2;

                    const tiltX = -((y - yc) / yc) * 3;
                    const tiltY = ((x - xc) / xc) * 3;

                    panel.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateY(-6px)`;
                    
                    // Parallax shift inside the panel layers
                    const bg = panel.querySelector('.panel-bg-layer');
                    const fg = panel.querySelector('.panel-fg-layer');
                    if (bg) bg.style.transform = `translate(${(x - xc) * -0.02}px, ${(y - yc) * -0.02}px) scale(1.06)`;
                    if (fg) fg.style.transform = `translate(${(x - xc) * 0.03}px, ${(y - yc) * 0.03}px)`;
                });

                panel.addEventListener('mouseleave', () => {
                    panel.style.transform = '';
                    const bg = panel.querySelector('.panel-bg-layer');
                    const fg = panel.querySelector('.panel-fg-layer');
                    if (bg) bg.style.transform = '';
                    if (fg) fg.style.transform = '';
                });
            });
        }
    }
});
</script>
@endpush
