@extends('layouts.app')

@section('title', 'FranCoach - Accedi alla piattaforma')

@section('content')
    <div class="row g-4">
        <div class="col-12">
            <div class="card-francoach p-4 p-lg-5">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-4">
                    <div>
                        <span class="badge text-bg-dark mb-2">Modulo 3 &middot; Autenticazione</span>
                        <h1 class="h3 fw-bold mb-2">Benvenuto in FranCoach</h1>
                        <p class="text-secondary mb-3" style="max-width: 46rem;">
                            La piattaforma è ad accesso riservato: non esiste registrazione pubblica,
                            solo i due account già configurati (coach e atleta) possono accedere.
                        </p>
                        <a href="{{ route('login') }}" class="btn btn-primary">
                            <i class="bi bi-box-arrow-in-right me-1" aria-hidden="true"></i>Accedi
                        </a>
                    </div>
                    <div class="text-center">
                        @if (francoach_has_branding_asset('logo_francoach.webp'))
                            <img src="{{ asset('assets/images/branding/logo_francoach.webp') }}"
                                 alt="FranCoach"
                                 style="width:120px;height:120px;object-fit:contain;">
                        @else
                            <div class="avatar-fallback mx-auto" style="width:72px;height:72px;font-size:1.5rem;">FC</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="card-francoach p-3 h-100">
                <i class="bi bi-hdd-network fs-3 text-primary" aria-hidden="true"></i>
                <h2 class="h6 fw-bold mt-2 mb-1">Stack tecnico</h2>
                <p class="text-secondary small mb-0">Laravel 12, Blade, Bootstrap 5, Chart.js, MySQL 8.</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card-francoach p-3 h-100">
                <i class="bi bi-phone fs-3 text-primary" aria-hidden="true"></i>
                <h2 class="h6 fw-bold mt-2 mb-1">Responsive &amp; PWA</h2>
                <p class="text-secondary small mb-0">Layout mobile-first, installabile come app, modalità standalone.</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card-francoach p-3 h-100">
                <i class="bi bi-shield-lock fs-3 text-primary" aria-hidden="true"></i>
                <h2 class="h6 fw-bold mt-2 mb-1">Sicurezza di base</h2>
                <p class="text-secondary small mb-0">CSRF, sessioni sicure, header di protezione, storage privato.</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card-francoach p-3 h-100">
                <i class="bi bi-signpost-split fs-3 text-primary" aria-hidden="true"></i>
                <h2 class="h6 fw-bold mt-2 mb-1">Prossimo modulo</h2>
                <p class="text-secondary small mb-0">Da definire tra i moduli applicativi rimanenti (esercizi, schede, allenamenti, progressi, messaggistica, notifiche, profilo, report).</p>
            </div>
        </div>
    </div>
@endsection