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

{% block content %}
<style>
.lesson8-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.lesson8-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}
.lesson8-back:hover { color: var(--accent); }

.lesson8-badges { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
.lesson8-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lesson8-tag.pratique {
    background: rgba(255, 171, 26, 0.10);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.30);
}
[data-theme="dark"] .lesson8-tag.pratique { color: #FFAB1A; }
.lesson8-tag.bonus {
    background: rgba(255, 171, 26, 0.12);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.45);
}
[data-theme="dark"] .lesson8-tag.bonus { color: #FFAB1A; }
.lesson8-tag.bonus::before { content: "🎁 "; }

.lesson8-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lesson8-lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.kbd-inline {
    display: inline-block;
    padding: 2px 8px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--border);
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.86rem;
}

/* Bandeau rassurant "deja installe" */
.ready-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 2rem;
    padding: 0.85rem 1rem;
    background: rgba(61, 219, 114, 0.08);
    border: 1px solid rgba(61, 219, 114, 0.25);
    border-radius: 10px;
    color: var(--text);
    line-height: 1.55;
    font-size: 0.94rem;
}
.ready-banner-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(61, 219, 114, 0.25);
    color: #166534;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
[data-theme="dark"] .ready-banner-icon { color: #6ee7b7; }

/* Fiche connecteur */
.fiche {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fiche-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.3rem;
}
.fiche-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-light);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.fiche-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.25;
}
.fiche-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}
.fiche-desc {
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0.8rem 0 1rem;
}

.fiche-actions-title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0.5rem 0 0.5rem;
}
.actions-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.85rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}
@media (max-width: 640px) { .actions-list { grid-template-columns: 1fr; } }
.actions-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.45;
}
.actions-list li::before {
    content: "•";
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: -1px;
}

/* Bloc "Essayez" : prompts a tester */
.try-block {
    background: var(--accent-light);
    border: 1px solid rgba(26, 143, 255, 0.20);
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
    padding: 0.9rem 1.1rem 1rem;
    margin-top: 0.5rem;
}
.try-head {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.try-head .kbd-inline { font-size: 0.82rem; }
.try-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.try-list li {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.45;
    font-style: italic;
}
.try-list li::before {
    content: "« ";
    color: var(--accent);
    font-weight: 700;
    font-style: normal;
}
.try-list li::after {
    content: " »";
    color: var(--accent);
    font-weight: 700;
    font-style: normal;
}

.setup-note {
    margin: 1.5rem 0 0;
    padding: 0.8rem 1rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.55;
}
.setup-note::before { content: "⚙ "; }

.lesson8-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.btn-l {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.94rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-l-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-l-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-l-secondary { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-l-secondary:hover { background: var(--bg-hover); color: var(--text); }
</style>

<div class="lesson8-wrap">
    <a class="lesson8-back" href="/v3/academy">← Retour au menu Académie</a>

    <div class="lesson8-badges">
        <span class="lesson8-tag pratique">Pratique</span>
        <span class="lesson8-tag bonus">Bonus</span>
    </div>

    <h1 class="lesson8-title">Les deux connecteurs intégrés à Vicsia</h1>
    <p class="lesson8-lead">
        Vicsia arrive avec deux connecteurs déjà branchés : <strong>Système</strong> (pour piloter
        votre Mac/PC) et <strong>Studio</strong> (pour créer des agents par la voix).
        Les deux s'utilisent simplement avec <span class="kbd-inline">Ctrl + G</span> — l'IA route
        votre demande vers le bon connecteur selon ce que vous dites.
    </p>

    <div class="ready-banner">
        <span class="ready-banner-icon">✓</span>
        <div>
            <strong>Rien à installer.</strong> Les deux connecteurs sont activés par défaut et déjà
            reliés à leurs agents (« Système » et le groupe « Studio »). Vous pouvez les essayer
            tout de suite, sans passer par les paramétrages.
        </div>
    </div>

    <!-- ─── Fiche Système ───────────────────────────────────────── -->
    <div class="fiche">
        <div class="fiche-head">
            <span class="fiche-icon">🖥</span>
            <div>
                <h2 class="fiche-title">Connecteur Système</h2>
                <p class="fiche-subtitle">Piloter votre Mac ou PC par la voix</p>
            </div>
        </div>

        <p class="fiche-desc">
            Donne à Vicsia un accès direct à votre ordinateur : ouvrir une application, un fichier,
            un site, un panneau de réglages, ou consulter l'état de la machine.
            Aucun copier-coller, aucun clic — juste la voix.
        </p>

        <p class="fiche-actions-title">Ce qu'il sait faire</p>
        <ul class="actions-list">
            <li>Ouvrir une <strong>application</strong> par son nom (même approximatif)</li>
            <li>Ouvrir un <strong>fichier</strong>, un <strong>dossier</strong> ou un <strong>site web</strong></li>
            <li>Ouvrir un <strong>panneau Réglages</strong> précis (micro, wifi, bluetooth…)</li>
            <li>Vérifier la <strong>batterie</strong>, le <strong>wifi</strong> ou l'état du <strong>micro</strong></li>
        </ul>

        <div class="try-block">
            <p class="try-head">🎤 Essayez avec <span class="kbd-inline">Ctrl + G</span></p>
            <ul class="try-list">
                <li>ouvre Chrome</li>
                <li>ouvre mon dossier Documents</li>
                <li>ouvre les réglages du micro</li>
                <li>il me reste combien de batterie ?</li>
            </ul>
        </div>
    </div>

    <!-- ─── Fiche Studio ────────────────────────────────────────── -->
    <div class="fiche">
        <div class="fiche-head">
            <span class="fiche-icon">🛠</span>
            <div>
                <h2 class="fiche-title">Connecteur Studio</h2>
                <p class="fiche-subtitle">Créer un nouvel agent juste en le décrivant</p>
            </div>
        </div>

        <p class="fiche-desc">
            Permet à Vicsia de fabriquer un <strong>nouvel agent</strong> à partir d'une simple phrase.
            Vous décrivez ce que vous voulez (« un agent qui résume mes mails »), Vicsia choisit
            un nom, écrit le prompt, et l'agent apparaît dans votre liste. Vous pouvez ensuite
            le retoucher depuis la page Agents.
        </p>

        <p class="fiche-actions-title">Ce qu'il sait faire</p>
        <ul class="actions-list">
            <li>Créer un <strong>nouvel agent</strong> à partir d'une intention dictée</li>
            <li>Créer un <strong>groupe</strong> qui réunit plusieurs agents</li>
            <li>Ajouter un agent existant <strong>dans un groupe</strong></li>
        </ul>

        <div class="try-block">
            <p class="try-head">🎤 Essayez avec <span class="kbd-inline">Ctrl + G</span></p>
            <ul class="try-list">
                <li>crée un agent qui résume un texte en 3 puces</li>
                <li>crée un agent qui traduit en espagnol</li>
                <li>crée un groupe Rédaction avec un agent qui reformule poliment</li>
            </ul>
        </div>

        <p class="setup-note">
            Studio crée seulement <em>la coquille</em> de l'agent. Vous pouvez ensuite affiner les
            instructions, changer le raccourci ou la sortie (popup / coller) depuis la page Agents.
            Pour aller plus loin, voir la <a href="/v3/lesson/2">Leçon 2 — Créer un agent</a>.
        </p>
    </div>

    <div class="lesson8-actions">
        <a class="btn-l btn-l-secondary" href="/v3/academy">← Menu Académie</a>
        <a class="btn-l btn-l-primary" href="/v3/agents" id="lesson8-finish">J'ai testé, voir mes agents →</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    'use strict';
    const btn = document.getElementById('lesson8-finish');
    if (btn) btn.addEventListener('click', async () => {
        try { await apiFetch('/api/academy/complete/8', { method: 'POST' }); } catch (e) {}
    });
})();
</script>
{% endblock %}