@extends('layouts.app')

@section('title', 'Discover Arena — Esports Universe')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>

    {{-- Hero Banner --}}
    <div class="page-hero mb-5" style="padding: 40px 0 32px; background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(0,212,255,0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 90% 50%, rgba(124,92,252,0.05) 0%, transparent 70%), var(--grid-pattern); background-size: auto, auto, 32px 32px;">
        <div class="page-hero-content">
            <div class="page-hero-inner" style="padding: 4px 8px; display:inline-block;">
                <h1 class="page-heading-pixel mb-2" style="font-size: clamp(1.5rem, 4vw, 2.5rem);">
                    Discover <span style="color:var(--arena-accent); text-shadow: 0 0 16px rgba(0,212,255,0.5);">Esports</span>
                </h1>
                <p class="page-subheading" style="font-size:0.9rem;">Explore hot games, top players, elite teams, and competitive leagues.</p>
            </div>
        </div>
    </div>

    {{-- Supported Titles (Game Universe) --}}
    <div class="mb-5">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 style="font-family:var(--font-hud); font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0,212,255,0.6); margin:0;">
                Supported Titles
                <span style="display:inline-block; width:30px; height:1px; background:linear-gradient(90deg,rgba(0,212,255,0.4),transparent); vertical-align:middle; margin-left:8px;"></span>
            </h2>
            <a href="/preview/games" style="font-family:var(--font-hud); font-size:0.75rem; color:var(--arena-accent); text-decoration:none; letter-spacing:0.04em;">
                All Games →
            </a>
        </div>
        <div class="row g-3">
            @php
            $gameIcons = [
                'valorstrike' => ['icon' => 'target', 'color' => '#FF3B57', 'glow' => 'rgba(255,59,87,0.2)'],
                'nexus-ops'   => ['icon' => 'shield', 'color' => '#7C5CFC', 'glow' => 'rgba(124,92,252,0.2)'],
                'frontline-clash' => ['icon' => 'sword', 'color' => '#FFD700', 'glow' => 'rgba(255,215,0,0.2)'],
                'strikezone'  => ['icon' => 'crosshair', 'color' => '#00D4FF', 'glow' => 'rgba(0,212,255,0.2)'],
            ];
            $svgPaths = [
                'target' => '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
                'shield' => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
                'sword'  => '<path d="M14.5 17.5L3 6V3h3l11.5 11.5"/><path d="M13 19l6-6"/><path d="M2 2l20 20"/><path d="M3 21l3-3"/><path d="M19 5l3-3"/>',
                'crosshair' => '<circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/>',
            ];
            @endphp
            @foreach($games as $game)
            @php
                $gi = $gameIcons[$game['id']] ?? ['icon' => 'crosshair', 'color' => '#00D4FF', 'glow' => 'rgba(0,212,255,0.15)'];
                $svgP = $svgPaths[$gi['icon']] ?? $svgPaths['crosshair'];
            @endphp
            <div class="col-6 col-md-3">
                <a href="/preview/games/{{ $game['id'] }}" class="card-arena text-decoration-none d-block overflow-hidden position-relative"
                   style="border-top-color: {{ $gi['color'] }}40; transition: all 220ms ease;"
                   onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 0 rgba(0,0,0,0.35), 0 20px 48px rgba(0,0,0,0.65), 0 0 30px {{ $gi['glow'] }}';"
                   onmouseout="this.style.transform=''; this.style.boxShadow='';">

                    {{-- Background gradient --}}
                    <div style="height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, {{ $gi['glow'] }} 0%, transparent 60%), var(--arena-surface-02); position:relative; overflow:hidden;">
                        {{-- Grid overlay --}}
                        <div style="position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 21px);"></div>
                        {{-- Game Icon SVG --}}
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="{{ $gi['color'] }}" stroke-width="1.5"
                             style="filter: drop-shadow(0 0 8px {{ $gi['glow'] }}); position:relative; z-index:1;">
                            {!! $svgP !!}
                        </svg>
                    </div>

                    <div class="p-3">
                        <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.88rem; margin-bottom:4px;">{{ $game['name'] }}</div>
                        <div style="font-family:var(--font-hud); font-size:0.68rem; color:var(--arena-text-muted); letter-spacing:0.04em;">
                            <span style="color:{{ $gi['color'] }}; text-shadow: 0 0 6px {{ $gi['glow'] }};">{{ number_format($game['players_count']) }}</span> Players Active
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Players & Teams Discovery --}}
    <div class="row g-4">
        {{-- Top Players --}}
        <div class="col-md-6">
            <div class="card-arena">
                <div class="card-header">
                    <span class="card-title">Rising Players</span>
                    <a href="/preview/players" style="font-family:var(--font-hud); font-size:0.72rem; color:var(--arena-accent); text-decoration:none; letter-spacing:0.04em;">See All →</a>
                </div>
                <div class="p-3 d-flex flex-column gap-2">
                    @foreach(array_slice($players, 0, 5) as $i => $p)
                    <div class="d-flex align-items-center justify-content-between p-3"
                         style="background: rgba(15,17,23,0.8); border-radius: 6px; border: 1px solid rgba(0,212,255,0.08); transition: all 140ms ease;"
                         onmouseover="this.style.background='rgba(0,212,255,0.04)'; this.style.borderColor='rgba(0,212,255,0.2)';"
                         onmouseout="this.style.background='rgba(15,17,23,0.8)'; this.style.borderColor='rgba(0,212,255,0.08)';">
                        <div class="d-flex align-items-center gap-3">
                            <span style="font-family:var(--font-pixel); font-size:0.7rem; color:var(--arena-text-muted); width:16px; text-align:center;">{{ $i + 1 }}</span>
                            <img src="{{ asset($p['avatar']) }}" alt="{{ $p['username'] }}"
                                 style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(0,212,255,0.3); box-shadow: 0 0 8px rgba(0,212,255,0.15);"
                                 onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22><rect width=%2236%22 height=%2236%22 rx=%2218%22 fill=%22%221D2030%22/></svg>'">
                            <div>
                                <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.82rem;">{{ $p['username'] }}</div>
                                <div style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted);">{{ $p['flag'] }} {{ $p['country_name'] }}</div>
                            </div>
                        </div>
                        <a href="/preview/players/{{ $p['slug'] }}" class="btn-arena btn-ghost btn-xs">View</a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Top Teams --}}
        <div class="col-md-6">
            <div class="card-arena card-violet">
                <div class="card-header" style="background:linear-gradient(180deg,rgba(124,92,252,0.05),transparent);">
                    <span class="card-title" style="color:var(--arena-violet);">Top Organizations</span>
                    <a href="/preview/teams" style="font-family:var(--font-hud); font-size:0.72rem; color:var(--arena-violet); text-decoration:none; letter-spacing:0.04em;">See All →</a>
                </div>
                <div class="p-3 d-flex flex-column gap-2">
                    @foreach(array_slice($teams, 0, 5) as $i => $t)
                    <div class="d-flex align-items-center justify-content-between p-3"
                         style="background: rgba(15,17,23,0.8); border-radius: 6px; border: 1px solid rgba(124,92,252,0.1); transition: all 140ms ease;"
                         onmouseover="this.style.background='rgba(124,92,252,0.05)'; this.style.borderColor='rgba(124,92,252,0.25)';"
                         onmouseout="this.style.background='rgba(15,17,23,0.8)'; this.style.borderColor='rgba(124,92,252,0.1)';">
                        <div class="d-flex align-items-center gap-3">
                            <span style="font-family:var(--font-pixel); font-size:0.7rem; color:var(--arena-text-muted); width:16px; text-align:center;">{{ $i + 1 }}</span>
                            <img src="{{ asset($t['logo']) }}" alt="{{ $t['name'] }}"
                                 style="width: 36px; height: 36px; border-radius: 6px; object-fit: contain; background: rgba(15,17,23,0.9); padding: 4px; border: 1px solid rgba(124,92,252,0.2);"
                                 onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22><rect width=%2236%22 height=%2236%22 rx=%226%22 fill=%22%221D2030%22/></svg>'">
                            <div>
                                <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.82rem;">{{ $t['name'] }}</div>
                                <div style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted);">{{ $t['flag'] }} {{ $t['region'] }}</div>
                            </div>
                        </div>
                        <a href="/preview/teams/{{ $t['slug'] }}" class="btn-arena btn-ghost btn-xs" style="border-color:rgba(124,92,252,0.2);">View</a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
