{% extends 'nutrition/base.html' %}

{% block content %}
<div class="hero-section text-center">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3">
            <i class="bi bi-heart-pulse-fill"></i> Carb Cycling App
        </h1>
        <p class="lead mb-4">Perdez du gras sans vous priver avec la méthode Papa In Shape</p>
        {% if user.is_authenticated %}
        <a href="{% url 'tableau_de_bord' %}" class="btn btn-light btn-lg">
            <i class="bi bi-calendar-week"></i> Accéder à mon tableau de bord
        </a>
        {% else %}
        <p class="text-white-50">Connectez-vous pour commencer votre suivi</p>
        {% endif %}
    </div>
</div>

<div class="container">
    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <i class="bi bi-emoji-smile feature-icon mb-3"></i>
                <h3>Sans privation</h3>
                <p>Mangez à votre faim tout en perdant du poids. Pas de frustration, pas d'effet yoyo.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <i class="bi bi-graph-up-arrow feature-icon mb-3"></i>
                <h3>Boost métabolique</h3>
                <p>Alternez les apports en glucides pour maintenir votre métabolisme actif.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center p-4">
                <i class="bi bi-lightning-charge feature-icon mb-3"></i>
                <h3>Plus d'énergie</h3>
                <p>Maximisez vos niveaux d'énergie au quotidien avec une alimentation adaptée.</p>
            </div>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-body p-5">
                    <h2 class="card-title mb-4">
                        <i class="bi bi-info-circle text-primary"></i> Comment ça fonctionne ?
                    </h2>
                    <p class="lead">Le carb-cycling consiste à alterner l'apport en glucides selon trois types de journées :</p>
                    
                    <div class="row mt-4">
                        <div class="col-md-4 mb-3">
                            <div class="alert alert-danger">
                                <h5><i class="bi bi-arrow-down-circle"></i> Jour Pauvre</h5>
                                <p class="mb-0 small">0-1 apport en glucides<br>
                                Privilégiez protéines et lipides</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="alert alert-warning">
                                <h5><i class="bi bi-dash-circle"></i> Jour Normal</h5>
                                <p class="mb-0 small">2-3 apports en glucides<br>
                                Équilibre entre les macros</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="alert alert-success">
                                <h5><i class="bi bi-arrow-up-circle"></i> Jour Riche</h5>
                                <p class="mb-0 small">4-5 apports en glucides<br>
                                Rechargez vos batteries!</p>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h4 class="mb-3">
                        <i class="bi bi-star text-warning"></i> Pourquoi ça marche ?
                    </h4>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Maintient la production de leptine (hormone brûle-graisse)</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Évite le ralentissement du métabolisme</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Pas de sensation de faim constante</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Résultats durables sans effet yoyo</li>
                    </ul>

                    <div class="text-center mt-4">
                        <a href="{% url 'guide' %}" class="btn btn-primary btn-lg">
                            <i class="bi bi-book"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
