// ============================================================
// landing.jsx · Hábitat Learning Community · habitatlc.xokai.app
// Lo primero que ve Norma al abrir el demo
// Design system unificado · iconos Lucide · sin emojis
// ============================================================

// Isotipo Hábitat · asset oficial (multicolor)
// path opcional para uso desde iframes (ej. "../../assets/habitat-iso.png")
function HabitatIso({ size = 32, src = "assets/habitat-iso.png", alt = "Hábitat" }) {
  return (
    <img src={src} alt={alt} width={size} height={size}
         style={{ display: "block", flexShrink: 0, objectFit: "contain" }} />
  );
}
window.HabitatIso = HabitatIso;

// 5 cards · una por flujo. flowKey mapea a (role, section) en app.jsx
const FLOW_CARDS = [
  {
    flowKey: "comunicados",
    icon: "calendar-days",
    title: "Comunicados que sí se leen",
    body: "Avisos segmentados por nivel · calendario interactivo · confirmación de lectura · Xokai AI redacta por ti.",
    pain: "El sábado pasado mandaste el calendario de junio y tuviste que mandar un segundo correo explicando dudas.",
  },
  {
    flowKey: "pickup",
    icon: "school",
    title: "Pickup sin filas ni caos",
    body: "Ventanas escalonadas · semáforo del papá · portero entrega sin folio ni incidentes · más simple que PickApp.",
    pain: "Ya usan PickApp · pero el JTBD diario de 'cambiar quién recoge hoy' sigue siendo torpe.",
  },
  {
    flowKey: "pagos",
    icon: "wallet",
    title: "Pagos desde el celular",
    body: "Estado de cuenta claro · pago en 3 toques · CFDI automático · Xokai AI predice morosidad antes del día 5.",
    pain: "Cobranza por Excel · CFDI a mano · recordatorios manuales que no escalan a 325 familias.",
  },
  {
    flowKey: "maestro",
    icon: "message-circle",
    title: "Maestro y familia, sin saturar",
    body: "Asistencia · broadcast al grupo · DMs con horario visible · sin número personal · sin spam fuera de hora.",
    pain: "Maestros con número personal expuesto · mensajes a deshora · cero transparencia para la escuela.",
  },
  {
    flowKey: "setup",
    icon: "rocket",
    title: "Tu escuela montada en 30 min",
    body: "Magic link · wizard · estructura cargada · 614 cuentas activas. Sin proyecto de TI, sin esperar semanas.",
    pain: "Cambiar de sistema asusta · plataforma 'monstruosa' que toma 3 meses de implementación.",
  },
];

// LandingHero — el componente que app.jsx renderiza cuando landing=true
// Props: { onEnter(flowKey) } — el padre rutea al rol correcto
function LandingHero({ roles, onEnter }) {
  const [hover, setHover] = useState(null);
  useEffect(() => { window.lucide && window.lucide.createIcons(); });

  return (
    <div className="no-scrollbar" style={{
      position: "absolute", inset: 0, zIndex: 500, overflowY: "auto",
      background: "linear-gradient(180deg, var(--xk-bg) 0%, var(--tenant-brand-tint, #E1F5EE) 100%)",
      fontFamily: "var(--xk-font-sans)",
    }}>
      {/* Header */}
      <header className="animate-fade-up" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "22px 40px", maxWidth: 1240, margin: "0 auto",
        animationDelay: "60ms",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <HabitatIso size={36} />
          <div style={{ lineHeight: 1.2 }}>
            <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--tenant-brand-dark, #04342C)" }}>
              Hábitat Learning Community
            </div>
            <div style={{ fontSize: 11, color: "var(--xk-text-muted)", fontFamily: "var(--xk-font-mono)" }}>
              habitatlc.xokai.app
            </div>
          </div>
        </div>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontSize: 11, color: "var(--xk-text-muted)", fontWeight: 500,
          padding: "6px 10px",
          background: "var(--xk-surface)",
          border: "1px solid var(--xk-border)",
          borderRadius: 999,
        }}>
          powered by
          <XokaiLockup size={14} wordSize={11} />
        </div>
      </header>

      {/* Hero */}
      <section style={{ maxWidth: 880, margin: "32px auto 28px", padding: "0 32px", textAlign: "center" }}>
        <div className="animate-fade-up" style={{
          display: "inline-flex", alignItems: "center", gap: 7,
          background: "var(--xk-surface)",
          border: "1px solid color-mix(in oklab, var(--tenant-brand, #88B83C) 25%, var(--xk-border))",
          color: "var(--tenant-brand-dark, #04342C)",
          padding: "6px 12px", borderRadius: 999,
          fontSize: 11.5, fontWeight: 600, letterSpacing: "0.01em",
          marginBottom: 22, animationDelay: "120ms",
        }}>
          <Icon name="sparkles" size={13} color="var(--tenant-brand, #88B83C)" />
          Demo preparada para Hábitat · 8 de junio
        </div>
        <h1 className="animate-fade-up" style={{
          margin: 0, fontSize: "clamp(34px, 5vw, 52px)", fontWeight: 700,
          letterSpacing: "-0.025em", lineHeight: 1.05,
          color: "var(--tenant-brand-dark, #04342C)",
          animationDelay: "180ms",
        }}>
          Hola Norma
          <br />
          <span style={{ color: "var(--tenant-brand, #88B83C)" }}>Así se vería Hábitat en Xokai</span>
        </h1>
        <p className="animate-fade-up" style={{
          margin: "20px auto 0", maxWidth: 560,
          fontSize: 16, lineHeight: 1.55,
          color: "var(--xk-text-secondary)", fontWeight: 400,
          animationDelay: "260ms",
        }}>
          Cinco flujos que tocan el día a día de Hábitat. Cada uno arranca con un tour guiado
          paso a paso · puedes consumirlo a tu ritmo.
        </p>
      </section>

      {/* Cards de flujo */}
      <section style={{ maxWidth: 1100, margin: "20px auto 36px", padding: "0 32px" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 16,
        }}>
          {FLOW_CARDS.map((c, i) => {
            const isHover = hover === c.flowKey;
            return (
              <button
                key={c.flowKey}
                onClick={() => onEnter && onEnter(c.flowKey)}
                onMouseEnter={() => setHover(c.flowKey)}
                onMouseLeave={() => setHover(null)}
                className="animate-fade-up"
                style={{
                  animationDelay: (320 + i * 80) + "ms",
                  textAlign: "left",
                  cursor: "pointer",
                  background: "var(--xk-surface)",
                  border: "1px solid " + (isHover
                    ? "color-mix(in oklab, var(--tenant-brand, #88B83C) 55%, transparent)"
                    : "var(--xk-border)"),
                  borderRadius: 14,
                  padding: 22,
                  boxShadow: isHover
                    ? "0 12px 28px rgba(15,14,12,0.07), 0 2px 6px rgba(15,14,12,0.04)"
                    : "0 1px 2px rgba(15,14,12,0.03)",
                  transition: "transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms ease, border-color 200ms ease",
                  transform: isHover ? "translateY(-3px)" : "translateY(0)",
                  display: "flex", flexDirection: "column", gap: 14,
                  fontFamily: "inherit",
                }}
              >
                {/* Icono en círculo Hábitat */}
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: isHover
                    ? "var(--tenant-brand, #88B83C)"
                    : "var(--tenant-brand-tint, #E1F5EE)",
                  border: "1px solid color-mix(in oklab, var(--tenant-brand, #88B83C) 30%, transparent)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  transition: "background 200ms ease",
                  flexShrink: 0,
                }}>
                  <Icon name={c.icon} size={22} color={isHover ? "#fff" : "var(--tenant-brand-dark, #04342C)"} stroke={1.7} />
                </div>

                <h3 style={{
                  margin: 0, fontSize: 16.5, fontWeight: 600,
                  letterSpacing: "-0.015em", color: "var(--tenant-brand-dark, #04342C)",
                  lineHeight: 1.3,
                }}>
                  {c.title}
                </h3>

                <p style={{
                  margin: 0, fontSize: 13, lineHeight: 1.55,
                  color: "var(--xk-text-secondary)", flex: 1,
                }}>
                  {c.body}
                </p>

                {/* "Por qué" — pequeño, italic, color tint */}
                <div style={{
                  display: "flex", alignItems: "flex-start", gap: 7,
                  padding: "9px 11px", borderRadius: 8,
                  background: "color-mix(in oklab, var(--tenant-brand-tint, #E1F5EE) 55%, transparent)",
                  fontSize: 11.5, color: "var(--xk-text-secondary)",
                  lineHeight: 1.5,
                }}>
                  <Icon name="alert-circle" size={13} color="var(--tenant-brand, #88B83C)" style={{ marginTop: 1, flexShrink: 0 }} />
                  <span style={{ fontStyle: "italic" }}>{c.pain}</span>
                </div>

                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 5,
                  color: "var(--tenant-brand-dark, #04342C)", fontSize: 12.5, fontWeight: 600,
                  marginTop: 2,
                }}>
                  Ver tour guiado
                  <Icon name="arrow-right" size={13} />
                </div>
              </button>
            );
          })}
        </div>
      </section>

      {/* Datos de Hábitat · social proof discreto */}
      <section className="animate-fade-up" style={{
        maxWidth: 880, margin: "0 auto 28px", padding: "0 32px",
        animationDelay: "780ms",
      }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
          gap: 1, background: "var(--xk-border)", border: "1px solid var(--xk-border)",
          borderRadius: 12, overflow: "hidden",
        }}>
          {[
            { n: "325", l: "alumnos" },
            { n: "614", l: "tutores" },
            { n: "28", l: "staff" },
            { n: "4", l: "niveles" },
            { n: "13", l: "grupos" },
          ].map((s, i) => (
            <div key={i} style={{
              background: "var(--xk-surface)", padding: "16px 12px", textAlign: "center",
            }}>
              <div className="xk-mono" style={{
                fontSize: 22, fontWeight: 700,
                color: "var(--tenant-brand-dark, #04342C)", letterSpacing: "-0.01em",
              }}>{s.n}</div>
              <div style={{ fontSize: 10.5, color: "var(--xk-text-muted)", marginTop: 2, fontWeight: 500, letterSpacing: "0.02em" }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Nota honesta */}
      <footer className="animate-fade-up" style={{
        maxWidth: 720, margin: "0 auto", padding: "0 32px 44px",
        textAlign: "center", animationDelay: "880ms",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "flex-start", gap: 9,
          padding: "12px 16px", borderRadius: 10,
          background: "var(--xk-surface)",
          border: "1px dashed color-mix(in oklab, var(--tenant-brand, #88B83C) 35%, transparent)",
          fontSize: 12, color: "var(--xk-text-secondary)", lineHeight: 1.55,
          textAlign: "left", maxWidth: 620,
        }}>
          <Icon name="info" size={14} color="var(--tenant-brand, #88B83C)" style={{ marginTop: 1, flexShrink: 0 }} />
          <span>
            <strong style={{ color: "var(--tenant-brand-dark, #04342C)" }}>Demostración con datos de ejemplo.</strong>{" "}
            Nada es real todavía. Las funciones marcadas con{" "}
            <Icon name="sparkles" size={11} color="var(--tenant-brand, #88B83C)" style={{ display: "inline", verticalAlign: "-1px" }} />{" "}
            <em>Xokai AI</em> muestran hacia dónde va el producto, no lo que ya hace.
          </span>
        </div>
      </footer>

    </div>
  );
}