{% extends "base.html" %}
{% block content %}

<section class="hero">
  <div class="hero-badge">Wellness para Traders</div>
  <h1>Menos ruido, más claridad</h1>
  <p>Entrena tu mente y tus hábitos para operar con consistencia, incluso en alta volatilidad.</p>
  <div class="hero-cta">
    <button class="btn" data-scroll="#dashboard">Ver dashboard</button>
    <button class="btn btn-ghost" data-scroll="#breathing">Respiración 4-7-8</button>
  </div>
</section>

<!-- Franja de 3 pilares -->
<section class="pillars-row">
  <!-- Mente -->
  <article class="pillar-card">
    <div class="pillar-header">
      <div class="pillar-icon" aria-hidden="true">🧠</div>
      <div>
        <h3>Mente</h3>
        <p class="muted">Atención, foco y gestión emocional.</p>
      </div>
    </div>
    <ul class="pillar-list">
      <li>Respiración 4–7–8 (x2 antes de operar)</li>
      <li>2’ de enfoque sin multitareas</li>
      <li>Journal emocional post-trade</li>
    </ul>
    <div class="pillar-cta">
      <a class="btn" href="/mente">Explorar Mente</a>
      <button class="btn btn-ghost" data-scroll="#dashboard">Ver dashboard</button>
    </div>
  </article>

  <!-- Cuerpo -->
  <article class="pillar-card">
    <div class="pillar-header">
      <div class="pillar-icon" aria-hidden="true">💪</div>
      <div>
        <h3>Cuerpo</h3>
        <p class="muted">Energía, ergonomía y pausas activas.</p>
      </div>
    </div>
    <ul class="pillar-list">
      <li>Agua cada 30–45 min</li>
      <li>Estiramientos cuello/lumbares</li>
      <li>Postura: monitor a la vista</li>
    </ul>
    <div class="pillar-cta">
      <a class="btn" href="/cuerpo">Explorar Cuerpo</a>
      <button class="btn btn-ghost" data-scroll="#breathing">Respiración</button>
    </div>
  </article>

  <!-- Mercados -->
  <article class="pillar-card">
    <div class="pillar-header">
      <div class="pillar-icon" aria-hidden="true">📊</div>
      <div>
        <h3>Mercados</h3>
        <p class="muted">Riesgo, disciplina y consistencia.</p>
      </div>
    </div>
    <ul class="pillar-list">
      <li>Riesgo fijo por operación y día</li>
      <li>Sesgo escrito y validado</li>
      <li>Evitar revenge trading</li>
    </ul>
    <div class="pillar-cta">
      <a class="btn" href="/mercados">Explorar Mercados</a>
      <button class="btn btn-ghost" data-scroll="#dashboard">Ver dashboard</button>
    </div>
  </article>
</section>

<section id="dashboard" class="kpis">
  <article class="kpi">
    <div class="kpi-icon" aria-hidden="true">🫁</div>
    <div class="kpi-body">
      <h3>Respiraciones hoy</h3>
      <p><span id="kpiBreaths">0</span> ciclos</p>
    </div>
  </article>
  <article class="kpi">
    <div class="kpi-icon" aria-hidden="true">🧠</div>
    <div class="kpi-body">
      <h3>Enfoque</h3>
      <p><span id="kpiFocus">72</span>% promedio</p>
    </div>
  </article>
  <article class="kpi">
    <div class="kpi-icon" aria-hidden="true">📈</div>
    <div class="kpi-body">
      <h3>Consistencia</h3>
      <p><span id="kpiConsistency">5</span> días al hilo</p>
    </div>
  </article>
  <article class="kpi">
    <div class="kpi-icon" aria-hidden="true">⏱️</div>
    <div class="kpi-body">
      <h3>Rutina Pre-market</h3>
      <p>~<span id="kpiRoutine">8</span> min</p>
    </div>
  </article>
</section>

<section class="grid">
  <!-- Card: Gráfica de Estado Mental -->
  <article class="card card-chart">
    <header class="card-head">
      <h3>Ritmo mental del día</h3>
      <p class="muted">Check-ins cada 2 horas · objetivo: estabilidad</p>
    </header>
    <canvas id="moodChart" height="110"></canvas>
  </article>

  <!-- Card: Checklist Pre-Trade -->
  <article class="card">
    <header class="card-head">
      <h3>Checklist Pre-Trade</h3>
      <p class="muted">Marca antes de tu primera operación</p>
    </header>
    <ul class="checklist" id="preChecklist">
      <li><label><input type="checkbox" data-key="sleep"> Dormí ≥ 7h</label></li>
      <li><label><input type="checkbox" data-key="plan"> Plan escrito (setup/TP/SL)</label></li>
      <li><label><input type="checkbox" data-key="bias"> Sesgo neutral confirmado</label></li>
      <li><label><input type="checkbox" data-key="risk"> Riesgo por operación definido</label></li>
    </ul>
  </article>

  <!-- Card: Respiración 4-7-8 -->
  <article class="card" id="breathing">
    <header class="card-head">
      <h3>Respiración 4-7-8</h3>
      <p class="muted">4 ciclos · activa tu sistema parasimpático</p>
    </header>

    <div class="breath-panel">
      <div class="timer-display" id="breatheDisplay">Listo</div>
      <div class="btn-row">
        <button class="btn" id="breatheStart">Iniciar</button>
        <button class="btn btn-ghost" id="breatheStop">Detener</button>
      </div>
      <small class="muted">Tip: exhala suave por la boca; si mareas, reduce duración.</small>
    </div>
  </article>

  <!-- Card: Micro-hábitos + Afirmación -->
  <article class="card">
    <header class="card-head"><h3>Micro-hábitos</h3></header>
    <ul class="bullets">
      <li>2 min de respiración antes de cada trade</li>
      <li>Check rápido de sesgo cada hora</li>
      <li>5 min lejos de la pantalla si se acelera el pulso</li>
    </ul>
    <blockquote class="quote" id="quoteBox">“El mercado premia la calma, no la prisa.”</blockquote>
    <button class="btn btn-ghost" id="refreshQuote">Nueva frase</button>
  </article>
</section>

{% endblock %}