// LANDING PÚBLICA — Simulador Docente
window.LandingPage = function LandingPage({ navigate, store }) {
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;

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

      {/* HERO con formulario */}
      <section className="hero-landing">
        <div className="container container-narrow" style={{ textAlign: 'center' }}>
          <h1 className="hero-landing-title">
            LOGRA TU META DOCENTE CON SIMULADORES ALINEADOS A LA NEM
          </h1>
          <p className="hero-landing-sub">
            Práctica ilimitada, reactivos tipo examen y retroalimentación experta.
          </p>
          <DiagnosticoForm pruebas={PRUEBAS} navigate={navigate} niveles={store.niveles} />
        </div>
      </section>

      {/* PREVIEW DEL SIMULADOR */}
      <section className="section section-teal-soft" id="como-funciona">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow">PRUEBA EL SIMULADOR DIAGNÓSTICO</span>
          </div>
          <div className="sim-preview-wrap">
            <HeroMockup />
          </div>
        </div>
      </section>

      {/* LO QUE OBTIENES */}
      <LoQueObtienes />

      {/* TESTIMONIOS */}
      <Testimonios />

      {/* ESTRUCTURA DEL EXAMEN */}
      <ExamStructure />

      {/* PRECIO SIMPLE */}
      <section className="section section-dark" id="precios">
        <div className="container">
          <div className="section-header">
            <span className="eyebrow eyebrow-light">Precio</span>
            <h2 style={{ color: '#fff' }}>Acceso completo por materia</h2>
            <p style={{ color: 'rgba(255,255,255,0.65)', marginTop: 10, fontSize: 15 }}>
              Pago único. Sin suscripciones. Sin cargos ocultos.
            </p>
          </div>
          <div style={{ maxWidth: 380, margin: '0 auto' }}>
            <div className="precio-card precio-card-feat">
              <div className="precio-num">$150<span> MXN</span></div>
              <p className="precio-desc">Por materia · acceso permanente al simulador completo con 100 preguntas tipo USICAMM.</p>
              <ul className="feature-list" style={{ marginBottom: 24 }}>
                <li><strong>100 preguntas</strong> tipo examen oficial</li>
                <li>Retroalimentación detallada por bloque</li>
                <li>Comprensión y análisis distinguidos</li>
                <li>Reporte de desempeño por área</li>
                <li>Sin fecha de vencimiento</li>
              </ul>
              <button className="btn btn-amber btn-block" onClick={() => navigate('/registro')}>
                Empezar diagnóstico gratis →
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="cta-final">
        <div className="container" style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>🎯</div>
          <h2 style={{ color: '#fff', maxWidth: 640, margin: '0 auto' }}>
            El examen USICAMM se puede aprobar. La clave es la práctica estructurada.
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.7)', marginTop: 14, fontSize: 16, maxWidth: 480, margin: '14px auto 0' }}>
            Inicia tu diagnóstico ahora — sin cuenta, sin tarjeta.
          </p>
          <div className="row gap-3" style={{ marginTop: 28, flexWrap: 'wrap', justifyContent: 'center' }}>
            <button className="btn btn-amber btn-lg"
              onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
              Iniciar diagnóstico →
            </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>
  );
};

// ── Formulario de diagnóstico ──────────────────────────────────
function DiagnosticoForm({ pruebas, navigate, niveles }) {
  const NIVELES_OPTS = (niveles || window.SD_SEED.NIVELES).map(n => ({ id: n.id, label: n.nombre }));
  // proceso en el form → tipo en la BD
  const PROCESO_A_TIPO = {
    admision:       'admision',
    promocion:      'promocion_vertical',
    promocion_horizontal: 'promocion_horizontal',
  };

  const PROCESOS_OPTS = [
    { id: 'admision',       label: 'Admisión' },
    { id: 'promocion',      label: 'Horas Adicionales' },
    { id: 'promocion_horizontal', label: 'Promoción Horizontal' },
  ];

  const [nivel,     setNivel]     = React.useState('primaria');
  const [proceso,   setProceso]   = React.useState('admision');
  const [materiaId, setMateriaId] = React.useState('');

  // Materias disponibles para el nivel seleccionado (dinámico)
  const materiaOpts = React.useMemo(() => {
    const nPruebas = pruebas.filter(p => (p.nivel || p.nivel_id) === nivel);
    const materias = {};
    nPruebas.forEach(p => {
      if (p.materia && !materias[p.materia]) {
        materias[p.materia] = { id: p.materia, label: p.materiaNombre || p.materia_nombre || p.materia };
      }
    });
    const list = Object.values(materias);
    return list.length ? list : [{ id: '', label: 'General' }];
  }, [nivel, pruebas]);

  React.useEffect(() => { setMateriaId(materiaOpts[0]?.id ?? ''); }, [nivel]);

  // ¿Hay muestra disponible para la selección actual?
  const tieneMuestra = React.useMemo(() => {
    const hermanas = nivel === 'secundaria'
      ? pruebas.filter(p => (p.nivel || p.nivel_id) === 'secundaria' && p.materia === materiaId)
      : pruebas.filter(p => (p.nivel || p.nivel_id) === nivel);
    return hermanas.some(p => p.muestra);
  }, [nivel, materiaId, pruebas]);

  const handleIniciar = () => {
    if (!tieneMuestra) return;
    const tipo = PROCESO_A_TIPO[proceso] || 'admision';

    const hermanas = nivel === 'secundaria'
      ? pruebas.filter(p => (p.nivel || p.nivel_id) === 'secundaria' && p.materia === materiaId)
      : pruebas.filter(p => (p.nivel || p.nivel_id) === nivel);

    // 1. Prueba exacta (tipo seleccionado + tiene muestra)
    let prueba = hermanas.find(p => p.tipo === tipo && p.muestra);
    // 2. Fallback: cualquier hermana con muestra
    if (!prueba) prueba = hermanas.find(p => p.muestra);
    if (!prueba) return;

    navigate(`/simulador/${prueba.id}/muestra`);
  };

  return (
    <div className="diagnostico-form">
      <div className="form-field">
        <label>1. Selecciona tu Nivel</label>
        <div className="form-select-wrap">
          <select value={nivel} onChange={e => setNivel(e.target.value)}>
            {NIVELES_OPTS.map(n => <option key={n.id} value={n.id}>{n.label}</option>)}
          </select>
        </div>
      </div>
      <div className="form-field">
        <label>2. Selecciona tu Proceso</label>
        <div className="form-select-wrap">
          <select value={proceso} onChange={e => setProceso(e.target.value)}>
            {PROCESOS_OPTS.map(p => <option key={p.id} value={p.id}>{p.label}</option>)}
          </select>
        </div>
      </div>
      <div className="form-field">
        <label>3. Selecciona tu Materia/Cargo</label>
        <div className="form-select-wrap">
          <select
            value={materiaId}
            onChange={e => setMateriaId(e.target.value)}
            disabled={nivel !== 'secundaria'}
          >
            {materiaOpts.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
          </select>
        </div>
      </div>
      <button className="btn btn-primary btn-lg diagnostico-btn"
        onClick={handleIniciar}
        disabled={!tieneMuestra}
        title={!tieneMuestra ? 'Próximamente disponible para esta combinación' : ''}>
        {tieneMuestra ? 'INICIAR DIAGNÓSTICO GRATUITO' : 'PRÓXIMAMENTE'}
      </button>
    </div>
  );
}

// ── Lo que obtienes ───────────────────────────────────────────
function LoQueObtienes() {
  const items = [
    { icon: '📋', title: 'REACTIVOS NEM',
      desc: 'Preguntas alineadas al marco curricular de la Nueva Escuela Mexicana.' },
    { icon: '💬', title: 'RETROALIMENTACIÓN DETALLADA',
      desc: 'Explica por qué cada respuesta es correcta o incorrecta, por bloque.' },
    { icon: '📱', title: 'PRACTICA DESDE TU CELULAR, TABLET O COMPUTADORA',
      desc: 'Compatible con cualquier dispositivo. Sin instalaciones.' },
    { icon: '✅', title: 'PRACTICA A TU RITMO: GUARDA TU AVANCE Y CONTINÚA DESPUÉS',
      desc: 'Tu historial y resultados quedan guardados en tu cuenta.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-header">
          <h2>LO QUE OBTIENES</h2>
        </div>
        <div className="benefits-grid">
          {items.map((item, i) => (
            <div key={i} className="benefit-item">
              <div className="benefit-icon">{item.icon}</div>
              <div>
                <div className="benefit-title">{item.title}</div>
                <p className="muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.5 }}>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Barra de anuncio ──────────────────────────────────────────
function AnnouncementBar() {
  const [visible, setVisible] = React.useState(true);
  if (!visible) return null;
  return (
    <div className="announcement-bar">
      <span>
        📢 <strong>Convocatoria USICAMM 2026-2027 activa.</strong>{' '}
        La fecha del examen se acerca — prepárate a tiempo.
      </span>
      <button className="announcement-close" onClick={() => setVisible(false)} aria-label="Cerrar">✕</button>
    </div>
  );
}

// ── Estructura del examen ──────────────────────────────────────
function ExamStructure() {
  const areas = [
    {
      color: 'var(--teal)', bg: 'var(--teal-soft)',
      area: 'Área 1', titulo: 'Marco normativo y pedagógico',
      temas: ['Principios legales del sistema educativo', 'Bases normativas del NEM'],
      pct: 33,
    },
    {
      color: 'var(--amber)', bg: 'var(--amber-soft)',
      area: 'Área 2', titulo: 'Trabajo con alumnos',
      temas: ['Estrategias didácticas y evaluación', 'Marco curricular NEM'],
      pct: 43,
    },
    {
      color: '#7C3AED', bg: '#EDE9FE',
      area: 'Área 3', titulo: 'Trabajo colegiado y comunidad',
      temas: ['Colaboración institucional y trabajo en equipo', 'Vinculación con la comunidad educativa'],
      pct: 24,
    },
  ];

  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">Estructura del examen USICAMM</span>
          <h2>¿Qué áreas evalúan?</h2>
        </div>

        <div className="cognitivo-banner">
          <div className="cognitivo-item" style={{ background: 'var(--teal-soft)', borderColor: 'var(--teal)' }}>
            <div className="cognitivo-icon">🟢</div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--teal-2)' }}>Comprensión</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>
                Identificar, recordar y aplicar conceptos del temario. Conocimiento declarativo.
              </div>
            </div>
          </div>
          <div className="cognitivo-vs">VS</div>
          <div className="cognitivo-item" style={{ background: 'var(--amber-soft)', borderColor: 'var(--amber)' }}>
            <div className="cognitivo-icon">🟠</div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15, color: '#92400E' }}>Análisis</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>
                Interpretar situaciones didácticas reales. Toma de decisiones pedagógicas.
              </div>
            </div>
          </div>
        </div>

        <div className="areas-grid">
          {areas.map((a, i) => (
            <div key={i} className="area-card">
              <div className="area-header" style={{ borderLeft: `4px solid ${a.color}` }}>
                <span className="area-tag" style={{ background: a.bg, color: a.color }}>{a.area}</span>
                <h4 style={{ marginTop: 8, fontSize: 15 }}>{a.titulo}</h4>
              </div>
              <ul style={{ margin: '12px 0 14px', paddingLeft: 18, fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
                {a.temas.map((t, j) => <li key={j}>{t}</li>)}
              </ul>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--muted)', marginBottom: 4 }}>
                  <span>Peso aproximado</span><span style={{ fontWeight: 700, color: a.color }}>{a.pct}%</span>
                </div>
                <div style={{ height: 6, background: 'var(--border)', borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${a.pct}%`, background: a.color, borderRadius: 4 }}></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Testimonios ───────────────────────────────────────────────
function Testimonios() {
  const tests = [
    {
      texto: '"Pasé mi examen en el primer intento. Las preguntas del simulador son muy parecidas al examen real. El desglose por bloque me ayudó a saber dónde practicar más."',
      nombre: 'Maestra Leticia R.',
      sub: 'Secundaria · Biología · Jalisco',
      nivel: '★★★★★',
    },
    {
      texto: '"Lo que más me gustó es que el simulador te dice si la pregunta es de comprensión o análisis. Eso me preparó para el ritmo del examen oficial."',
      nombre: 'Maestro Arturo M.',
      sub: 'Secundaria · Matemáticas · CDMX',
      nivel: '★★★★★',
    },
    {
      texto: '"Hice varias veces el diagnóstico antes de comprar. Cuando vi mi desempeño mejorar, ya sabía que valía la pena. Lo recomiendo a todos mis compañeros."',
      nombre: 'Maestra Claudia T.',
      sub: 'Primaria · General · Veracruz',
      nivel: '★★★★☆',
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="section-header">
          <span className="eyebrow">TESTIMONIOS REALES</span>
          <h2 id="testimonios">Docentes que ya practican con resultados.</h2>
        </div>
        <div className="testimonios-grid">
          {tests.map((t, i) => (
            <div key={i} className="testimonio-card">
              <div className="testimonio-stars">{t.nivel}</div>
              <p className="testimonio-texto">{t.texto}</p>
              <div className="testimonio-autor">
                <div className="testimonio-avatar">{t.nombre.split(' ').map(s => s[0]).slice(0,2).join('')}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{t.nombre}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{t.sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Hero mockup (preview del simulador) ──────────────────────
function HeroMockup() {
  return (
    <div className="hero-mock-centered">
      <div className="hero-mock">
        <div className="hero-mock-head">
          <div className="hero-mock-pill">Pregunta 47 / 100 · Bloque 2</div>
          <div className="hero-mock-time">⏱ 38:14</div>
        </div>
        <div className="hero-mock-prog">
          <div className="hero-mock-prog-fill" style={{ width: '47%' }}></div>
        </div>
        <div className="hero-mock-q">
          <div className="hero-mock-tag">🟠 Análisis · Área 2</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 abordar esta confusión?</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> Construir un cuadro comparativo 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>
    </div>
  );
}

// ── Header ────────────────────────────────────────────────────
window.Header = function Header({ navigate, session, cartCount = 0 }) {
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
          <window.Logo size={32} />
        </a>
        <nav className="nav nav-desktop">
          <a href="#" onClick={(e) => { e.preventDefault(); document.getElementById('como-funciona')?.scrollIntoView({ behavior: 'smooth' }); }}>¿Cómo funciona?</a>
          <a href="#" onClick={(e) => { e.preventDefault(); document.getElementById('testimonios')?.scrollIntoView({ behavior: 'smooth' }); }}>Testimonios</a>
          <a href="#" onClick={(e) => { e.preventDefault(); document.getElementById('precios')?.scrollIntoView({ behavior: 'smooth' }); }}>Precios</a>
        </nav>
        <div className="row gap-2">
          {cartCount > 0 && session && (
            <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>
  );
};

// ── Footer ────────────────────────────────────────────────────
window.Footer = function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <window.Logo size={26} />
            <p className="muted" style={{ fontSize: 13, marginTop: 12, maxWidth: 260, lineHeight: 1.6 }}>
              Simuladores de práctica para el examen USICAMM. No somos parte ni representamos a la SEP o USICAMM.
            </p>
          </div>
          <div>
            <h5>Producto</h5>
            <a href="#" onClick={(e) => { e.preventDefault(); document.getElementById('precios')?.scrollIntoView({ behavior: 'smooth' }); }}>Precios</a>
            <a href="#">Cómo funciona</a>
          </div>
          <div>
            <h5>Soporte</h5>
            <a href="#">Preguntas frecuentes</a>
            <a href="#">Contacto</a>
            <a href="#">Aviso de privacidad</a>
          </div>
          <div>
            <h5>Pagos aceptados</h5>
            <div className="row gap-2" style={{ marginTop: 8, flexWrap: 'wrap' }}>
              <span className="pay-chip">Mercado Pago</span>
              <span className="pay-chip">Oxxo Pay</span>
            </div>
            <p className="muted" style={{ fontSize: 12, marginTop: 10, lineHeight: 1.5 }}>Pago único · sin suscripción</p>
          </div>
        </div>
        <div className="footer-bottom">
          © 2026 Simulador Docente · Hecho en México 🇲🇽
        </div>
      </div>
    </footer>
  );
};