@extends('layouts.tropa', ['title' => 'Tropa do FiniN | Home', 'page' => 'home'])

@section('content')
    <main class="screen screen-home">
        <section class="home-hero">
            <div class="home-brand">
                <img src="{{ asset('images/tropa-do-finin-logo.png') }}" alt="Logo Tropa do FiniN">
                <div>
                    <span class="eyebrow">Dashboard inicial</span>
                    <h1 id="home-title">Bem-vindo a Tropa do FiniN</h1>
                    <p id="home-subtitle">
                        Entre na resenha, complete seu perfil e deixe o app pronto para as proximas fases da pelada.
                    </p>
                </div>
            </div>

            <div class="hero-actions">
                <a href="{{ route('register') }}" class="primary-button" id="home-primary-action">Completar cadastro</a>
                <a href="{{ route('admin') }}" class="secondary-button">Area admin</a>
                <a href="{{ route('landing') }}" class="secondary-button">Voltar para entrada</a>
                <form method="POST" action="{{ route('logout') }}" class="logout-form">
                    @csrf
                    <button type="submit" class="ghost-button">Sair</button>
                </form>
            </div>
        </section>

        <section class="dashboard-grid">
            <article class="dashboard-card profile-card">
                <div class="profile-summary">
                    <div class="avatar-preview avatar-preview-large" id="home-avatar">TF</div>
                    <div>
                        <span class="card-label">Jogador</span>
                        <h2 id="profile-name">Perfil ainda nao cadastrado</h2>
                        <p id="profile-position">Sem posicao principal definida</p>
                    </div>
                </div>

                <div class="meta-grid">
                    <div>
                        <span class="card-label">WhatsApp</span>
                        <strong id="profile-whatsapp">Nao informado</strong>
                    </div>
                    <div>
                        <span class="card-label">E-mail</span>
                        <strong id="profile-email">Nao informado</strong>
                    </div>
                    <div>
                        <span class="card-label">Idade</span>
                        <strong id="profile-age">-</strong>
                    </div>
                    <div>
                        <span class="card-label">Fisico</span>
                        <strong id="profile-physical">-</strong>
                    </div>
                </div>
            </article>

            <article class="dashboard-card">
                <div class="card-heading">
                    <span class="card-label">Posicoes preferidas</span>
                    <h2>Ordem da sua pelada</h2>
                </div>
                <ul class="ranked-list" id="positions-summary">
                    <li>Nenhuma posicao cadastrada ainda.</li>
                </ul>
            </article>

            <article class="dashboard-card">
                <div class="card-heading">
                    <span class="card-label">Atributos</span>
                    <h2>Mapa tecnico</h2>
                </div>
                <div class="skills-summary" id="skills-summary"></div>
            </article>

            <article class="dashboard-card">
                <div class="card-heading">
                    <span class="card-label">Proximas fases</span>
                    <h2>O que vem depois</h2>
                </div>
                <div class="future-list">
                    <div>
                        <strong>Avaliacao pos-jogo</strong>
                        <p>A tropa vai poder votar para ajustar a percepcao real de cada atleta.</p>
                    </div>
                    <div>
                        <strong>Ranking automatico</strong>
                        <p>As notas vao refletir a fase do jogador dentro do grupo.</p>
                    </div>
                    <div>
                        <strong>Times equilibrados</strong>
                        <p>O app vai usar as preferencias e atributos para bater times mais justos.</p>
                    </div>
                </div>
            </article>
        </section>
    </main>
@endsection