/* eslint-disable */
// ============================================================
// Screen 1 — Course Lobby
// ============================================================

function CourseLobby() {
  const c = window.FZ_COURSE;
  const modules = window.FZ_MODULES;

  return (
    <div style={{
      width: "100%", minHeight: 900, background: "var(--paper)",
      padding: "32px 56px 48px", fontFamily: "var(--sans)"
    }}>
      {/* Top bar */}
      <header style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: 48
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <FinazMark size={20} />
          <nav style={{ display: "flex", gap: 22, fontSize: 13, color: "var(--ink-2)" }}>
            <a style={{ color: "var(--ink)", borderBottom: "1.5px solid var(--ink)", paddingBottom: 4 }}>Curso</a>
            <a style={{ cursor: "pointer" }}>Glosario</a>
            <a style={{ cursor: "pointer" }}>Flashcards</a>
            <a style={{ cursor: "pointer" }}>Progreso</a>
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="chip">Iniciación</span>
          <div style={{
            width: 32, height: 32, borderRadius: "50%", background: "var(--accent-tint)",
            color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 12, fontWeight: 600, fontFamily: "var(--mono)"
          }}>MR</div>
        </div>
      </header>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>
        {/* Left: hero */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
            <span className="t-label">Curso {c.code}</span>
            <span style={{ width: 4, height: 4, background: "var(--ink-3)", borderRadius: "50%" }} />
            <span className="t-label">{c.level}</span>
            <span style={{ width: 4, height: 4, background: "var(--ink-3)", borderRadius: "50%" }} />
            <span className="t-label">{c.duration}</span>
          </div>

          <h1 className="t-display" style={{ fontSize: 64, margin: "0 0 16px", maxWidth: 720 }}>
            {c.title}
          </h1>

          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.35,
            color: "var(--ink-2)", maxWidth: 640, margin: "0 0 28px"
          }}>
            “¿Puedes leer un múltiplo sin caer en la trampa del número aislado?”
          </p>

          <p style={{
            fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 580, margin: "0 0 32px"
          }}>
            {c.promise} Aquí no enseñamos fórmulas: entrenamos <em>criterio</em>.
            Cada múltiplo se lee como una señal condicionada por drivers, calidad del beneficio
            y lenguaje prudente.
          </p>

          <div style={{ display: "flex", gap: 12, marginBottom: 36 }}>
            <button className="btn primary" style={{ padding: "14px 22px", fontSize: 14 }}>
              Empezar diagnóstico
              <span style={{ marginLeft: 4 }}>→</span>
            </button>
            <button className="btn" style={{ padding: "14px 22px", fontSize: 14 }}>
              Ver mapa del curso
            </button>
          </div>

          {/* Pull quote / mantra */}
          <div style={{
            borderLeft: "2px solid var(--accent)", paddingLeft: 18, maxWidth: 560
          }}>
            <div className="t-label" style={{ marginBottom: 6 }}>La regla central</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.4, color: "var(--ink)" }}>
              Dato observable → hipótesis → evidencia pendiente → lenguaje prudente.
            </div>
          </div>
        </div>

        {/* Right: meta cards */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Next step card */}
          <div className="card" style={{ padding: 24, background: "var(--card-elev)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
              <span className="t-label">Tu siguiente paso</span>
              <span className="chip accent">M00 · Diagnóstico</span>
            </div>
            <div className="t-display" style={{ fontSize: 22, fontWeight: 500, marginBottom: 8, lineHeight: 1.2 }}>
              Dos empresas, mismo P/E. Dos historias.
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 18, lineHeight: 1.5 }}>
              28 min · 1 ejercicio CASE-X · sin gate
            </div>
            <div style={{
              padding: "10px 12px", background: "var(--paper-2)", borderRadius: 8, marginBottom: 18,
              fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5
            }}>
              <strong>Hipótesis previa:</strong> antes de calcular, escribirás qué empresa esperas que merezca premium.
            </div>
            <button className="btn primary" style={{ width: "100%", justifyContent: "center" }}>
              Empezar episodio →
            </button>
          </div>

          {/* Stats grid */}
          <div className="card" style={{ padding: 24 }}>
            <div className="t-label" style={{ marginBottom: 18 }}>Estructura</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: 18, columnGap: 16 }}>
              <Stat label="Módulos" value="5" />
              <Stat label="Episodios" value="22" />
              <Stat label="Ejercicios" value="22" />
              <Stat label="Gates + Capstone" value="4+1" />
              <Stat label="Glosario" value="66" unit="términos" />
              <Stat label="Mastery" value="75" unit="%" />
            </div>

            <div className="rule" style={{ margin: "20px 0" }} />

            <div className="t-label" style={{ marginBottom: 10 }}>Prerequisitos</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
              {c.prereqs.map((p) => (
                <li key={p} style={{ fontSize: 13, color: "var(--ink-2)", display: "flex", gap: 8 }}>
                  <span style={{ color: "var(--green)" }}>✓</span> {p}
                </li>
              ))}
            </ul>
          </div>

          <Disclaimer />
        </div>
      </div>

      {/* Section: modules preview */}
      <section style={{ marginTop: 80 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <h2 className="t-display" style={{ fontSize: 32, margin: 0 }}>Ruta de dominio</h2>
          <a style={{ fontSize: 13, color: "var(--accent)", cursor: "pointer" }}>Ver mapa completo →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {modules.map((m, i) => (
            <div key={m.id} className="card" style={{
              padding: 20,
              background: m.status === "in-progress" ? "var(--card-elev)" : "var(--card)",
              opacity: m.status === "locked" ? 0.7 : 1,
              position: "relative"
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
                <span className="t-label">{m.code}</span>
                {m.status === "in-progress" && <span className="chip accent" style={{ padding: "2px 8px" }}>en curso</span>}
                {m.status === "locked" && <span style={{ color: "var(--ink-3)" }}>🔒</span>}
                {m.gate && m.status !== "locked" && <span className="chip gold" style={{ padding: "2px 8px" }}>gate</span>}
              </div>
              <div className="t-display" style={{ fontSize: 18, lineHeight: 1.2, marginBottom: 6, fontWeight: 500 }}>{m.title}</div>
              <div style={{
                fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 12,
                color: "var(--ink-3)", lineHeight: 1.4, marginBottom: 14
              }}>“{m.kicker}”</div>
              <div style={{
                fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)",
                display: "flex", gap: 8, marginBottom: 14
              }}>
                <span>{m.episodes} ep</span>
                <span>·</span>
                <span>{m.minutes}m</span>
              </div>
              <Bar value={m.progress} color={m.status === "in-progress" ? "var(--accent)" : "var(--ink-4)"} />
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

window.CourseLobby = CourseLobby;