{% extends 'layout.html' %}

{% block content %}
<section class="hero">
    <div class="hero-decor" aria-hidden="true"></div>
    <div class="hero-inner hero-split">

        <div class="hero-text">
            <h1>Apprenez à coder de A à Z</h1>
            <p class="hero-sub">Des cours gratuits et payants, structurés et concrets, pour progresser rapidement en programmation.</p>
            <div class="badge-row" aria-hidden="true">
                <span class="badge"><i class="fa-solid fa-code"></i> Logiciel, Web, Jeux Vidéos</span>
                <span class="badge"><i class="fa-solid fa-graduation-cap"></i> Pédagogie claire</span>
                <span class="badge"><i class="fa-solid fa-laptop-code"></i> Projets concrets</span>
            </div>
            <div class="button-grp hero-cta">
                <a class="button cta-primary" href="{% url 'register' %}"><i class="fa-solid fa-play"></i> Commencer gratuitement</a>
                <a class="button cta-secondary" href="{% url 'courses:list' %}"><i class="fa-solid fa-book"></i> Voir les cours</a>
            </div>
            <div class="hero-trust">
                <span><i class="fa-solid fa-check"></i> Pas de carte requise pour commencer</span>
                <span><i class="fa-solid fa-clock"></i> À votre rythme</span>
                <span><i class="fa-solid fa-certificate"></i> Accès premium en option</span>
            </div>
        </div>

        <div class="hero-visual">
            <div class="code-window">
                <div class="window-header">
                    <div class="dots">
                        <span class="dot red"></span>
                        <span class="dot yellow"></span>
                        <span class="dot green"></span>
                    </div>
                    <span class="filename">main.py — PartirDeZero</span>
                </div>
                <div class="window-content">
                    <pre class="code-block"><code><span class="line"><span class="qn">def</span> <span class="fn">devenir_dev_autonome</span>(etudiant):</span>
<span class="line">    <span class="cm"># Objectif: Maîtriser Python & Django</span></span>
<span class="line">    motivation = <span class="kw">True</span></span>
<span class="line">    projet_concret = <span class="st">"Mon Portfolio"</span></span>
<span class="line"></span>
<span class="line">    <span class="qn">if</span> motivation <span class="ow">and</span> etudiant.<span class="fn">suit_le_cours</span>():</span>
<span class="line">        etudiant.<span class="fn">skills</span>.<span class="fn">append</span>(<span class="st">"Backend"</span>)</span>
<span class="line">        <span class="qn">return</span> <span class="st">f"Succès : {projet_concret} déployé !"</span></span>
<span class="line"></span>
<span class="line"><span class="cm"># Lancez votre carrière aujourd'hui</span></span>
<span class="line"><span class="fn">print</span>(<span class="fn">devenir_dev_autonome</span>(<span class="st">"Toi"</span>))</span></code></pre>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="features">
    <div class="feature">
        <div class="feat-ico"><i class="fa-solid fa-route"></i></div>
        <h3>Parcours guidés</h3>
        <p>Des cheminements clairs pour débuter et monter en compétence sans vous perdre.</p>
    </div>
    <div class="feature">
        <div class="feat-ico"><i class="fa-solid fa-code"></i></div>
        <h3>Pratique d'abord</h3>
        <p>Des projets concrets, des exercices et des corrections expliquées pas-à-pas.</p>
    </div>
    <div class="feature">
        <div class="feat-ico"><i class="fa-solid fa-people-group"></i></div>
        <h3>Communauté</h3>
        <p>Posez vos questions et obtenez de l'aide de la communauté et de l'auteur.</p>
    </div>
</section>

<section class="pricing-section">
    <div class="pricing-header">
        <h2>Commencez gratuitement, passez Pro quand vous êtes prêt</h2>
        <p>Pas de surprise, pas de carte cachée.</p>
    </div>

    <div class="pricing-grid">
        <div class="plan-card free">
            <div class="plan-header">
                <h3>Découverte</h3>
                <div class="price">0€</div>
                <p>Pour tester la pédagogie</p>
            </div>
            <ul class="plan-features">
                <li><i class="fa-solid fa-check"></i> Cours d'introduction complets</li>
                <li><i class="fa-solid fa-check"></i> Accès au code source de base</li>
                <li><i class="fa-solid fa-check"></i> Accès à la communauté</li>
            </ul>
            <a class="button cta-secondary full-width" href="{% url 'register' %}">Créer un compte gratuit</a>
        </div>

        <div class="plan-card premium">
            <div class="badge-popular">Recommandé</div>
            <div class="plan-header">
                <h3>Premium</h3>
                <div class="price">À la carte</div> <p>Pour devenir autonome</p>
            </div>
            <ul class="plan-features">
                <li><i class="fa-solid fa-check"></i> <strong>Tous les avantages gratuits</strong></li>
                <li><i class="fa-solid fa-check"></i> Projets complexes de A à Z</li>
                <li><i class="fa-solid fa-check"></i> Corrections détaillées en vidéo</li>
                <li><i class="fa-solid fa-check"></i> Certificat de réussite</li>
                <li><i class="fa-solid fa-check"></i> Mises à jour à vie</li>
            </ul>
            <a class="button cta-primary full-width" href="{% url 'courses:list' %}">Voir les cours Premium</a>
        </div>
    </div>
</section>

<section class="carousel" aria-label="Cours en vedette">
    <h2>Cours en vedette</h2>
    <div class="carousel-track" role="list">
        {% for course in courses|slice:":6" %}
        <a class="carousel-item card" href="{% url 'courses:show' course.id course.name|slugify %}" role="listitem">
            <div class="ratio-16x9">
                <img src="{{ course.thumbnail.url }}" alt="{{ course.name }}" loading="lazy">
            </div>
            <div class="card-body">
                <h3>{{ course.name }}</h3>
            </div>
        </a>
        {% endfor %}
    </div>
    <div class="center" aria-hidden="true" style="opacity:.8; margin-top:8px;">Glissez pour parcourir →</div>
</section>

{% block course %}
    {% include "courses/partials/list.html" %}
{% endblock %}

<section class="testimonials">
    <h2>Ils progressent avec Partir de zéro</h2>
    <div class="testimonials-grid">
        <div class="testimonial">
            <blockquote>
                <p>Des cours clairs et progressifs. J’ai enfin compris Django et j’ai lancé mon premier projet.</p>
            </blockquote>
            <div class="who">Alexandre — Débutant devenu autonome</div>
        </div>
        <div class="testimonial">
            <blockquote>
                <p>L’approche projet et les explications pas-à-pas m’ont fait gagner des semaines.</p>
            </blockquote>
            <div class="who">Sarah — Étudiante en informatique</div>
        </div>
        <div class="testimonial">
            <blockquote>
                <p>Parfait pour reprendre les bases et aller plus loin. Le mode sombre est top 👌.</p>
            </blockquote>
            <div class="who">Yassine — Dev front-end</div>
        </div>
    </div>
</section>
{% endblock %}