@extends('layouts.app')
@section('title', 'Medalhas - GIGAX ARENA')
@section('page_title', 'Medalhas')

@section('content')
<div class="gx-medal-page">
    <section class="gx-medal-profile">
        <div>
            <span>PERFIL COMPETITIVO</span>
            <h2>{{ $user->nickname ?? $user->name ?? ('Jogador #'.$user->id) }}</h2>
            <p>As medalhas são permanentes e continuam registradas após o encerramento das temporadas.</p>
        </div>
        <a href="{{ route('gigax.xp-ranking') }}">Ver ranking de XP →</a>
    </section>

    <section class="gx-medal-grid">
        @forelse($medals as $medal)
            <article class="gx-medal-card" style="--medal-color:{{ $medal->color ?: '#24f56f' }}">
                <div class="gx-medal-icon">{{ $medal->icon ?: '🏅' }}</div>
                <div>
                    <small>{{ strtoupper($medal->competition ?: $medal->category) }}</small>
                    <h3>{{ $medal->name }}</h3>
                    <p>{{ $medal->description }}</p>
                    <span>{{ $medal->season ? 'Temporada '.$medal->season : '' }}{{ $medal->position ? ' • '.$medal->position.'º lugar' : '' }}</span>
                </div>
            </article>
        @empty
            <div class="gx-medal-empty">Este jogador ainda não conquistou medalhas.</div>
        @endforelse
    </section>
</div>
@endsection

@push('styles')
<style>
.gx-medal-page{display:grid;gap:18px}.gx-medal-profile{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#102234,#07111b)}.gx-medal-profile span{font-size:11px;letter-spacing:.16em;color:var(--green);font-weight:900}.gx-medal-profile h2{margin:5px 0}.gx-medal-profile p{margin:0;color:var(--mut)}.gx-medal-profile a{color:var(--green);font-weight:900}.gx-medal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.gx-medal-card{display:flex;gap:16px;padding:20px;border-radius:12px;border:1px solid color-mix(in srgb,var(--medal-color) 35%,transparent);background:radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--medal-color) 12%,transparent),transparent 35%),#0b1723}.gx-medal-icon{font-size:46px}.gx-medal-card small{color:var(--medal-color);font-weight:900}.gx-medal-card h3{margin:5px 0}.gx-medal-card p,.gx-medal-card span{color:var(--mut);font-size:13px}.gx-medal-empty{padding:45px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--mut)}
</style>
@endpush