{% extends 'base.html.twig' %}

{% block title %}Accueil - Badge Psy{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .hero-section {
            background: #003482;
            color: white;
            padding: 4rem 0;
            text-align: center;
        }

        /* Container pour les cartes */
        .features-container {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 2rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 2.5rem 1.5rem;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            flex: 1;
            min-width: 280px;
            text-align: center;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 52, 130, 0.2);
        }

        .feature-card i {
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-radius: 50%;
            background: #003482E5;
            color: white;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem auto;
        }

        .feature-card h4 {
            color: #333;
            margin-bottom: 1rem;
            font-weight: 600;
            font-size: 1.3rem;
        }

        .btn-primary {
            background: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 25px;
            color: #003482;
            text-decoration: none;
            display: inline-block;
            margin: 1rem;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 52, 130, 0.3);
            text-decoration: none;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .features-container {
                flex-direction: column;
                gap: 1.5rem;
            }

            .feature-card {
                min-width: 100%;
            }
        }

        @media (max-width: 992px) and (min-width: 769px) {
            .features-container {
                gap: 1rem;
            }

            .feature-card {
                min-width: 250px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="hero-section">
        <div class="container">
            <h1 class="display-4 mb-4">
                <i class="fas fa-brain"></i> Badge Psy
            </h1>
            <p class="lead mb-4">Plateforme de suivi de progression pour les apprenants</p>

            {% if app.user %}
                <div class="alert alert-light" style="background: rgba(255,255,255,0.9); color: #333;">
                    <h4>👋 Bonjour {{ app.user.prenom }} {{ app.user.nom }} !</h4>
                    <p>Vous êtes connecté en tant que :
                        {% if is_granted('ROLE_ADMIN') %}
                            <strong>Administrateur</strong>
                        {% elseif is_granted('ROLE_FORMATEUR') %}
                            <strong>Formateur</strong>
                        {% else %}
                            <strong>Utilisateur</strong>
                        {% endif %}
                    </p>
                </div>

                {% if is_granted('ROLE_ADMIN') %}
                    <a href="{{ path('admin') }}" class="btn-primary">
                        <i class="fas fa-cog"></i> Administration
                    </a>
                {% endif %}

                {% if is_granted('ROLE_FORMATEUR') %}
                    <a href="{{ path('app_formateur') }}" class="btn-primary">
                        <i class="fas fa-chalkboard-teacher"></i> Dashboard Formateur
                    </a>
                {% endif %}

                <a href="{{ path('app_logout', {'_csrf_token': csrf_token('logout')}) }}" class="btn-primary" style="background: #dc3545;">
                    <i class="fas fa-sign-out-alt"></i> Se déconnecter
                </a>
            {% else %}
                <a href="{{ path('app_login') }}" class="btn-primary">
                    <i class="fas fa-sign-in-alt"></i> Se connecter
                </a>
            {% endif %}
        </div>
    </div>

    <div class="container my-5">
        <div class="features-container">
            <div class="feature-card">
                <i class="fas fa-graduation-cap fa-2x"></i>
                <h4>Suivi des apprenants</h4>
            </div>

            <div class="feature-card">
                <i class="fas fa-chart-line fa-2x"></i>
                <h4>Analyse des compétences</h4>
            </div>

            <div class="feature-card">
                <i class="fas fa-certificate fa-2x"></i>
                <h4>Badges de réussite</h4>
            </div>
        </div>
    </div>
{% endblock %}