{# templates/features.html #}
{% extends "base.html" %}

{% block title %}{{ _("Features") }} - {{ _("BackTestingMarket") }}{% endblock %}

{% block extra_head %}
<style>
    /* ===== BASE (scoped) ===== */
.features-page{
  --btm-card:#151823; --btm-card-hover:#1b2030; --btm-highlight:#1c2538;
  --btm-text:#e6e8ef; --btm-muted:#9aa4b2; --btm-accent:#6ea8fe; --btm-star:#ffd166;
}
.features-page .page-title{ letter-spacing:.3px; }
.features-page .muted{ color:var(--btm-muted); }

/* Chips / filtros */
.features-page .toolbar .btn-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.features-page .toolbar .btn-group>.btn{ border-radius:999px!important; margin:0!important; }
.features-page .toolbar .btn{
  border-radius:999px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; /* sin transform */
}
.features-page .toolbar .btn.active{ background:var(--btm-accent); color:#0b1220; border:none; }

/* Buscador (dark by default) */
.features-page .search-input{ background:#0b0d12; border:1px solid #212636; color:var(--btm-text); }

/* Cards */
.features-page .card-btm{
  background:linear-gradient(180deg, var(--btm-card) 0%, #111522 100%);
  border:1px solid #212636; border-radius:18px; height:100%;
  transition: transform .14s ease, box-shadow .14s ease; /* no background -> sin flicker */
  backface-visibility:hidden; transform:translateZ(0); will-change:transform, box-shadow;
  color:var(--btm-text);
}
.features-page .card-btm:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.features-page .card-btm h3{ color:#f3f5fb; font-weight:700; letter-spacing:.2px; }
.features-page .card-btm p{ color:#f3f5fb; }
.features-page .card-btm.highlight{ border:1px solid var(--btm-accent); background:var(--btm-highlight); position:relative; }
.features-page .card-btm.highlight::before{ content:"\2605"; position:absolute; top:10px; right:12px; color:var(--btm-star); font-size:1.2rem; }
.features-page .badge-gradient{
  border:1px solid #22304a; background:rgba(110,168,254,.12); color:#b7cffc;
  border-radius:999px; padding:.25rem .6rem; font-weight:600;
}
.features-page .divider{ height:1px; background:#1d2333; margin:.5rem 0 1rem; }

/* ===== LIGHT MODE OVERRIDES ===== */
body:not(.dark-mode) .features-page .card-btm{ background:#151823; }        /* sólido estable */
body:not(.dark-mode) .features-page .card-btm.highlight{ background:#1c2538; }

/* Chips legibles en light */
body:not(.dark-mode) .features-page .toolbar .btn.btn-outline-light{
  color:#111!important; border-color:rgba(0,0,0,.45)!important; background:#fff!important;
}
@media (hover:hover){
  body:not(.dark-mode) .features-page .toolbar .btn.btn-outline-light:hover:not(.active){
    background:#eef2f7!important; color:#0a0a0a!important; border-color:rgba(0,0,0,.55)!important;
    box-shadow:0 3px 10px rgba(0,0,0,.08); /* sin movimiento */
  }
}
body:not(.dark-mode) .features-page .toolbar .btn.btn-outline-light.active{
  background:var(--btm-accent)!important; color:#fff!important; border-color:transparent!important;
}
body:not(.dark-mode) .features-page .toolbar .btn.btn-outline-light:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(110,168,254,.35);
}

/* Search en light */
body:not(.dark-mode) .features-page .search-input{
  background:#fff!important; border-color:#cbd5e1!important; color:#111!important;
}
body:not(.dark-mode) .features-page .search-input::placeholder{ color:#64748b; }

/* Placeholder visible en DARK */
body.dark-mode .features-page .search-input::placeholder{
  color: var(--btm-muted) !important;   /* #9aa4b2 por tus vars */
  opacity: 1;                           /* Firefox */
}
/* Fallbacks (opcional) */
body.dark-mode .features-page .search-input::-webkit-input-placeholder{ color: var(--btm-muted) !important; }
body.dark-mode .features-page .search-input::-moz-placeholder{ color: var(--btm-muted) !important; opacity:1; }
body.dark-mode .features-page .search-input:-ms-input-placeholder{ color: var(--btm-muted) !important; }

</style>
{% endblock %}

{% block content %}
<main class="container py-5 features-page">
  <header class="mb-4 text-center">
    <h1 class="page-title h2 fw-bold">💡 {{ _("Qué hace") }} <span class="text-primary">BTM</span> {{ _("diferente") }}</h1>
  
  </header>

  <!-- Toolbar filtros -->
  <section class="toolbar d-flex flex-wrap align-items-center gap-2 mb-4">
    <div class="btn-group" role="group" aria-label="Feature filters">
      <button class="btn btn-outline-light btn-sm active" data-filter="all">{{ _("Todos") }}</button>
      <button class="btn btn-outline-light btn-sm" data-filter="metodologia">{{ _("Metodología y Datos") }}</button>
      <button class="btn btn-outline-light btn-sm" data-filter="aprendizaje">{{ _("Aprendizaje del Trader") }}</button>
      <button class="btn btn-outline-light btn-sm" data-filter="comunidad">{{ _("Comunidad") }}</button>
      <button class="btn btn-outline-light btn-sm" data-filter="tecnologia">{{ _("Tecnología y Eficiencia") }}</button>
    </div>
    <div class="ms-auto" style="min-width:260px;">
      <input id="search" type="search" class="form-control form-control-sm search-input"
             placeholder="{{ _('Buscar… (p. ej., horarios, riesgo...)') }}">
    </div>
  </section>

  <!-- Grid de cards (14) -->
  <section class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4" id="cards">

    <!-- ⭐ Entradas automáticas cada 5' -->
    <div class="col card-wrap" data-category="tecnologia"
         data-keywords="cada 5 minutos automático entradas sistemáticas ideas">
      <div class="card card-btm p-3 highlight">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-alarm"></i>
          <span class="badge-gradient">{{ _("Tecnología") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Ideas automáticas cada 5 minutos") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("A diferencia de feeds esporádicos o discrecionales, BTM actualiza y propone entradas cada 5′ de forma sistemática y continua.") }}</p>
      </div>
    </div>

    <!-- ⭐ Backtesting real -->
    <div class="col card-wrap" data-category="metodologia"
         data-keywords="backtesting horarios riesgos verificación datos históricos">
      <div class="card card-btm p-3 highlight">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-graph-up-arrow"></i>
          <span class="badge-gradient">{{ _("Metodología y Datos") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Backtesting real y medible") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Analiza resultados históricos por horario, tipo de estrategia y riesgo para validar con datos concretos.") }}</p>
      </div>
    </div>

    <!-- 3 Estrategia primero -->
    <div class="col card-wrap" data-category="metodologia"
         data-keywords="estrategia primero accionable no solo gráficos gex timing">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-bullseye"></i>
          <span class="badge-gradient">{{ _("Metodología y Datos") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Estrategia primero (no solo gráficos)") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("BTM convierte los datos en setups accionables con contexto y timing—más allá de muros call/put o gráficos de GEX.") }}</p>
      </div>
    </div>

    <!-- 4 Actualización semanal -->
    <div class="col card-wrap" data-category="metodologia"
         data-keywords="recalculo semanal métricas mejores horarios promedios">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-arrow-clockwise"></i>
          <span class="badge-gradient">{{ _("Metodología y Datos") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Actualización constante") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Cada semana recalculamos métricas, mejores horarios y promedios para adaptarnos al mercado.") }}</p>
      </div>
    </div>

    <!-- 5 Basado en datos -->
    <div class="col card-wrap" data-category="metodologia"
         data-keywords="GEX OI volumen delta neutro métricas objetivas">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-cpu"></i>
          <span class="badge-gradient">{{ _("Metodología y Datos") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Basado en datos") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Las ideas surgen de métricas objetivas (GEX, OI, Volumen, Delta Neutro), no de opiniones.") }}</p>
      </div>
    </div>

    <!-- 6 Transparencia -->
    <div class="col card-wrap" data-category="metodologia"
         data-keywords="profit drawdown win rate resultados reales transparencia">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-shield-check"></i>
          <span class="badge-gradient">{{ _("Metodología y Datos") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Transparencia total") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Cada estrategia muestra profit real, drawdown y win rate. Sin promesas: datos verificables.") }}</p>
      </div>
    </div>

    <!-- 7 Traders independientes -->
    <div class="col card-wrap" data-category="aprendizaje"
         data-keywords="independencia no copiar señales metodología propia">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-person-check"></i>
          <span class="badge-gradient">{{ _("Aprendizaje del Trader") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Formamos traders independientes") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Nada de copiar señales. La meta es desarrollar tu propia metodología con el porqué de cada entrada.") }}</p>
      </div>
    </div>

    <!-- 8 Aprendizaje constante -->
    <div class="col card-wrap" data-category="aprendizaje"
         data-keywords="comparar resultados patrones mejora">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-mortarboard"></i>
          <span class="badge-gradient">{{ _("Aprendizaje del Trader") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Aprendizaje continuo") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Las comparaciones diarias ayudan a detectar patrones y mejorar semana a semana.") }}</p>
      </div>
    </div>

    <!-- 9 Disciplina emocional -->
    <div class="col card-wrap" data-category="aprendizaje"
         data-keywords="emociones consistencia hábitos profesionales setups favorables">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-heart-pulse"></i>
          <span class="badge-gradient">{{ _("Aprendizaje del Trader") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Disciplina emocional") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Repetir setups estadísticamente favorables fortalece el control y la consistencia.") }}</p>
      </div>
    </div>

    <!-- 10 Comunidad activa -->
    <div class="col card-wrap" data-category="comunidad"
         data-keywords="whatsapp traders ideas colaboración resultados">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-people"></i>
          <span class="badge-gradient">{{ _("Comunidad") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Comunidad activa") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Un grupo de WhatsApp con traders reales compartiendo ideas, análisis y resultados.") }}</p>
      </div>
    </div>

    <!-- 11 Adaptabilidad -->
    <div class="col card-wrap" data-category="comunidad"
         data-keywords="estilo personal spx rut qqq horarios riesgo">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-sliders"></i>
          <span class="badge-gradient">{{ _("Comunidad") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Adaptabilidad") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Elige símbolo, horario y nivel de riesgo para tu estilo (SPX, RUT, QQQ, etc.).") }}</p>
      </div>
    </div>

    <!-- 12 Automatización inteligente -->
    <div class="col card-wrap" data-category="tecnologia"
         data-keywords="automatización minuto a minuto eficiencia sin alertas manuales">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-robot"></i>
          <span class="badge-gradient">{{ _("Tecnología") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("Automatización inteligente") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Las ideas se generan con datos minuto a minuto, ahorrando tiempo y foco.") }}</p>
      </div>
    </div>

    <!-- 13 De la teoría a la práctica -->
    <div class="col card-wrap" data-category="tecnologia"
         data-keywords="validación mercado real replicar backtesting">
      <div class="card card-btm p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="bi bi-box-arrow-up-right"></i>
          <span class="badge-gradient">{{ _("Tecnología") }}</span>
        </div>
        <h3 class="h5 mb-1">{{ _("De la teoría a la práctica") }}</h3>
        <div class="divider"></div>
        <p class="mb-0">{{ _("Lo que funciona en backtesting se replica en mercado real para validar su eficacia.") }}</p>
      </div>
    </div>

  </section>
</main>

{% endblock %}

{% block scripts %}
{{ super() }}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        initThemeToggle();

    });

    (function () {
        const btns = document.querySelectorAll('[data-filter]');
        const cards = document.querySelectorAll('#cards .card-wrap');

        btns.forEach(btn => btn.addEventListener('click', () => {
            btns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            const cat = btn.getAttribute('data-filter');
            cards.forEach(c => {
                const matches = (cat === 'all') || (c.dataset.category === cat);
                c.style.display = matches ? '' : 'none';
            });
        }));

        const q = document.getElementById('search');
        if (q) {
            q.addEventListener('input', e => {
                const term = e.target.value.toLowerCase().trim();
                cards.forEach(c => {
                    const text = (c.textContent + ' ' + (c.dataset.keywords || '')).toLowerCase();
                    c.style.display = text.includes(term) ? '' : 'none';
                });
            });
        }
    })();
</script>
{% endblock %}