// LANDING PÚBLICA — Simulador Docente
window.LandingPage = function LandingPage({ navigate, store }) {
  const { NIVELES } = window.SD_SEED;
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const [nivelTab, setNivelTab] = React.useState('secundaria');

  return (
    <div className="landing">
      <Header navigate={navigate} session={store.session} cartCount={store.cart.length} />

      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-left">
              <div className="hero-tag">
                <span className="dot" style={{ color: 'var(--teal)' }}></span>
                Examen USICAMM · Admisión 2026-2027
              </div>
              <h1 className="hero-title">
                Aumenta tus posibilidades de <em>aprobar</em> tu examen docente.
              </h1>
              <p className="hero-sub">
                Simuladores reales con preguntas tipo USICAMM, retroalimentación detallada y reporte de bloques.
                Practica las veces que necesites. Pago único, acceso permanente.
              </p>
              <div className="row gap-3" style={{ marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => navigate('/registro')}>
                  Crear cuenta gratis
                </button>
                <button className="btn btn-ghost btn-lg" onClick={() => document.getElementById('catalogo').scrollIntoView({ behavior: 'smooth' })}>
                  Ver materias disponibles →
                </button>
              </div>
              <div className="hero-trust">
                <div className="trust-item"><strong>13</strong> simuladores disponibles</div>
                <div className="trust-divider"></div>
                <div className="trust-item"><strong>100</strong> preguntas por prueba</div>
                <div className="trust-divider"></div>
                <div className="trust-item"><strong>$149</strong> MXN por materia</div>
              </div>
            </div>

            <div className="hero-right">
              <HeroMockup />
            </div>
          </div>
        </div>
      </section>

      {/* CÓMO FUNCIONA */}
      <section className="section">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow">¿Cómo funciona?</span>
            <h2>De crear cuenta a practicar, en 4 pasos.</h2>
          </div>
          <div className="steps-grid">
            {[
              { n: '01', t: 'Crea tu cuenta', d: 'Registro con correo electrónico. Confirma tu email y listo.' },
              { n: '02', t: 'Prueba la muestra gratis', d: '10 preguntas de cada materia, sin pagar nada.' },
              { n: '03', t: 'Desbloquea el simulador completo', d: 'Pago único de $149 MXN por materia. Mercado Pago u Oxxo.' },
              { n: '04', t: 'Practica sin límite', d: 'Acceso permanente. Revisa tu reporte por bloque y mejora.' },
            ].map((s) => (
              <div className="step-card" key={s.n}>
                <div className="step-num">{s.n}</div>
                <h4>{s.t}</h4>
                <p className="muted" style={{ fontSize: 14, marginTop: 6 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MUESTRA VS COMPLETO */}
      <section className="section section-alt">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow">Muestra vs. completo</span>
            <h2>Prueba antes de pagar. Compra solo lo que necesitas.</h2>
          </div>
          <div className="compare-grid">
            <div className="compare-card">
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <h3 style={{ fontFamily: 'Inter', fontSize: 19, fontWeight: 700 }}>Simulador muestra</h3>
                <span className="pill pill-teal">Gratis</span>
              </div>
              <ul className="feature-list">
                <li>10 preguntas representativas</li>
                <li>Cronómetro y entorno real</li>
                <li>Calificación final por bloque</li>
                <li>Sin necesidad de pago</li>
              </ul>
              <div className="muted" style={{ marginTop: 18, fontSize: 13 }}>Disponible al crear cuenta gratuita.</div>
            </div>
            <div className="compare-card compare-card-premium">
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <h3 style={{ fontFamily: 'Inter', fontSize: 19, fontWeight: 700 }}>Simulador completo</h3>
                <span className="pill pill-amber">★ Premium · $149 MXN</span>
              </div>
              <ul className="feature-list">
                <li><strong>100 preguntas</strong> tipo examen real</li>
                <li>Niveles: comprensión y análisis</li>
                <li>Retroalimentación detallada por pregunta</li>
                <li>Reporte por bloque del temario USICAMM</li>
                <li>Acceso permanente · intentos ilimitados</li>
              </ul>
              <div className="muted" style={{ marginTop: 18, fontSize: 13 }}>Pago único por materia. Sin suscripción.</div>
            </div>
          </div>
        </div>
      </section>

      {/* CATÁLOGO */}
      <section className="section" id="catalogo">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow">Catálogo</span>
            <h2>Materias disponibles</h2>
            <p className="muted" style={{ marginTop: 12, fontSize: 16 }}>Kínder y primaria con examen general; secundaria por especialidad.</p>
          </div>

          <div className="nivel-tabs">
            {NIVELES.map((n) => (
              <button
                key={n.id}
                className={`nivel-tab ${nivelTab === n.id ? 'active' : ''}`}
                onClick={() => setNivelTab(n.id)}
              >
                {n.nombre}
              </button>
            ))}
          </div>

          <div className="catalogo-grid">
            {PRUEBAS.filter((p) => p.nivel === nivelTab).map((p) => (
              <MateriaCard key={p.id} prueba={p} navigate={navigate} />
            ))}
          </div>
        </div>
      </section>

      {/* PRECIOS / PAQUETES */}
      <section className="section section-dark">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow eyebrow-light">Precios</span>
            <h2 style={{ color: '#fff' }}>Pago único. Acceso permanente.</h2>
          </div>
          <div className="precio-grid">
            <div className="precio-card">
              <div className="precio-tag">Por materia</div>
              <div className="precio-num">$149<span> MXN</span></div>
              <p className="precio-desc">Una materia · acceso permanente · simulador completo + retroalimentación.</p>
              <button className="btn btn-amber btn-block" onClick={() => navigate('/registro')}>Empezar</button>
            </div>
            <div className="precio-card precio-card-feat">
              <div className="precio-tag">Más popular</div>
              <div className="precio-num">$379<span> MXN</span></div>
              <p className="precio-desc">Pack 3 materias de secundaria. Ahorras $68. Tú eliges cuáles.</p>
              <button className="btn btn-amber btn-block" onClick={() => navigate('/registro')}>Elegir 3 materias</button>
            </div>
            <div className="precio-card">
              <div className="precio-tag">Pack completo</div>
              <div className="precio-num">$1,199<span> MXN</span></div>
              <p className="precio-desc">Las 11 materias de secundaria. Ahorras $440 vs. compra individual.</p>
              <button className="btn btn-amber btn-block" onClick={() => navigate('/registro')}>Quiero todas</button>
            </div>
          </div>
        </div>
      </section>

      {/* SOBRE USICAMM */}
      <section className="section">
        <div className="container container-narrow">
          <div className="section-header">
            <span className="eyebrow">Sobre el examen</span>
            <h2>¿Qué es el proceso USICAMM?</h2>
          </div>
          <div className="usicamm-card">
            <p>
              La <strong>USICAMM</strong> (Unidad del Sistema para la Carrera de las Maestras y los Maestros) coordina los procesos de
              admisión, promoción y reconocimiento del personal docente en educación básica en México.
            </p>
            <p style={{ marginTop: 14 }}>
              El examen de admisión evalúa <strong>aptitudes para la enseñanza, conocimientos disciplinares y didácticos</strong>
              específicos del nivel educativo y, en secundaria, de la especialidad o materia en que aspiras a enseñar.
            </p>
            <p style={{ marginTop: 14 }}>
              Nuestros simuladores reproducen la <strong>estructura y dificultad real</strong> del examen, por bloques, con preguntas
              de comprensión y de análisis, igual que en la prueba oficial.
            </p>
            <div className="usicamm-stats">
              <div><strong>11</strong><span>materias secundaria</span></div>
              <div><strong>2</strong><span>niveles cognitivos</span></div>
              <div><strong>100</strong><span>preguntas por prueba</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="cta-final">
        <div className="container">
          <h2 style={{ color: '#fff', maxWidth: 720 }}>Empieza con la muestra gratuita. Desbloquea cuando estés listo.</h2>
          <div className="row gap-3" style={{ marginTop: 24, flexWrap: 'wrap' }}>
            <button className="btn btn-amber btn-lg" onClick={() => navigate('/registro')}>Crear cuenta gratis</button>
            <button className="btn btn-ghost btn-lg" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }} onClick={() => navigate('/login')}>Ya tengo cuenta →</button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

function MateriaCard({ prueba, navigate }) {
  return (
    <div className="materia-card">
      <div className="materia-icono">{prueba.icono || '📘'}</div>
      <h4>{prueba.materiaNombre || prueba.nombre.replace(/^[^·]+·\s*/, '')}</h4>
      <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{prueba.preguntas} preguntas · {window.formatPrice(prueba.precio)}</div>
      <div className="row gap-2" style={{ marginTop: 14 }}>
        <span className="pill pill-teal">Muestra gratis</span>
        {prueba.completo && <span className="pill pill-amber">★ Completo</span>}
      </div>
    </div>
  );
}

function HeroMockup() {
  // Mockup pequeño de un simulador en marcha (placeholder visual)
  return (
    <div className="hero-mock">
      <div className="hero-mock-head">
        <div className="hero-mock-pill">Pregunta 12 / 100</div>
        <div className="hero-mock-time">⏱ 47:22</div>
      </div>
      <div className="hero-mock-prog"><div className="hero-mock-prog-fill" style={{ width: '12%' }}></div></div>
      <div className="hero-mock-q">
        <div className="hero-mock-tag">Bloque 3 · Análisis</div>
        <p>Una docente observa que sus estudiantes confunden los conceptos de <em>célula procariota</em> y <em>eucariota</em>. ¿Cuál es la estrategia didáctica más adecuada para abordarlo?</p>
      </div>
      <div className="hero-mock-opts">
        <div className="hero-mock-opt"><span>A</span> Explicar las diferencias en clase magistral.</div>
        <div className="hero-mock-opt selected"><span>B</span> Usar un cuadro comparativo construido con los estudiantes.</div>
        <div className="hero-mock-opt"><span>C</span> Asignar lectura del libro de texto.</div>
        <div className="hero-mock-opt"><span>D</span> Aplicar un examen diagnóstico.</div>
      </div>
    </div>
  );
}

window.Header = function Header({ navigate, session, cartCount = 0, current }) {
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
          <window.Logo size={26} color="var(--ink)" accent="var(--teal)" />
        </a>
        <nav className="nav nav-desktop">
          <a href="#catalogo" onClick={(e) => { if (window.location.hash !== '#/') { e.preventDefault(); navigate('/'); setTimeout(() => document.getElementById('catalogo')?.scrollIntoView({behavior:'smooth'}), 100); } }}>Materias</a>
          <a href="#precios" onClick={(e) => e.preventDefault()}>Precios</a>
        </nav>
        <div className="row gap-2">
          {cartCount > 0 && (
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('/checkout')}>
              🛒 {cartCount}
            </button>
          )}
          {session ? (
            <button className="btn btn-primary btn-sm" onClick={() => navigate('/dashboard')}>Mi panel</button>
          ) : (
            <>
              <button className="btn btn-ghost btn-sm" onClick={() => navigate('/login')}>Iniciar sesión</button>
              <button className="btn btn-primary btn-sm" onClick={() => navigate('/registro')}>Crear cuenta</button>
            </>
          )}
        </div>
      </div>
    </header>
  );
};

window.Footer = function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <window.Logo size={24} color="var(--ink)" accent="var(--teal)" />
            <p className="muted" style={{ fontSize: 13, marginTop: 12, maxWidth: 280 }}>
              Simuladores de práctica para el examen USICAMM. No somos parte ni representamos a la SEP.
            </p>
          </div>
          <div>
            <h5>Producto</h5>
            <a href="#">Materias</a>
            <a href="#">Precios</a>
            <a href="#">Cómo funciona</a>
          </div>
          <div>
            <h5>Soporte</h5>
            <a href="#">Preguntas frecuentes</a>
            <a href="#">Contacto</a>
            <a href="#">Términos</a>
          </div>
          <div>
            <h5>Pagos aceptados</h5>
            <div className="row gap-2" style={{ marginTop: 6 }}>
              <span className="pay-chip">Mercado Pago</span>
              <span className="pay-chip">Oxxo Pay</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">© 2026 Simulador Docente · Hecho en México</div>
      </div>
    </footer>
  );
};