// ============================================================
// flow1b.jsx · B0–B7 · Onboarding del director
// ============================================================

const DIR_STEPS = ["Perfil", "Branding", "Estructura", "Ciclo", "Pickup", "Revisión"];
function dirHeader(extra) {
  return { kind: "xokai-director", person: { name: window.b("director.full_name"), sub: window.b("director.title"), avatarName: window.b("director.full_name"), color: "var(--xk-accent)" }, ...extra };
}
function DirectorWizard({ step, openModal, head, children, footer, maxWidth = 880 }) {
  return (
    <ScreenFrame header={dirHeader()} maxWidth={maxWidth}>
      <WizardStepper steps={DIR_STEPS} current={step} style={{ marginBottom: 30 }} />
      {head}
      {children}
      {footer}
    </ScreenFrame>
  );
}
function dirCancel(openModal) {
  return <Btn variant="secondary" onClick={() => openModal(<MConfirmCancel onClose={openModal.close} onConfirm={openModal.close} description="Lo configurado se guarda · puedes retomar después con el mismo link." />)}>Cancelar</Btn>;
}

// ---------- B0 · Welcome ----------
function B0({ state = "happy" }) {
  const tiles = [
    { icon: "building-2", t: "Perfil", s: "Datos de la escuela" },
    { icon: "palette", t: "Branding", s: "Logo y color" },
    { icon: "layout-grid", t: "Estructura", s: "Niveles y grupos" },
    { icon: "calendar-days", t: "Ciclo", s: "Fechas y periodos" },
    { icon: "radio", t: "Pickup", s: "Ventanas de salida" },
    { icon: "list-checks", t: "Revisión", s: "Qué incluye tu plan" },
  ];
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "var(--xk-bg)" }}>
      <header style={{ height: 56, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 24px", background: "var(--xk-surface)", borderBottom: "1px solid var(--xk-border)" }}>
        <XokaiLockup size={26} />
        <span style={{ marginLeft: "auto", fontSize: 12.5, color: "var(--xk-text-muted)" }}>{window.b("director.email")}</span>
      </header>
      <div className="no-scrollbar" style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ maxWidth: 620, margin: "0 auto", padding: "48px 36px", textAlign: "center" }}>
          <div className="animate-hero-in" style={{ display: "inline-block", marginBottom: 22 }}><XokaiIso size={72} /></div>
          <h1 data-tour="su-welcome" style={{ margin: 0, fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em" }}>Te damos la bienvenida, {window.b("director.first_name")}</h1>
          <p style={{ margin: "12px auto 0", fontSize: 15, color: "var(--xk-text-secondary)", lineHeight: 1.6, maxWidth: 480 }}>
            La cuenta de Xokai para {window.b("school.name")} está lista. Solo faltan unos minutos de configuración · todo es editable después.
          </p>
          <div style={{ marginTop: 32 }}>
            <Eyebrow style={{ textAlign: "center" }}>Lo que vas a configurar</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
              {tiles.map((t, i) => (
                <div key={i} className="animate-fade-up" style={{ animationDelay: (0.06 * i) + "s", padding: "16px 12px", background: "var(--xk-surface)", border: "1px solid var(--xk-border)", borderRadius: 12, textAlign: "center" }}>
                  <IconBox icon={t.icon} size={36} iconSize={18} />
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 9 }}>{t.t}</div>
                  <div style={{ fontSize: 11, color: "var(--xk-text-muted)", marginTop: 2 }}>{t.s}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 22 }}><Banner tone="info" icon="clock" style={{ textAlign: "left" }}>Tiempo estimado · 25 a 30 minutos · puedes guardar y volver cuando quieras.</Banner></div>
          <div style={{ marginTop: 22 }}><Btn variant="primary" size="lg" full iconRight="arrow-right" onClick={() => window.goTo("B1")}>Empezar configuración</Btn></div>
          <div style={{ marginTop: 16, fontSize: 12, color: "var(--xk-text-muted)" }}>¿Dudas? Escríbenos · hola@xokai.app</div>
        </div>
      </div>
    </div>
  );
}

// ---------- B1 · Perfil ----------
function B1({ state = "happy", openModal }) {
  const [shake, setShake] = useState(false);
  const [consent, setConsent] = useState(false);
  const v = state === "validation";
  const prefilled = <Badge tone="warning" style={{ marginLeft: 8 }}>PRE-LLENADO</Badge>;
  return (
    <DirectorWizard step={1} openModal={openModal}
      head={<WizardHead eyebrow="Paso 1 de 6" title={"Perfil de " + window.b("school.short_name")} subtitle="Confirma los datos generales y fiscales de la escuela." />}
      footer={<WizardFooter back={false} leftNote="Paso 1 de 6 · ~5 min cada uno" nextLabel="Continuar" nextDisabled={!consent} onNext={() => { if (v) { setShake(true); setTimeout(() => setShake(false), 350); } else { window.goTo("B2"); } }}>{dirCancel(openModal)}</WizardFooter>}>
      <Banner tone="neutral" icon="info" style={{ marginBottom: 18 }}>Los campos con <Badge tone="warning">PRE-LLENADO</Badge> se capturaron al crear la cuenta. Cámbialos si están mal.</Banner>
      <Card style={{ padding: 26 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label={<span>Nombre completo {prefilled}</span>} full><Input value={window.b("school.name")} /></Field>
          <Field label="Pedagogía"><Select value={window.b("school.pedagogy")} options={[window.b("school.pedagogy"), "Montessori", "Tradicional", "Constructivista"]} /></Field>
          <Field label="Idiomas de instrucción"><Input value="Español · Inglés" /></Field>
          <Field label={<span>Dirección {prefilled}</span>} full><Input value="Av. Américas 1254, Country Club" /></Field>
          <Field label="Estado"><Select value="Jalisco" options={window.MX_ESTADOS} /></Field>
          <Field label="Ciudad"><Input value="Guadalajara" /></Field>
          <Field label="Teléfono" error={v ? "Campo requerido" : null}><Input value={v ? "" : "33 1254 7800"} error={v} shake={shake} placeholder="999 000 0000" /></Field>
          <Field label="Sitio web"><Input value="habitatlc.mx" /></Field>
        </div>
        <Divider dashed style={{ margin: "20px 0" }} />
        <Label>Datos fiscales · CFDI</Label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 10 }}>
          <Field label={<span>RFC {prefilled}</span>}><Input mono value={window.b("school.rfc")} /></Field>
          <Field label="Uso de CFDI"><Select value="G03 · Gastos en general" options={["G03 · Gastos en general", "D10 · Pagos por servicios educativos"]} /></Field>
          <Field label={<span>Razón social {prefilled}</span>} full><Input value={window.b("school.razon_social")} /></Field>
        </div>
      </Card>
      <label style={{ display: "flex", alignItems: "flex-start", gap: 11, marginTop: 16, padding: "14px 16px", background: consent ? "var(--xk-accent-light)" : "var(--xk-surface)", border: "1px solid " + (consent ? "var(--xk-accent)" : "var(--xk-border-strong)"), borderRadius: 12, cursor: "pointer", transition: "background 140ms ease, border-color 140ms ease" }}>
        <span style={{ width: 20, height: 20, borderRadius: 6, flexShrink: 0, marginTop: 1, display: "inline-flex", alignItems: "center", justifyContent: "center",
          background: consent ? "var(--xk-accent)" : "var(--xk-surface)", border: "1.5px solid " + (consent ? "var(--xk-accent)" : "var(--xk-border-strong)") }}>
          {consent && <Icon name="check" size={13} color="#fff" />}
        </span>
        <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)} style={{ position: "absolute", opacity: 0, width: 0, height: 0 }} />
        <span style={{ fontSize: 13, color: "var(--xk-text)", lineHeight: 1.5 }}>
          He leído y acepto el <a href="#" onClick={e => { e.preventDefault(); e.stopPropagation(); }} style={{ color: "var(--xk-accent)", fontWeight: 500, textDecoration: "none" }}>Aviso de Privacidad</a> y los <a href="#" onClick={e => { e.preventDefault(); e.stopPropagation(); }} style={{ color: "var(--xk-accent)", fontWeight: 500, textDecoration: "none" }}>Términos de Uso</a> de Xokai.
        </span>
      </label>
    </DirectorWizard>
  );
}

// ---------- B2 · Branding white-label ----------
function B2({ state = "happy", openModal }) {
  const [color, setColor] = useState(window.b("school.brand_color"));
  const [secondary, setSecondary] = useState("#04342C");
  const [parentName, setParentName] = useState(window.b("school.short_name"));
  const [detecting, setDetecting] = useState(false);
  const [detectToast, setDetectToast] = useState(false);
  useEffect(() => { document.documentElement.style.setProperty("--tenant-brand", color); }, [color]);
  // Paleta real extraída del logo de Hábitat (auto-detección)
  const detected = ["#88B83C", "#3E7B33", "#F0C419", "#F0563E", "#04342C"];
  const swatches = detected;
  const logoError = state === "error";
  function reDetect() {
    setDetecting(true);
    setTimeout(() => { setDetecting(false); setDetectToast(true); setTimeout(() => setDetectToast(false), 2400); }, 1300);
  }
  return (
    <DirectorWizard step={2} openModal={openModal} maxWidth={1080}
      head={<WizardHead title={"La app será de " + window.b("school.short_name") + " por dentro"} subtitle={"Padres y staff ven el logo y color de " + window.b("school.short_name") + " en toda la experiencia · Xokai se queda detrás operando."} />}
      footer={<WizardFooter nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 24, alignItems: "start" }}>
        {/* Controls */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Card style={{ padding: 16 }}>
            <Label>Logo</Label>
            <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "10px 0 12px" }}>
              <span style={{ width: 56, height: 56, borderRadius: 12, background: "#fff", border: "1px solid var(--xk-border)", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 6, flexShrink: 0 }}>
                <img src="assets/habitat-iso.png" alt="Logo Hábitat" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
              </span>
              <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", lineHeight: 1.5 }}>logo-{window.b("school.subdomain")}.png<br />12 KB · subido</div>
            </div>
            {logoError && <Banner tone="danger" icon="alert-circle" style={{ marginBottom: 10 }}>No pudimos leer este archivo · máximo 2 MB en JPG o PNG.</Banner>}
            <Btn variant="secondary" full icon="upload" onClick={reDetect}>Cambiar</Btn>
            {/* Detected palette panel */}
            <div data-tour="su-brand" style={{ marginTop: 14, paddingTop: 14, borderTop: "1px dashed var(--xk-border-strong)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 9 }}>
                <Icon name="sparkles" size={12} color="var(--xk-accent)" />
                <span style={{ fontSize: 11, fontWeight: 600, color: "var(--xk-accent)" }}>Paleta detectada del logo</span>
                {!detecting && <button onClick={reDetect} className="xk-iconbtn" title="Volver a detectar" style={{ marginLeft: "auto", padding: 3 }}><Icon name="refresh-cw" size={12} /></button>}
              </div>
              <div style={{ position: "relative", minHeight: 28 }}>
                {detecting ? (
                  <div style={{ display: "flex", alignItems: "center", gap: 9, height: 28 }}>
                    <Spinner size={15} /><span style={{ fontSize: 12, color: "var(--xk-text-secondary)" }}>Analizando colores del logo…</span>
                  </div>
                ) : (
                  <div style={{ display: "flex", gap: 7, alignItems: "center" }}>
                    {detected.map((c, i) => (
                      <span key={i} className="animate-fade-up xk-tap" title={c} onClick={() => setColor(c)}
                        style={{ animationDelay: (i * 0.07) + "s", width: 26, height: 26, borderRadius: 7, background: c, border: "1px solid var(--xk-border)", cursor: "pointer", flexShrink: 0 }}></span>
                    ))}
                  </div>
                )}
              </div>
              <div style={{ fontSize: 10.5, color: "var(--xk-text-muted)", marginTop: 8, lineHeight: 1.45 }}>Extrajimos 5 colores · elegimos el más dominante como principal. Toca uno para usarlo.</div>
            </div>
          </Card>
          <Card style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Label>Color principal</Label>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 4, marginLeft: "auto", marginBottom: 6, fontSize: 10, fontWeight: 600, color: "var(--xk-accent)" }}><Icon name="sparkles" size={11} />Detectado del logo</span>
            </div>
            <div style={{ display: "flex", gap: 8, margin: "10px 0 12px" }}>
              {swatches.map((s, i) => (
                <button key={i} onClick={() => setColor(s)} style={{ width: 34, height: 34, borderRadius: 8, background: s, border: color === s ? "2px solid var(--xk-text)" : "1px solid var(--xk-border)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  {color === s && <Icon name="check" size={16} color="#fff" />}
                </button>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <label style={{ position: "relative", width: 30, height: 30, borderRadius: 7, background: color, border: "1px solid var(--xk-border)", cursor: "pointer", flexShrink: 0, display: "block" }} title="Abrir selector de color">
                <input type="color" value={color} onChange={e => setColor(e.target.value)} style={{ position: "absolute", inset: 0, opacity: 0, cursor: "pointer", width: "100%", height: "100%", border: "none", padding: 0 }} />
              </label>
              <input className="xk-input" value={color} onChange={e => setColor(e.target.value)} style={{ fontFamily: "var(--xk-font-mono)", textTransform: "uppercase" }} />
            </div>
          </Card>
          <Card style={{ padding: 16 }}>
            <Label>Nombre que verán los padres</Label>
            <input className="xk-input" value={parentName} onChange={e => setParentName(e.target.value)} style={{ marginTop: 10 }} />
            <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 6 }}>Aparece en headers, emails y push notifications.</div>
          </Card>
          <Card style={{ padding: 16 }}>
            <Label>Subdominio</Label>
            <div style={{ marginTop: 10 }}><Input value={window.b("school.subdomain")} suffix=".xokai.app" /></div>
            <div style={{ fontSize: 11.5, color: "var(--xk-info)", marginTop: 6, fontFamily: "var(--xk-font-mono)" }}>{window.b("school.subdomain")}.xokai.app</div>
          </Card>
        </div>

        {/* Preview */}
        <div>
          <Eyebrow>Cómo lo verán los padres · dos momentos</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            {/* Moment 1 · App Store */}
            <div>
              <Badge tone="purple" style={{ marginBottom: 10 }}>PRIMER TOUCH · BUSCAR EN APP STORE</Badge>
              <Card style={{ padding: 14 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", background: "var(--xk-surface-2)", borderRadius: 8, marginBottom: 12 }}>
                  <Icon name="search" size={14} color="var(--xk-text-muted)" /><span style={{ fontSize: 13 }}>xokai</span>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <XokaiIso size={48} radius={11} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Xokai · Gestión Escolar</div>
                    <div style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>Educación · ★ 4.8</div>
                  </div>
                  <span style={{ padding: "5px 14px", background: "var(--xk-accent-light)", color: "var(--xk-accent)", borderRadius: 999, fontSize: 11.5, fontWeight: 600 }}>OBTENER</span>
                </div>
              </Card>
              <Card style={{ padding: 12, marginTop: 10, display: "flex", alignItems: "center", gap: 10, background: "var(--xk-surface-2)" }}>
                <XokaiIso size={36} radius={9} />
                <div style={{ fontSize: 11.5, color: "var(--xk-text-secondary)", lineHeight: 1.4 }}>En tu home screen · "Xokai" debajo del ícono</div>
              </Card>
              <Banner tone="info" style={{ marginTop: 10 }}>Una sola app en stores · todas las escuelas usan la misma. El padre busca "Xokai", la descarga y entra con su email.</Banner>
            </div>
            {/* Moment 2 · in-app */}
            <div>
              <Badge tone="success" style={{ marginBottom: 10 }}>DESPUÉS DE ENTRAR · TODO ES {window.bU("school.short_name")}</Badge>
              <div style={{ display: "flex", justifyContent: "center" }}><IPhoneMock width={188} /></div>
              <Card style={{ padding: 14, marginTop: 12 }}>
                {["Logo de " + parentName, "Color " + color, "Push y email branded", window.b("school.subdomain") + ".xokai.app"].map((t, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, padding: "5px 0", fontSize: 12.5 }}>
                    <Icon name="check" size={14} color="var(--tenant-brand)" />{t}
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </div>
      {detectToast && <Toast icon="sparkles" tone="purple">Detectamos 5 colores del logo de {window.b("school.short_name")}</Toast>}
    </DirectorWizard>
  );
}

// ---------- B3 · Estructura académica ----------
function B3({ state = "happy", openModal }) {
  if (state === "empty") return (
    <DirectorWizard step={3} openModal={openModal} head={<WizardHead title={"Estructura académica de " + window.b("school.short_name")} subtitle="Organiza la escuela en niveles (Kinder, Primaria…) y grupos (1°-A, 1°-B…)." />}
      footer={<WizardFooter nextDisabled nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <div className="animate-fade-up xk-card" style={{ position: "relative", overflow: "hidden", padding: "44px 32px", textAlign: "center",
        background: "radial-gradient(120% 90% at 50% -10%, var(--xk-accent-light) 0%, rgba(243,240,255,0) 55%), var(--xk-surface)" }}>
        <div style={{ position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
          <span aria-hidden style={{ position: "absolute", width: 120, height: 120, borderRadius: 999, border: "1px solid color-mix(in oklab, var(--xk-accent) 16%, transparent)" }}></span>
          <span style={{ width: 76, height: 76, borderRadius: 999, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(155deg, #fff, var(--xk-accent-light))", border: "1px solid color-mix(in oklab, var(--xk-accent) 18%, transparent)", boxShadow: "0 8px 22px -8px color-mix(in oklab, var(--xk-accent) 40%, transparent)" }}>
            <Icon name="layout-grid" size={34} color="var(--xk-accent)" />
          </span>
        </div>
        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Aún no defines la estructura</h3>
        <p style={{ margin: "8px auto 0", fontSize: 13.5, color: "var(--xk-text-secondary)", maxWidth: 440, lineHeight: 1.55 }}>
          La estructura es el esqueleto de {window.b("school.short_name")}: define los <strong style={{ color: "var(--xk-text)" }}>niveles</strong> y sus <strong style={{ color: "var(--xk-text)" }}>grupos</strong>. Sobre ella se asignan alumnos, maestros titulares y las ventanas de pickup.
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 22, margin: "20px auto 22px", maxWidth: 440, flexWrap: "wrap" }}>
          {[["layers", "Niveles", "Pre-K, Kinder, Primaria, Secundaria"], ["users", "Grupos", "1°-A, 1°-B, K2-A…"], ["radio", "Alimenta el pickup", "cada nivel = una ventana de salida"]].map((it, i) => (
            <div key={i} style={{ width: 120, textAlign: "center" }}>
              <Icon name={it[0]} size={18} color="var(--xk-accent)" />
              <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 5 }}>{it[1]}</div>
              <div style={{ fontSize: 11, color: "var(--xk-text-muted)", marginTop: 2, lineHeight: 1.4 }}>{it[2]}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
          <Btn variant="primary" icon="sparkles" onClick={() => openModal(<MConfirmCancel onClose={openModal.close} onConfirm={openModal.close} description={"Cargaremos la estructura típica de " + window.b("school.pedagogy") + " · luego la ajustas."} />)}>Usar plantilla {window.b("school.pedagogy").split(" ")[0]}</Btn>
          <Btn variant="secondary" icon="plus">Agregar nivel manual</Btn>
        </div>
      </div>
    </DirectorWizard>
  );
  if (state === "error") return (
    <DirectorWizard step={3} openModal={openModal} head={<WizardHead title={"Estructura académica de " + window.b("school.short_name")} subtitle="Organiza la escuela en niveles y grupos." />}
      footer={<WizardFooter nextDisabled nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <SError title="No pudimos guardar la estructura" body="Hubo un problema al sincronizar los cambios. Tus niveles no se perdieron · reintenta en un momento." technical="ERR_TIMEOUT · /api/v1/structure" />
    </DirectorWizard>
  );
  const levels = [
    { icon: "baby", name: "Pre-Kinder", range: "3–4 años", groups: ["PK-A", "PK-B"], editing: false, del: true },
    { icon: "blocks", name: "Kinder", range: "4–6 años · K1–K2", groups: ["K1-A", "K2-A", "K2-B"], editing: false, del: true },
    { icon: "pencil", name: "Primaria", range: "1°–6°", groups: ["1°-A", "2°-A", "3°-A", "4°-A", "5°-A", "6°-A"], editing: true, del: false },
    { icon: "graduation-cap", name: "Secundaria", range: "1°–3°", groups: ["1°-A", "2°-A", "3°-A"], editing: false, del: true },
  ];
  return (
    <DirectorWizard step={3} openModal={openModal}
      head={<WizardHead title={"Estructura académica de " + window.b("school.short_name")} subtitle="Organiza la escuela en niveles y grupos · arrastra para reordenar." />}
      footer={<WizardFooter nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <Banner tone="purple" icon="sparkles" style={{ marginBottom: 16 }}>
        <strong style={{ color: "var(--xk-text)" }}>Sugerencia automática para {window.b("school.short_name")}</strong> · pre-armada la estructura típica de {window.b("school.pedagogy")}. Arrastra para reordenar, toca un grupo para renombrarlo, o usa la ✕ para quitarlo.
      </Banner>
      <div data-tour="su-structure" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {levels.map((lv, i) => (
          <Card key={i} interactive style={{ padding: 16, border: lv.editing ? "1.5px solid var(--xk-accent)" : undefined }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Icon name="grip-vertical" size={16} color="var(--xk-text-muted)" style={{ cursor: "grab" }} />
              <IconBox icon={lv.icon} size={36} iconSize={18} />
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 14.5, fontWeight: 600, whiteSpace: "nowrap" }}>{lv.name}</span>
                  {lv.editing && <Badge tone="purple">EDITANDO</Badge>}
                  <Badge tone="neutral">{lv.groups.length} {lv.groups.length === 1 ? "grupo" : "grupos"}</Badge>
                </div>
                <div style={{ fontSize: 12, color: "var(--xk-text-muted)", marginTop: 1 }}>{lv.range}</div>
              </div>
              <button className="xk-iconbtn" title="Editar nivel" onClick={() => openModal(<MAddLevel onClose={openModal.close} edit={lv.name} />)}><Icon name="pencil" size={15} /></button>
              {lv.del && <button onClick={() => openModal(<MConfirmDestructive title="Eliminar nivel" description={"Se eliminará el nivel " + lv.name + " y sus " + lv.groups.length + " grupos. Esta acción no se puede deshacer."} actionLabel={"Sí, eliminar " + lv.name} onClose={openModal.close} onConfirm={openModal.close} />)} className="xk-iconbtn is-danger"><Icon name="trash-2" size={15} /></button>}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 12, paddingLeft: 64 }}>
              {lv.groups.map((g, j) => (
                <span key={j} className="xk-pill-edit xk-group-pill" style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 8px 5px 10px", background: lv.editing ? "var(--xk-accent-light)" : "var(--xk-surface-2)", color: lv.editing ? "var(--xk-accent)" : "var(--xk-text-secondary)", borderRadius: 7, fontSize: 12, fontWeight: 500, cursor: "pointer" }}>
                  {g}
                  <span className="xk-group-x" title="Quitar grupo" style={{ display: "inline-flex", opacity: 0.45, transition: "opacity 120ms ease" }}><Icon name="x" size={12} /></span>
                </span>
              ))}
              <button className="xk-dashed" style={{ padding: "5px 11px", background: "transparent", border: "1px dashed var(--xk-border-strong)", borderRadius: 7, fontSize: 12, color: "var(--xk-text-secondary)", cursor: "pointer" }}>+ grupo</button>
            </div>
          </Card>
        ))}
      </div>
      <button className="xk-dashed" onClick={() => openModal(<MAddLevel onClose={openModal.close} />)} style={{ width: "100%", marginTop: 10, padding: 13, background: "transparent", border: "1px dashed var(--xk-border-strong)", borderRadius: 12, fontSize: 13, color: "var(--xk-text-secondary)", cursor: "pointer", fontWeight: 500, display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}><Icon name="plus" size={15} />Agregar nivel</button>
      <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 12, padding: "14px 18px", background: "var(--xk-surface-2)", borderRadius: 12 }}>
        <IconBox icon="users" size={38} bg="var(--xk-surface-3)" color="var(--xk-text-secondary)" />
        <div style={{ fontSize: 13, color: "var(--xk-text-secondary)" }}><strong style={{ color: "var(--xk-text)" }}>Total: 4 niveles · 13 grupos</strong> · capacidad estimada hasta 25 alumnos por grupo · 325 alumnos máximo.</div>
      </div>
    </DirectorWizard>
  );
}

// ---------- B4 · Ciclo escolar ----------
function B4({ state = "happy", openModal }) {
  const [tab, setTab] = useState("Trimestres");
  const v = state === "validation";
  const PERIODOS = {
    Bimestres: [
      { n: "Bimestre 1", d: "19 ago — 17 oct", w: "8 semanas" },
      { n: "Bimestre 2", d: "20 oct — 19 dic", w: "8 semanas" },
      { n: "Bimestre 3", d: "7 ene — 6 mar", w: "8 semanas" },
      { n: "Bimestre 4", d: "9 mar — 8 may", w: "8 semanas" },
      { n: "Bimestre 5", d: "11 may — 25 jun", w: "6 semanas" },
    ],
    Trimestres: [
      { n: "Trimestre 1", d: "19 ago — 22 nov", w: "14 semanas" },
      { n: "Trimestre 2", d: "25 nov — 13 mar", w: "13 semanas" },
      { n: "Trimestre 3", d: "16 mar — 25 jun", w: "14 semanas" },
    ],
    Semestres: [
      { n: "Semestre 1", d: "19 ago — 19 dic", w: "17 semanas" },
      { n: "Semestre 2", d: "7 ene — 25 jun", w: "22 semanas" },
    ],
    Anual: [
      { n: "Ciclo completo", d: "19 ago — 25 jun", w: "39 semanas · evaluación continua" },
    ],
  };
  const periodos = PERIODOS[tab];
  const cols = Math.min(periodos.length, 3);
  const [vac, setVac] = useState([
    { icon: "sun", color: "var(--xk-warning)", bg: "var(--xk-warning-tint)", t: "Vacaciones de invierno", d: "21 dic — 6 ene · 17 días", sep: true },
    { icon: "flower", color: "#D4537E", bg: "#FBEAF0", t: "Semana Santa", d: "29 mar — 9 abr · 12 días", sep: true },
    { icon: "flag", color: "var(--xk-info)", bg: "var(--xk-info-tint)", t: "Días festivos oficiales", d: "16 sep · 16 nov · 1 may · 5 may · 4 días", sep: true },
    { icon: "users", color: "var(--xk-accent)", bg: "var(--xk-accent-light)", t: "Consejo Técnico Escolar (CTE)", d: "Último viernes de cada mes · 8 días", sep: true },
  ]);
  if (state === "empty") return (
    <DirectorWizard step={4} openModal={openModal}
      head={<WizardHead title="Ciclo escolar 2026–2027" subtitle="Fechas, periodos de evaluación y días sin clases." />}
      footer={<WizardFooter nextDisabled nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <div className="animate-fade-up xk-card" style={{ position: "relative", overflow: "hidden", padding: "44px 32px", textAlign: "center",
        background: "radial-gradient(120% 90% at 50% -10%, var(--xk-accent-light) 0%, rgba(243,240,255,0) 55%), var(--xk-surface)" }}>
        <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20, width: 76, height: 76, borderRadius: 999, background: "linear-gradient(155deg, #fff, var(--xk-accent-light))", border: "1px solid color-mix(in oklab, var(--xk-accent) 18%, transparent)", boxShadow: "0 8px 22px -8px color-mix(in oklab, var(--xk-accent) 40%, transparent)" }}>
          <Icon name="calendar-days" size={34} color="var(--xk-accent)" />
        </div>
        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Arma el ciclo en un clic</h3>
        <p style={{ margin: "8px auto 0", fontSize: 13.5, color: "var(--xk-text-secondary)", maxWidth: 440, lineHeight: 1.55 }}>
          En vez de capturar fechas a mano, parte del <strong style={{ color: "var(--xk-text)" }}>calendario oficial SEP 2026–2027</strong>: 185 días lectivos, periodos de evaluación y días sin clases ya calculados. Luego ajustas lo que {window.b("school.short_name")} maneje distinto.
        </p>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 22 }}>
          <Btn variant="primary" icon="sparkles">Cargar calendario SEP 2026–2027</Btn>
          <Btn variant="secondary" icon="pencil">Configurar manual</Btn>
        </div>
      </div>
    </DirectorWizard>
  );
  return (
    <DirectorWizard step={4} openModal={openModal}
      head={<WizardHead title="Ciclo escolar 2026–2027" subtitle="Fechas, periodos de evaluación y vacaciones." />}
      footer={<WizardFooter nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <Card style={{ padding: 26 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label="Inicio del ciclo"><Input mono value="2026-08-19" /></Field>
          <Field label="Fin del ciclo" error={v ? "El fin debe ser posterior al inicio" : null}><Input mono value={v ? "2026-06-25" : "2027-06-25"} error={v} /></Field>
        </div>
        <Label style={{ marginTop: 20 }}>Periodos de evaluación</Label>
        <div style={{ marginTop: 10, marginBottom: 14 }}><Toggle options={["Bimestres", "Trimestres", "Semestres", "Anual"]} value={tab} onChange={setTab} /></div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: 12 }}>
          {periodos.map((t, i) => (
            <div key={i} style={{ padding: 14, border: "1px solid var(--xk-border)", borderRadius: 10, background: "var(--xk-surface)" }}>
              <div className="xk-overline" style={{ marginBottom: 7 }}>{t.n}</div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{t.d}</div>
              <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 3 }}>{t.w}</div>
            </div>
          ))}
        </div>
        <Label style={{ marginTop: 22 }}>Periodos sin clases</Label>
        <Banner tone="purple" icon="sparkles" style={{ margin: "10px 0 10px" }}>
          Pre-cargamos los periodos del <strong style={{ color: "var(--xk-text)" }}>calendario oficial SEP 2026–2027</strong> · ajusta las fechas o elimina lo que no aplique a {window.b("school.short_name")}.
        </Banner>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {vac.map((p, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 14px", border: "1px solid var(--xk-border)", borderRadius: 10 }}>
              <IconBox icon={p.icon} size={34} bg={p.bg} color={p.color} iconSize={16} />
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 500 }}>{p.t}</span>
                  {p.sep && <Badge tone="purple"><Icon name="sparkles" size={9} />Sugerido SEP</Badge>}
                </div>
                <div style={{ fontSize: 12, color: "var(--xk-text-muted)", marginTop: 1 }}>{p.d}</div>
              </div>
              <button title="Editar fechas" className="xk-iconbtn" onClick={() => openModal(<MAddPeriod onClose={openModal.close} edit={p.t} />)}><Icon name="pencil" size={15} /></button>
              <button title="Eliminar" onClick={() => openModal(<MConfirmDestructive title="Eliminar periodo" description={"Se eliminará \"" + p.t + "\" del calendario del ciclo. Puedes volver a agregarlo manualmente después."} actionLabel="Sí, eliminar" onClose={openModal.close} onConfirm={() => { setVac(vac.filter((_, j) => j !== i)); openModal.close(); }} />)} className="xk-iconbtn is-danger"><Icon name="trash-2" size={15} /></button>
            </div>
          ))}
          <button className="xk-dashed" onClick={() => openModal(<MAddPeriod onClose={openModal.close} />)} style={{ padding: 11, background: "transparent", border: "1px dashed var(--xk-border-strong)", borderRadius: 10, fontSize: 13, color: "var(--xk-text-secondary)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}><Icon name="plus" size={14} />Agregar otro periodo</button>
        </div>
        <Banner tone="info" icon="bar-chart-3" style={{ marginTop: 18 }}>El ciclo tendrá <strong style={{ color: "var(--xk-text)" }}>185 días lectivos</strong> · superior al mínimo SEP.</Banner>
      </Card>
    </DirectorWizard>
  );
}

// ---------- B5 · Pickup semáforo ----------
function B5({ state = "happy", openModal }) {
  const windows = [
    { color: "#0F9E8A", name: "Pre-K + K", desc: "4 grupos · ~80 alumnos", from: "14:00", to: "14:30" },
    { color: "#E8714C", name: "Primaria menor", desc: "1°–3° · 6 grupos · ~150 alumnos", from: "14:30", to: "15:00" },
    { color: "#D4537E", name: "Primaria mayor", desc: "4°–6° · 6 grupos · ~150 alumnos", from: "15:00", to: "15:30" },
    { color: "#C99A2E", name: "Secundaria", desc: "1°–3° · 3 grupos · ~75 alumnos", from: "15:30", to: "16:00" },
  ];
  if (state === "empty") return (
    <DirectorWizard step={5} openModal={openModal} maxWidth={1080}
      head={<WizardHead eyebrow="Paso 5 de 6 · diferenciador clave" eyebrowTone="var(--xk-accent)" title="Horarios de pickup escalonados" subtitle="Ventanas de salida escalonadas por nivel, para evitar el caos de la salida." />}
      footer={<WizardFooter nextDisabled nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <div className="animate-fade-up xk-card" style={{ position: "relative", overflow: "hidden", padding: "44px 32px", textAlign: "center",
        background: "radial-gradient(120% 90% at 50% -10%, var(--xk-accent-light) 0%, rgba(243,240,255,0) 55%), var(--xk-surface)" }}>
        <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20, width: 76, height: 76, borderRadius: 999, background: "linear-gradient(155deg, #fff, var(--xk-accent-light))", border: "1px solid color-mix(in oklab, var(--xk-accent) 18%, transparent)", boxShadow: "0 8px 22px -8px color-mix(in oklab, var(--xk-accent) 40%, transparent)" }}>
          <Icon name="radio" size={34} color="var(--xk-accent)" />
        </div>
        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Aún no defines la estructura</h3>
        <p style={{ margin: "8px auto 0", fontSize: 13.5, color: "var(--xk-text-secondary)", maxWidth: 440, lineHeight: 1.55 }}>
          Las ventanas de pickup se arman a partir de los niveles. Primero define la <strong style={{ color: "var(--xk-text)" }}>estructura académica</strong> (paso 3) y aquí aparecerá una ventana por nivel, lista para ajustar.
        </p>
        <div style={{ marginTop: 22 }}><Btn variant="primary" icon="arrow-left" onClick={() => window.goTo("B3")}>Ir a Estructura</Btn></div>
      </div>
    </DirectorWizard>
  );
  if (state === "error") return (
    <DirectorWizard step={5} openModal={openModal} maxWidth={1080}
      head={<WizardHead eyebrow="Paso 5 de 6 · diferenciador clave" eyebrowTone="var(--xk-accent)" title="Horarios de pickup escalonados" subtitle="Ventanas de salida escalonadas por nivel." />}
      footer={<WizardFooter nextDisabled nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <SError title="No pudimos cargar las ventanas de pickup" body="Hubo un problema al traer la configuración. Reintenta · si persiste, revisa status.xokai.app." technical="ERR_TIMEOUT · /api/v1/pickup" />
    </DirectorWizard>
  );
  return (
    <DirectorWizard step={5} openModal={openModal} maxWidth={1080}
      head={<WizardHead eyebrow="Paso 5 de 6 · diferenciador clave" eyebrowTone="var(--xk-accent)" title="Horarios de pickup escalonados" subtitle="Cada nivel sale en su propia ventana de 30 minutos. Los papás ven en su celular cuándo les toca y el portero ve quién está autorizado a recoger · sin filas, sin gritar nombres." />}
      footer={<WizardFooter nextLabel="Continuar">{dirCancel(openModal)}</WizardFooter>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 24, alignItems: "start" }}>
        {/* LEFT · controls */}
        <div>
          <Banner tone="purple" icon="sparkles" style={{ marginBottom: 14 }}>Armamos una ventana por nivel a partir de la <strong style={{ color: "var(--xk-text)" }}>estructura que definiste en el paso 3</strong> · {window.b("school.short_name")} tiene 4 niveles, así que hay 4 ventanas de 30 min. Ajusta las horas o agrega ventanas extra (turno vespertino, hermanos juntos, etc.).</Banner>
          <div data-tour="su-pickup" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {windows.map((w, i) => (
              <Card key={i} style={{ padding: "13px 16px", display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{ width: 14, height: 14, borderRadius: 999, background: w.color, flexShrink: 0 }}></span>
                <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600 }}>{w.name}</div><div style={{ fontSize: 12, color: "var(--xk-text-muted)" }}>{w.desc}</div></div>
                <span className="xk-mono" style={{ fontSize: 13, fontWeight: 600 }}>{w.from}</span>
                <Icon name="arrow-right" size={14} color="var(--xk-text-muted)" />
                <span className="xk-mono" style={{ fontSize: 13, fontWeight: 600 }}>{w.to}</span>
                <button title="Editar horario" className="xk-iconbtn" onClick={() => openModal(<MAddWindow onClose={openModal.close} edit={w.name} />)}><Icon name="pencil" size={15} /></button>
                <button title="Eliminar ventana" onClick={() => openModal(<MConfirmDestructive title="Eliminar ventana" description={"Se eliminará la ventana \"" + w.name + "\" · los grupos de ese nivel quedarán sin horario de salida asignado."} actionLabel="Sí, eliminar" onClose={openModal.close} onConfirm={openModal.close} />)} className="xk-iconbtn"><Icon name="trash-2" size={15} /></button>
              </Card>
            ))}
            <button onClick={() => openModal(<MAddWindow onClose={openModal.close} />)} style={{ padding: 12, background: "transparent", border: "1px dashed var(--xk-border-strong)", borderRadius: 12, fontSize: 13, color: "var(--xk-text-secondary)", cursor: "pointer", fontWeight: 500, display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}><Icon name="plus" size={15} />Agregar ventana</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 14 }}>
            <Field label="Tolerancia post-ventana"><Select value="15 min · auto-flag padre tarde" options={["15 min · auto-flag padre tarde", "10 min", "20 min"]} /></Field>
            <Field label="Aviso a padres antes de ventana"><Select value="10 min · push notification" options={["10 min · push notification", "5 min", "15 min"]} /></Field>
          </div>
        </div>

        {/* RIGHT · how it's lived */}
        <div>
          <Eyebrow>Cómo se vive · papá y portero</Eyebrow>
          <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7 }}>
              <PickupPhonePapa width={150} />
              <span style={{ fontSize: 11, fontWeight: 600, color: "var(--xk-text-secondary)" }}>Papá</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7 }}>
              <PickupPhonePortero width={150} />
              <span style={{ fontSize: 11, fontWeight: 600, color: "var(--xk-text-secondary)" }}>Portero</span>
            </div>
          </div>
        </div>
      </div>

      {/* FULL-WIDTH · timeline */}
      <Label style={{ marginTop: 24 }}>Preview · semáforo activo</Label>
      <div style={{ marginTop: 10, background: "var(--xk-surface-2)", borderRadius: 12, padding: 18 }}>
        <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Línea de tiempo · martes 19 ago</div>
          <span style={{ marginLeft: "auto", fontSize: 11.5, color: "var(--xk-text-muted)" }}>vista del portero · día completo</span>
        </div>
        <div style={{ display: "flex", height: 30, borderRadius: 7, overflow: "hidden", border: "1px solid var(--xk-border)" }}>
          {windows.map((w, i) => <div key={i} style={{ flex: 1, background: w.color }}></div>)}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 7 }}>
          {["14:00", "14:30", "15:00", "15:30", "16:00"].map((t, i) => <span key={i} className="xk-mono" style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>{t}</span>)}
        </div>
      </div>
    </DirectorWizard>
  );
}

// ---------- B6 · Revisión ----------
function B6({ state = "happy", openModal }) {
  const [submitting, setSubmitting] = useState(false);
  const available = [
    { icon: "radio", t: "Pickup semáforo", d: "Salida escalonada sin filas" },
    { icon: "user-check", t: "Delegación", d: "Tutores autorizados por alumno" },
    { icon: "clipboard-list", t: "Admisiones", d: "Inscripciones digitales y pipeline" },
    { icon: "megaphone", t: "Avisos", d: "Comunicados con read receipts" },
    { icon: "message-square", t: "Mensajes 1-a-1", d: "Familia ↔ maestro directo" },
    { icon: "calendar-check", t: "Asistencia", d: "Pase de lista diario" },
    { icon: "calendar-days", t: "Calendario y menú", d: "Ciclo, eventos y menú del comedor" },
    { icon: "receipt", t: "Cobranza manual", d: "Conceptos y estados de cuenta" },
    { icon: "users", t: "Roles de staff", d: "Permisos por puesto" },
    { icon: "life-buoy", t: "Soporte L1", d: "Respuesta < 48 h" },
  ];
  const soon = [
    { icon: "credit-card", t: "Pagos en línea + CFDI", d: "Cobro y factura automática" },
    { icon: "file-signature", t: "Firma Docuseal", d: "Documentos firmados en app" },
    { icon: "landmark", t: "Reconciliación", d: "Match de pagos bancarios" },
  ];
  return (
    <DirectorWizard step={6} openModal={openModal}
      head={<WizardHead title={"Todo esto está incluido en " + window.b("school.short_name")} subtitle="Plataforma completa · una sola tarifa · sin add-ons." />}
      footer={<WizardFooter next={false}>
        <Btn variant="primary" icon={submitting ? null : "check"} onClick={() => { setSubmitting(true); setTimeout(() => { setSubmitting(false); window.goTo("B7"); }, 1500); }}>
          {submitting ? <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Spinner size={15} color="#fff" />Finalizando…</span> : "Finalizar configuración"}
        </Btn>
      </WizardFooter>}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}><Badge tone="success">DISPONIBLE HOY · 10 FEATURES</Badge></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {available.map((f, i) => (
          <Card key={i} interactive style={{ padding: 14, display: "flex", gap: 12, alignItems: "flex-start" }}>
            <IconBox icon={f.icon} size={34} iconSize={17} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{f.t}</div>
              <div style={{ fontSize: 12, color: "var(--xk-text-muted)", marginTop: 2 }}>{f.d}</div>
            </div>
          </Card>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "22px 0 12px" }}><Badge tone="warning">EN CAMINO · PRONTO · SIN COSTO EXTRA</Badge></div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
        {soon.map((f, i) => (
          <Card key={i} style={{ padding: 14, display: "flex", gap: 11, alignItems: "flex-start", opacity: 0.72 }}>
            <IconBox icon={f.icon} size={32} bg="var(--xk-warning-tint)" color="var(--xk-warning)" iconSize={16} />
            <div><div style={{ fontSize: 13, fontWeight: 600 }}>{f.t}</div><div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 2 }}>{f.d}</div></div>
          </Card>
        ))}
      </div>
      <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 12, padding: "14px 18px", background: "var(--xk-surface-2)", borderRadius: 12 }}>
        <Icon name="check-circle-2" size={22} color="var(--xk-success)" />
        <div style={{ fontSize: 13, color: "var(--xk-text-secondary)" }}><strong style={{ color: "var(--xk-text)" }}>Plataforma completa · todo activo en tu trial de 60 días.</strong> Los features PRONTO se activarán automáticamente sin cobro adicional cuando estén listos.</div>
      </div>
    </DirectorWizard>
  );
}

// ---------- B7 · Onboarding completo · celebration ----------
function B7({ state = "happy" }) {
  return (
    <ScreenFrame header={dirHeader()} maxWidth={760}>
      <CelebrationHero variant="soft" icon="party-popper" confettiCount={16}
        title={window.b("school.short_name") + " está lista en Xokai"}
        subtitle="Configuración completa · 27 minutos · más rápido que un café."
        summary={[
          { icon: "palette", label: "app branded a " + window.b("school.short_name") },
          { icon: "radio", label: "pickup escalonado activo" },
          { icon: "calendar-check", label: "ciclo 26–27 listo" },
        ]} />
      <div style={{ marginTop: 26, display: "flex", flexDirection: "column", gap: 22 }}>
        <div data-tour="su-done" className="animate-fade-up" style={{ animationDelay: "0.15s" }}>
          <Eyebrow>Lo que quedó configurado</Eyebrow>
          <KpiGrid items={[{ label: "Niveles", value: "4" }, { label: "Grupos", value: "13" }, { label: "Pickup", value: "4" }, { label: "Trial", value: "60 d" }]} />
        </div>
        <div className="animate-fade-up" style={{ animationDelay: "0.3s" }}>
          <Eyebrow>Próximos pasos · quién hace qué</Eyebrow>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 12, fontSize: 12 }}>
            <LegendDot color="var(--tenant-brand)" label={window.b("school.short_name")} />
            <LegendDot color="var(--xk-accent)" label="Xokai" />
            <LegendDot color="var(--xk-warning)" label="Ambos" />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { t: "Cargar la comunidad de " + window.b("school.short_name"), d: "Dos rutas: self-serve (Centro de carga) o concierge (" + window.b("school.short_name") + " envía CSVs a hola@xokai.app)", badge: "AMBOS", tone: "warning", highlight: true, status: "Pendiente" },
              { t: "Invitar al staff de " + window.b("school.short_name"), d: window.b("director.first_name") + " agrega maestros, coord, finanzas y portero", badge: window.bU("school.short_name"), tone: "success", status: null },
              { t: "Activación masiva de padres", d: "Xokai dispara el magic link branded a los tutores", badge: "XOKAI", tone: "purple", status: null },
              { t: "Go-live · primer pickup window", d: "Lunes 19 ago · 14:00 · ya no más caos", badge: "MOMENTO", tone: "gray", status: null },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 16px", borderRadius: 12,
                border: s.highlight ? "1px solid color-mix(in oklab, var(--xk-warning) 35%, transparent)" : "1px solid var(--xk-border)",
                background: s.highlight ? "var(--xk-warning-tint)" : "var(--xk-surface)" }}>
                <span className="xk-mono" style={{ width: 24, height: 24, borderRadius: 999, background: s.highlight ? "rgba(255,255,255,0.7)" : "var(--xk-surface-2)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, color: "var(--xk-text-secondary)" }}>{i + 1}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s.t}</div>
                  <div style={{ fontSize: 12, color: "var(--xk-text-secondary)", marginTop: 2, lineHeight: 1.45 }}>{s.d}</div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5 }}>
                  <Badge tone={s.tone}>{s.badge}</Badge>
                  {s.status && <span style={{ fontSize: 11, color: "var(--xk-warning)", fontWeight: 500 }}>{s.status}</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="animate-fade-up" style={{ animationDelay: "0.45s", display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", background: "var(--xk-surface-2)", borderRadius: 12 }}>
          <IconBox icon="headset" size={42} iconSize={20} />
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600 }}>¿Dudas en cualquier paso?</div><div style={{ fontSize: 12, color: "var(--xk-text-secondary)", marginTop: 2 }}>El equipo de Xokai responde en menos de 2 h · hola@xokai.app</div></div>
          <Btn variant="secondary" icon="mail">Escribir</Btn>
        </div>
        <div className="animate-fade-up" style={{ animationDelay: "0.6s" }}>
          <Btn variant="primary" size="lg" full iconRight="arrow-right" onClick={() => window.__XK_SWITCHROLE && window.__XK_SWITCHROLE("director-op")}>Entrar al dashboard de {window.b("school.short_name")}</Btn>
        </div>
      </div>
    </ScreenFrame>
  );
}
function LegendDot({ color, label }) {
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--xk-text-secondary)" }}><span style={{ width: 9, height: 9, borderRadius: 999, background: color }}></span>{label}</span>;
}

// ---- Add pickup window modal ----
function MAddWindow({ onClose, edit }) {
  return (
    <ModalShell width={500} onClose={onClose}>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{edit ? "Editar ventana de pickup" : "Agregar ventana de pickup"}</h3>
        <p style={{ margin: "6px 0 18px", fontSize: 13, color: "var(--xk-text-secondary)", lineHeight: 1.5 }}>{edit ? "Ajusta el horario o el alcance de esta ventana · los cambios se reflejan en el semáforo del portero." : "Define una ventana extra · útil para turno vespertino, hermanos que salen juntos o un nivel con horario propio."}</p>
        <Field label="Nombre de la ventana" full><Input value={edit || ""} placeholder="Turno vespertino" /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginTop: 16 }}>
          <Field label="Aplica a"><Select value={edit || "Elige nivel o grupo"} options={["Elige nivel o grupo", "Pre-K + K", "Primaria menor", "Primaria mayor", "Secundaria", "Grupo específico"]} /></Field>
          <Field label="Desde"><Select value={edit ? "14:00" : "16:00"} options={["14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"]} /></Field>
          <Field label="Hasta"><Select value={edit ? "14:30" : "16:30"} options={["14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00"]} /></Field>
        </div>
        <Banner tone="info" style={{ marginTop: 16 }}>Las ventanas van en intervalos de 30 min · Xokai evita que se encimen con las que ya existen.</Banner>
        <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
          <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" icon={edit ? "check" : "plus"} onClick={onClose}>{edit ? "Guardar ventana" : "Agregar ventana"}</Btn>
        </div>
      </div>
    </ModalShell>
  );
}
window.MAddWindow = MAddWindow;

// ---- Add/edit academic level modal ----
function MAddLevel({ onClose, edit }) {
  return (
    <ModalShell width={500} onClose={onClose}>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{edit ? "Editar nivel" : "Agregar nivel"}</h3>
        <p style={{ margin: "6px 0 18px", fontSize: 13, color: "var(--xk-text-secondary)", lineHeight: 1.5 }}>Un nivel agrupa varios grados · cada nivel puede tener sus propios grupos y su ventana de pickup.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label="Nombre del nivel" required full><Input value={edit || ""} placeholder="Bachillerato" /></Field>
          <Field label="Grado inicial"><Select value="1°" options={["Pre-K", "K1", "K2", "1°", "2°", "3°"]} /></Field>
          <Field label="Grado final"><Select value="3°" options={["1°", "2°", "3°", "4°", "5°", "6°"]} /></Field>
          <Field label="Rango de edad"><Input placeholder="15–18 años" /></Field>
          <Field label="Grupos por grado"><Select value="1 grupo (A)" options={["1 grupo (A)", "2 grupos (A, B)", "3 grupos (A, B, C)"]} /></Field>
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
          <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" icon={edit ? "check" : "plus"} onClick={onClose}>{edit ? "Guardar nivel" : "Agregar nivel"}</Btn>
        </div>
      </div>
    </ModalShell>
  );
}
window.MAddLevel = MAddLevel;

// ---- Add/edit calendar period modal (B4) ----
function MAddPeriod({ onClose, edit }) {
  return (
    <ModalShell width={500} onClose={onClose}>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{edit ? "Editar periodo" : "Agregar periodo sin clases"}</h3>
        <p style={{ margin: "6px 0 18px", fontSize: 13, color: "var(--xk-text-secondary)", lineHeight: 1.5 }}>Vacaciones, días festivos o juntas de CTE · se descuentan de los días lectivos del ciclo.</p>
        <Field label="Nombre del periodo" full><Input value={edit || ""} placeholder="Puente de noviembre" /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
          <Field label="Desde"><Input mono value={edit ? "2026-12-21" : ""} placeholder="2026-00-00" /></Field>
          <Field label="Hasta"><Input mono value={edit ? "2027-01-06" : ""} placeholder="2026-00-00" /></Field>
          <Field label="Tipo"><Select value="Vacaciones" options={["Vacaciones", "Día festivo oficial", "Consejo Técnico (CTE)", "Suspensión"]} /></Field>
          <Field label="Aplica a"><Select value="Toda la escuela" options={["Toda la escuela", "Solo un nivel"]} /></Field>
        </div>
        <Banner tone="info" style={{ marginTop: 16 }}>El ciclo tiene 185 días lectivos · agregar este periodo los recalcula automáticamente.</Banner>
        <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
          <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" icon={edit ? "check" : "plus"} onClick={onClose}>{edit ? "Guardar periodo" : "Agregar periodo"}</Btn>
        </div>
      </div>
    </ModalShell>
  );
}
window.MAddPeriod = MAddPeriod;

Object.assign(window, { B0, B1, B2, B3, B4, B5, B6, B7 });