{% 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>
    {% block course %}
        {% include "courses/partials/list.html" %}
    {% endblock %}

<section class="pricing-teaser">
    <h2>Gratuit pour commencer, Premium pour aller plus loin</h2>
    <ul class="ul-arrow">
        <li>Cours d'introduction gratuits</li>
        <li>Contenu premium détaillé: projets complets, corrections, téléchargements</li>
        <li>Accès à vie aux cours achetés</li>
    </ul>
    <div class="button-grp">
        <a class="button cta-primary" href="{% url 'register' %}">Créer mon compte</a>
        <a class="button cta-secondary" href="{% url 'courses:list' %}">Parcourir les cours</a>
    </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>
    <!-- Simple scroll hint -->
    <div class="center" aria-hidden="true" style="opacity:.8; margin-top:8px;">Glissez pour parcourir →</div>
    
    </section>

<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 %}