{% extends "base.html" %}
{% block title %}Accueil · Sabaidee{% endblock %}
{% block content %}
<section class="hero">
  <div>
    <p class="eyebrow">ຂ້ອຍ好 {{ settings.learner_name }}</p>
    <h1>Ton lao, à ton rythme.</h1>
    <p class="lead">Conversation, vocabulaire, constructions, mot en laos et prononciation — tout alimente ta progression.</p>
  </div>
  <div class="ink-circle">ຮ</div>
</section>

<section class="level-card">
  <div class="level-left">
    <span class="level-label">NIVEAU ACTUEL</span>
    <div class="level">{{ progress.level }}</div>
    <div class="level-copy">{{ progress.overall }}% vers le palier suivant · niveau démontré {{ progress.demonstrated_level }}</div>
  </div>
  <div class="progress-ring" style="--p: {{ progress.overall }}">
    <div><b>{{ progress.overall }}%</b><small>progression</small></div>
  </div>
  <div class="level-meta">
    <b>{{ progress.known_count }}</b>
    <span>mots connus / maîtrisés</span>
    <small>Objectif vocabulaire {{ progress.level }} : {{ progress.target }}</small>
  </div>
</section>

<section class="stats-grid">
  <div class="stat"><span>◈</span><b>{{ stats.total }}</b><small>mots enregistrés</small></div>
  <div class="stat"><span>✓</span><b>{{ stats.mastered }}</b><small>maîtrisés</small></div>
  <div class="stat"><span>◎</span><b>{{ stats.known }}</b><small>connus</small></div>
  <div class="stat"><span>↺</span><b>{{ stats.review }}</b><small>à consolider</small></div>
</section>

<section class="two-col">
  <div class="card">
    <div class="section-head">
      <div>
        <span class="eyebrow">↗度</span>
        <h2>Progression par compétence</h2>
      </div>
    </div>

    {% for label, value, cn in [
      ('Vocabulaire', progress.vocab, '◈'),
      ('Construction', progress.grammar, '✎'),
      ('Compréhension', progress.comprehension, '◉'),
      ('Prononciation', progress.pronunciation, '♫'),
      ('Niveau démontré', progress.proficiency, '✧')
    ] %}
      <div class="skill-row">
        <span class="skill-cn">{{ cn }}</span>
        <div class="skill-main">
          <div class="skill-top"><span>{{ label }}</span><b>{{ value }}%</b></div>
          <div class="bar"><i style="width: {{ value }}%"></i></div>
        </div>
      </div>
    {% endfor %}
    <p class="tiny muted">Estimation pédagogique interne, pas une certification CECRL officielle.</p>
  </div>

  <div class="card">
    <div class="section-head">
      <div>
        <span class="eyebrow">ຝຶກ</span>
        <h2>À travailler maintenant</h2>
      </div>
      <a class="text-link" href="{{ url_for('review_page') }}">Réviser →</a>
    </div>

    <div class="trouble-list">
      {% for w in trouble %}
      <div class="trouble-item">
        <div class="hanzi">{{ w.hanzi or '·' }}</div>
        <div><b>{{ w.pinyin }}</b><small>{{ w.meaning_fr }}</small></div>
        <span class="score-pill">{{ w.mastery|round|int }}%</span>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="action-grid">
  <a class="action-card vermilion" href="{{ url_for('chat_page') }}">
    <span class="action-cn">✦话</span>
    <h3>Continuer la conversation</h3>
    <p>Parle, fais des erreurs et transforme-les directement en progression.</p>
  </a>
  <a class="action-card jade" href="{{ url_for('vocabulary_page') }}#learn">
    <span class="action-cn">增◈</span>
    <h3>Augmenter mon vocabulaire</h3>
    <p>Choisis un thème et apprends 5, 10 ou 15 nouveaux mots utiles.</p>
  </a>
</section>
{% endblock %}