{% extends "v3/base.html" %}

{% block content %}
<style>
.hub-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.hub-header {
    margin-bottom: 2.5rem;
}
.hub-eyebrow {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.hub-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.hub-lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 680px;
}
.hub-progress {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.hub-progress strong { color: var(--accent); }

.hub-section {
    margin-bottom: 2.5rem;
}
.hub-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.hub-section-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hub-section-tag.pratique {
    background: rgba(255, 171, 26, 0.10);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.30);
}
[data-theme="dark"] .hub-section-tag.pratique { color: #FFAB1A; }
.hub-section-tag.parametrage {
    background: rgba(26, 143, 255, 0.10);
    color: var(--accent);
    border: 1px solid rgba(26, 143, 255, 0.30);
}
.hub-section-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem 1.2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.hub-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 143, 255, 0.10);
}
.hub-card.todo { opacity: 0.65; cursor: default; }
.hub-card.todo:hover { transform: none; border-color: var(--border); box-shadow: none; }
.hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hub-card-num {
    font-family: Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.hub-card-status {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}
.hub-card-status.done {
    background: rgba(61, 219, 114, 0.10);
    color: #166534;
    border: 1px solid rgba(61, 219, 114, 0.30);
}
[data-theme="dark"] .hub-card-status.done { color: #6ee7b7; }
.hub-card-status.todo {
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.hub-card-status.soon {
    background: rgba(255, 171, 26, 0.10);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.30);
}
[data-theme="dark"] .hub-card-status.soon { color: #FFAB1A; }
.hub-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}
.hub-card-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}
.hub-card-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
</style>

<div class="hub-wrap">
    <header class="hub-header">
        <div class="hub-eyebrow">Académie Vicsia</div>
        <h1 class="hub-title">Apprendre Vicsia, à votre rythme</h1>
        <p class="hub-lead">
            Deux types de leçons : les <strong>pratiques</strong> pour vous mettre les mains dedans,
            et les <strong>paramétrages</strong> pour personnaliser Vicsia à votre usage.
            Commencez par la prise en main si vous démarrez.
        </p>
        {% set done_count = progress.values()|select|list|length %}
        <p class="hub-progress">
            Progression : <strong>{{ done_count }} / {{ total }}</strong> leçon{% if done_count > 1 %}s{% endif %} terminée{% if done_count > 1 %}s{% endif %}
        </p>
    </header>

    <!-- ─── Section Pratique ───────────────────────────────────────── -->
    <section class="hub-section">
        <h2 class="hub-section-title">
            <span>Pratique</span>
            <span class="hub-section-tag pratique">Hands-on</span>
        </h2>
        <p class="hub-section-sub">Les leçons où vous testez réellement Vicsia, avec votre voix et votre clavier.</p>

        <div class="hub-grid">
            <a class="hub-card" href="/v3/lesson/1">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 1</span>
                    {% if progress.get(1) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status todo">À faire</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Prise en main</h3>
                <p class="hub-card-desc">Découvrir la capsule, faire votre première dictée, et apprendre <strong>Ctrl + G</strong> pour parler à l'IA.</p>
                <span class="hub-card-meta">5 slides · ~5 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/7">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 7 · Bonus</span>
                    {% if progress.get(7) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status todo">À faire</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Agents sans commande vocale</h3>
                <p class="hub-card-desc">Travailler sur le texte que vous sélectionnez à la souris — corriger, traduire, résumer, reformuler.</p>
                <span class="hub-card-meta">~3 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/8">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 8 · Bonus</span>
                    {% if progress.get(8) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status todo">À faire</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Les connecteurs intégrés</h3>
                <p class="hub-card-desc">Système (piloter votre Mac/PC) et Studio (créer des agents par la voix) — déjà installés, à essayer avec <strong>Ctrl + G</strong>.</p>
                <span class="hub-card-meta">~3 min</span>
            </a>
        </div>
    </section>

    <!-- ─── Section Paramétrage ────────────────────────────────────── -->
    <section class="hub-section">
        <h2 class="hub-section-title">
            <span>Paramétrage</span>
            <span class="hub-section-tag parametrage">Personnalisation</span>
        </h2>
        <p class="hub-section-sub">Les leçons pour aller plus loin : créer vos agents, gérer les raccourcis, connecter vos outils.</p>

        <div class="hub-grid">
            <a class="hub-card" href="/v3/lesson/2">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 2</span>
                    {% if progress.get(2) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status soon">Beta</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Créer un agent</h3>
                <p class="hub-card-desc">Ajouter votre propre agent. Comprendre la différence entre sortie « coller » (texte) et « capsule » (popup).</p>
                <span class="hub-card-meta">~4 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/3">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 3</span>
                    {% if progress.get(3) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status soon">Beta</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Raccourcis Vicsia et routage</h3>
                <p class="hub-card-desc">Les raccourcis dédiés vs Ctrl+G. Comment l'IA route vos demandes vers le bon agent. Activer / désactiver.</p>
                <span class="hub-card-meta">~5 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/4">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 4</span>
                    {% if progress.get(4) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status soon">Bientôt</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Raccourcis système</h3>
                <p class="hub-card-desc">Le menu des raccourcis pratiques : coller le dernier résultat, pause, échap pour annuler.</p>
                <span class="hub-card-meta">~3 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/5">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 5</span>
                    {% if progress.get(5) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status soon">Bientôt</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Les groupes</h3>
                <p class="hub-card-desc">Réunir plusieurs agents sous un seul raccourci. L'IA choisit le bon agent selon ce que vous dites.</p>
                <span class="hub-card-meta">~4 min</span>
            </a>

            <a class="hub-card" href="/v3/lesson/6">
                <div class="hub-card-head">
                    <span class="hub-card-num">Leçon 6</span>
                    {% if progress.get(6) %}
                    <span class="hub-card-status done">✓ Terminée</span>
                    {% else %}
                    <span class="hub-card-status soon">Bientôt</span>
                    {% endif %}
                </div>
                <h3 class="hub-card-title">Connexions et permissions</h3>
                <p class="hub-card-desc">Connecter Gmail / Outlook. Donner à Vicsia les autorisations Mac/Windows dont il a besoin.</p>
                <span class="hub-card-meta">~5 min</span>
            </a>
        </div>
    </section>
</div>
{% endblock %}