// ============================================================
// landing.jsx · Nivel 0 · Entrada de prototipo.xokai.app
// Lo primero que ven los leads (directoras de escuela)
// ============================================================

const LIFECYCLE = [
  { phase: "Se configura", roles: ["sysadmin", "director"] },
  { phase: "Se opera", roles: ["director-op", "coordinador", "admisiones", "finanzas"] },
  { phase: "Se vive", roles: ["maestro", "portero", "padre"] },
];

const PAINS = [
  { pain: "WhatsApp desbordado", sol: "Avisos con confirmación de lectura", icon: "message-square" },
  { pain: "El caos de la salida", sol: "Pickup escalonado con semáforo", icon: "radio" },
  { pain: "Formularios de Google eternos", sol: "Admisiones e inscripción digital", icon: "clipboard-list" },
  { pain: "El Excel de colegiaturas", sol: "Cobranza, conciliación y CFDI", icon: "wallet" },
];

// Pitch por rol — el dolor que resuelve, para el hover de cada tarjeta
const ROLE_PITCH = {
  sysadmin:     "Da de alta una escuela nueva en 5 minutos, no en semanas de correos.",
  director:     "Configura toda la escuela y carga 600+ familias sin un solo formulario de Google.",
  "director-op":"Manda un aviso a todas las familias y míralo leído — sin perseguir grupos de WhatsApp.",
  coordinador:  "Da seguimiento a incidencias y grupos sin que nada se pierda entre chats.",
  admisiones:   "Convierte prospectos en familias inscritas con un pipeline claro, no una hoja de cálculo.",
  finanzas:     "Cobra, concilia contra banco y timbra CFDI sin el Excel de colegiaturas.",
  maestro:      "Pasa lista en un toque y avisa al grupo desde el celular, no en papel.",
  portero:      "Entrega cada alumno al tutor correcto — sin filas ni gritar nombres.",
  padre:        "Todo de tu hijo en una app: pickup, pagos y avisos, sin buscar en 5 chats.",
};

function LandingHero({ roles, onEnter }) {
  const byId = Object.fromEntries(roles.map(r => [r.id, r]));
  const [hover, setHover] = useState(null);

  return (
    <div className="no-scrollbar xk-revealed" style={{
      position: "absolute", inset: 0, zIndex: 500, overflowY: "auto",
      background: "var(--xk-bg)",
    }}>
      {/* ambient brand glow */}
      <div aria-hidden style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
        <div style={{ position: "absolute", top: -200, right: -120, width: 620, height: 620, borderRadius: 999, background: "radial-gradient(circle, color-mix(in oklab, var(--xk-accent) 26%, transparent), transparent 68%)", filter: "blur(20px)" }}></div>
        <div style={{ position: "absolute", bottom: -260, left: -160, width: 560, height: 560, borderRadius: 999, background: "radial-gradient(circle, color-mix(in oklab, var(--tenant-brand) 18%, transparent), transparent 70%)", filter: "blur(20px)" }}></div>
      </div>

      <div style={{ position: "relative", maxWidth: 1080, margin: "0 auto", padding: "26px 40px 64px" }}>
        {/* top bar */}
        <div className="animate-fade-up" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <XokaiLockup size={28} />
          <span style={{ marginLeft: 4, padding: "3px 9px", background: "var(--xk-accent-light)", color: "var(--xk-accent)", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.02em" }}>Demo interactiva</span>
          <div style={{ flex: 1 }}></div>
          <span style={{ fontSize: 12, color: "var(--xk-text-muted)", display: "inline-flex", alignItems: "center", gap: 7 }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--xk-success)" }}></span>
            Piloto · Hábitat Learning Community
          </span>
        </div>

        {/* hero */}
        <div style={{ paddingTop: 64, textAlign: "center" }}>
          <div className="animate-hero-in" style={{ display: "inline-block", marginBottom: 26 }}>
            <span style={{ position: "relative", display: "inline-flex" }}>
              <span className="animate-pulse-ring" style={{ position: "absolute", inset: 0, borderRadius: 26 }}></span>
              <XokaiIso size={84} radius={24} />
            </span>
          </div>
          <h1 className="animate-fade-up" style={{ margin: 0, fontSize: 58, lineHeight: 1.04, fontWeight: 600, letterSpacing: "-0.035em", maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
            Toda tu escuela,<br />en <span style={{ color: "var(--xk-accent)", fontStyle: "italic" }}>un solo camino</span>
          </h1>
          <p className="animate-fade-up" style={{ animationDelay: "0.08s", margin: "22px auto 0", maxWidth: 600, fontSize: 17, lineHeight: 1.6, color: "var(--xk-text-secondary)" }}>
            Xokai reemplaza el caos de WhatsApp, los formularios de Google y el Excel de colegiaturas con una sola plataforma que conecta a tu escuela con cada familia.
          </p>

          <div className="animate-fade-up" style={{ animationDelay: "0.16s", marginTop: 30, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button onClick={() => onEnter("sysadmin")} className="xk-btn-press" style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "14px 26px", background: "var(--xk-accent)", color: "#fff", border: "none", borderRadius: 12, fontSize: 15.5, fontWeight: 600, cursor: "pointer", boxShadow: "0 8px 24px -8px color-mix(in oklab, var(--xk-accent) 60%, transparent)" }}>
              Entrar a la demo <Icon name="arrow-right" size={17} color="#fff" />
            </button>
            <a href="#roles" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "14px 22px", background: "var(--xk-surface)", color: "var(--xk-text)", border: "1px solid var(--xk-border-strong)", borderRadius: 12, fontSize: 15.5, fontWeight: 500, cursor: "pointer", textDecoration: "none" }}>
              <Icon name="layout-grid" size={16} />Explorar los 9 roles
            </a>
          </div>

          {/* trust stats */}
          <div className="animate-fade-up" style={{ animationDelay: "0.24s", marginTop: 40, display: "inline-flex", gap: 0, alignItems: "stretch", background: "var(--xk-surface)", border: "1px solid var(--xk-border)", borderRadius: 14, boxShadow: "var(--xk-shadow-xs)", overflow: "hidden" }}>
            {[["9", "roles conectados"], ["36+", "pantallas"], ["614", "tutores · piloto"], ["1", "sola plataforma"]].map((s, i) => (
              <div key={i} style={{ padding: "14px 26px", borderLeft: i ? "1px solid var(--xk-border)" : "none", textAlign: "center" }}>
                <div className="xk-mono" style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.03em", color: "var(--xk-accent)" }}>{s[0]}</div>
                <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 3 }}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* the journey · un solo camino */}
        <div id="roles" style={{ paddingTop: 84, scrollMarginTop: 24 }}>
          <div style={{ textAlign: "center", marginBottom: 36 }}>
            <div className="xk-overline" style={{ color: "var(--xk-accent)", marginBottom: 10 }}>Un solo camino · 9 roles</div>
            <h2 style={{ margin: 0, fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em" }}>Del alta de la escuela al primer pickup</h2>
            <p style={{ margin: "10px auto 0", maxWidth: 540, fontSize: 14.5, color: "var(--xk-text-secondary)", lineHeight: 1.55 }}>
              Cada persona de tu comunidad tiene su propia experiencia. Toca cualquiera para entrar a su prototipo.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {LIFECYCLE.map((group, gi) => (
              <div key={gi}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: "var(--xk-text-secondary)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{group.phase}</span>
                  <span style={{ flex: 1, height: 1, background: "var(--xk-border)" }}></span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: `repeat(${group.roles.length}, 1fr)`, gap: 12 }}>
                  {group.roles.map((rid) => {
                    const r = byId[rid];
                    const on = hover === rid;
                    return (
                      <button key={rid} onClick={() => onEnter(rid)} onMouseEnter={() => setHover(rid)} onMouseLeave={() => setHover(null)}
                        className="xk-btn-press" style={{ textAlign: "left", cursor: "pointer", padding: 16, borderRadius: 14, position: "relative", overflow: "hidden", minHeight: 132,
                          background: "var(--xk-surface)", border: "1px solid " + (on ? "var(--xk-accent)" : "var(--xk-border)"),
                          boxShadow: on ? "var(--xk-shadow-md)" : "var(--xk-shadow-xs)", transform: on ? "translateY(-2px)" : "none",
                          transition: "transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease" }}>
                        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                          <span style={{ width: 38, height: 38, borderRadius: 10, background: on ? "var(--xk-accent)" : "var(--xk-accent-light)", color: on ? "#fff" : "var(--xk-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background 180ms ease" }}>
                            <Icon name={r.icon} size={19} />
                          </span>
                          <span className="xk-mono" style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>0{r.n}</span>
                        </div>
                        <div style={{ fontSize: 14, fontWeight: 600, marginTop: 12 }}>{r.label}</div>
                        {/* slot: sub (default) ↔ pain pitch (hover) cross-fade, fixed height below title */}
                        <div style={{ position: "relative", marginTop: 4, minHeight: 44 }}>
                          <div style={{ position: "absolute", inset: 0, fontSize: 11.5, color: "var(--xk-text-muted)", opacity: on ? 0 : 1, transition: "opacity 140ms ease" }}>{r.sub}</div>
                          <div style={{ position: "absolute", inset: 0, opacity: on ? 1 : 0, transform: on ? "translateY(0)" : "translateY(5px)", transition: "opacity 180ms ease, transform 180ms ease", pointerEvents: "none" }}>
                            <div style={{ fontSize: 11.5, lineHeight: 1.4, color: "var(--xk-accent)", fontWeight: 500 }}>{ROLE_PITCH[rid]}</div>
                          </div>
                        </div>
                        <div style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 600, color: "var(--xk-text)", opacity: on ? 1 : 0, transition: "opacity 180ms ease" }}>Entrar <Icon name="arrow-right" size={12} /></div>
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* pain → solution */}
        <div style={{ paddingTop: 80 }}>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <div className="xk-overline" style={{ color: "var(--xk-accent)", marginBottom: 10 }}>Por qué Xokai</div>
            <h2 style={{ margin: 0, fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em" }}>Resuelve lo que hoy te quita tiempo</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {PAINS.map((p, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 20px", background: "var(--xk-surface)", border: "1px solid var(--xk-border)", borderRadius: 14 }}>
                <span style={{ width: 44, height: 44, borderRadius: 11, background: "var(--xk-accent-light)", color: "var(--xk-accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={p.icon} size={21} />
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, color: "var(--xk-text-muted)", textDecoration: "line-through" }}>{p.pain}</div>
                  <div style={{ fontSize: 15, fontWeight: 600, marginTop: 3, display: "flex", alignItems: "center", gap: 7 }}>
                    <Icon name="arrow-right" size={14} color="var(--xk-accent)" />{p.sol}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* final CTA */}
        <div style={{ paddingTop: 72 }}>
          <div style={{ position: "relative", overflow: "hidden", borderRadius: 20, padding: "44px 40px", textAlign: "center", background: "linear-gradient(135deg, var(--xk-accent), var(--xokai-purple-dark))", color: "#fff" }}>
            <div aria-hidden style={{ position: "absolute", top: -60, right: -40, opacity: 0.14 }}><Icon name="graduation-cap" size={220} color="#fff" /></div>
            <div style={{ position: "relative" }}>
              <h2 style={{ margin: 0, fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em" }}>Tu escuela. Tu familia. Un solo camino.</h2>
              <p style={{ margin: "12px auto 0", maxWidth: 480, fontSize: 15, lineHeight: 1.55, opacity: 0.92 }}>
                Recorre la plataforma completa como la viviría cada persona de tu comunidad.
              </p>
              <button onClick={() => onEnter("sysadmin")} className="xk-btn-press" style={{ marginTop: 24, display: "inline-flex", alignItems: "center", gap: 9, padding: "14px 28px", background: "#fff", color: "var(--xk-accent)", border: "none", borderRadius: 12, fontSize: 15.5, fontWeight: 600, cursor: "pointer" }}>
                Entrar a la demo <Icon name="arrow-right" size={17} color="var(--xk-accent)" />
              </button>
            </div>
          </div>
          <div style={{ textAlign: "center", marginTop: 22, fontSize: 12, color: "var(--xk-text-muted)" }}>
            Powered by Xokai.app · prototipo de venta · MVP-V1
          </div>
        </div>
      </div>
    </div>
  );
}
window.LandingHero = LandingHero;