// ============================================================
// flow2b.jsx · IF4 · IA4 · I4 · I5
// ============================================================

function tenantHeaderB(breadcrumb, badge, badgeTone) {
  return { kind: "tenant", breadcrumb, badge, badgeTone: badgeTone || "gray",
    person: { name: window.b("director.full_name"), sub: window.b("director.title"), avatarName: window.b("director.full_name"), color: "var(--tenant-brand)" } };
}

// ---------- IF4 · Familias · revisar (variante) ----------
function IF4({ state = "happy", openModal }) {
  const [resolved, setResolved] = useState(false);
  return (
    <ScreenFrame header={tenantHeaderB(["Centro de carga", "Familias"])} maxWidth={880}>
      <WizardStepper steps={["Plantilla", "Subir", "Mapear", "Revisar", "Importar"]} current={4} style={{ marginBottom: 30 }} />
      <WizardHead title="614 tutores detectados · 287 familias unificadas" subtitle="Xokai agrupó automáticamente los tutores en familias por apellidos y dirección · revisa que las agrupaciones tengan sentido." />
      <KpiGrid style={{ marginBottom: 16 }} items={[
        { label: "Tutores", value: "614", sub: "individuos únicos" },
        { label: "Familias unificadas", value: "287", sub: "promedio 2.1 tutores" },
        { label: "Agrupación dudosa", value: resolved ? "7" : "8", sub: "requieren confirmar", tone: "warning" },
        { label: "Bloqueantes", value: "0" },
      ]} />
      <Banner tone="neutral" icon="info" style={{ marginBottom: 16 }}>
        <strong style={{ color: "var(--xk-text)" }}>Cómo funciona la agrupación:</strong> Xokai considera "misma familia" a tutores con apellido + dirección o teléfono coincidentes. Cada tutor mantiene su email único y su propio acceso · solo se vinculan para compartir alumnos.
      </Banner>
      <Label style={{ marginBottom: 10 }}>Vista por familia · primeras 4 de 287</Label>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <FamilyCard name="Familia Baez Mendoza" badge="2 tutores · 2 alumnos esperados" status={["Confirmado", "success"]}
          members={[{ n: "Ezdraz Baez", r: "padre", e: "ezdrazbaez@gmail.com" }, { n: "Karina Mendoza", r: "madre", e: "karina.m@gmail.com" }]} />
        {/* Ambiguous */}
        <Card style={{ padding: 16, border: resolved ? "1px solid color-mix(in oklab,var(--xk-success) 35%,transparent)" : "1px solid color-mix(in oklab,var(--xk-warning) 40%,transparent)", background: resolved ? "var(--xk-success-tint)" : "var(--xk-warning-tint)" }} className={resolved ? "animate-pulse-success" : ""}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <Icon name="home" size={17} color="var(--xk-text-secondary)" />
            <span style={{ fontSize: 14, fontWeight: 600 }}>Familia García</span>
            <Badge tone={resolved ? "success" : "warning"}>{resolved ? "3 tutores · confirmada" : "3 tutores · ¿misma familia?"}</Badge>
            <span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 500, color: resolved ? "var(--xk-success)" : "var(--xk-warning)" }}>{resolved ? "Confirmado" : "Confirmar"}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
            {[{ n: "Roberto García", r: "padre", note: "misma dirección", w: false }, { n: "Liliana García", r: "madre", note: "misma dirección", w: false }, { n: "Juan García", r: "tío", note: "misma dirección", w: true }].map((m, j) => (
              <div key={j} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <Avatar name={m.n} size={26} color={m.w && !resolved ? "var(--xk-warning)" : null} warn={m.w && !resolved} />
                <div style={{ minWidth: 0 }}><div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" }}>{m.n}</div><div style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>{m.r} · {m.note}</div></div>
              </div>
            ))}
          </div>
          {!resolved && (
            <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
              <Btn variant="primary" size="sm" onClick={() => setResolved(true)}>Sí, son una familia</Btn>
              <Btn variant="secondary" size="sm" onClick={() => setResolved(true)}>Separar a Juan en su propia familia</Btn>
            </div>
          )}
        </Card>
        <FamilyCard name="Familia Hernández Cruz" badge="2 tutores · 1 alumno esperado" status={["Confirmado", "success"]}
          members={[{ n: "Carlos Hernández", r: "padre", e: "carlos.hernandez@empresa.mx" }, { n: "Ana Cruz", r: "madre", e: "ana.cruz@gmail.com" }]} />
        <FamilyCard name="Familia Martínez Pérez" badge="2 tutores · 2 alumnos esperados" status={["Confirmado", "success"]}
          members={[{ n: "Diego Martínez", r: "padre", e: "diego.mp@gmail.com" }, { n: "Sofía Pérez", r: "madre", e: "sofia.perez@gmail.com" }]} />
      </div>
      <button style={{ width: "100%", marginTop: 10, padding: 12, background: "transparent", border: "1px dashed var(--xk-border-strong)", borderRadius: 12, fontSize: 13, color: "var(--xk-text-secondary)", cursor: "pointer" }}>Ver las 283 familias restantes · {resolved ? 6 : 7} dudosas más</button>
      <WizardFooter onBack={() => window.goTo("I0")} next={false}>
        <Btn variant="primary" iconRight="arrow-right" onClick={() => openModal(<MConfirmDestructive title="Importar familias y tutores" description="Se crearán 614 tutores agrupados en 287 familias. Cada tutor recibe su propio acceso." actionLabel="Sí, importar" confirmWord="IMPORTAR" affected={614} onClose={openModal.close} onConfirm={() => { openModal.close(); window.goTo("IA4"); }} />)}>Importar 614 tutores en 287 familias</Btn>
      </WizardFooter>
    </ScreenFrame>
  );
}
function FamilyCard({ name, badge, status, members }) {
  return (
    <Card style={{ padding: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
        <Icon name="home" size={17} color="var(--xk-text-secondary)" />
        <span style={{ fontSize: 14, fontWeight: 600 }}>{name}</span>
        <Badge tone="neutral">{badge}</Badge>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, color: "var(--xk-success)", fontWeight: 500 }}><Icon name="check" size={13} />{status[0]}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {members.map((m, j) => (
          <div key={j} style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <Avatar name={m.n} size={26} />
            <div style={{ minWidth: 0 }}><div style={{ fontSize: 12.5, fontWeight: 600 }}>{m.n} · <span style={{ fontWeight: 400, color: "var(--xk-text-muted)" }}>{m.r}</span></div><div style={{ fontSize: 11, color: "var(--xk-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.e}</div></div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// ---------- IA4 · Alumnos · revisar (variante matching) ----------
function IA4({ state = "happy", openModal }) {
  const [tab, setTab] = useState("problema");
  const [revalidating, setRevalidating] = useState(false);
  const [toast, setToast] = useState(false);
  const cols = [{ w: "1.5fr" }, { w: "0.7fr" }, { w: "1.5fr" }, { w: "1.4fr" }, { w: "36px", align: "right" }];
  const rows = [
    ["Diego Martínez Pérez", "5 años", "K2-A", "mama.diego@gmail.com", "No encontrado en tutores", "warning", true],
    ["Sofía Hernández Cruz", "9 años", "4°-A", "carlos.hernandez@empresa.mx", "No encontrado en tutores", "warning", true],
    ["Vania Baez Mendoza", "8 años", "3°-A", "ezdrazbaez@gmail.com", "Ez Baez · padre", "success", false],
    ["Elián Baez Mendoza", "5 años", "K2-A", "ezdrazbaez@gmail.com", "Ez Baez · padre", "success", false],
  ];
  const shown = tab === "problema" ? rows.filter(r => r[6]) : tab === "listos" ? rows.filter(r => !r[6]) : rows;
  return (
    <ScreenFrame header={tenantHeaderB(["Centro de carga", "Alumnos"], "12 alumnos requieren atención", "warning")} maxWidth={920}>
      <WizardStepper steps={["Plantilla", "Subir", "Mapear", "Revisar", "Importar"]} current={4} style={{ marginBottom: 30 }} />
      <WizardHead title="325 alumnos detectados · 313 listos · 12 necesitan tutor" subtitle="Los alumnos en amarillo no pudieron emparejarse con un tutor cargado. Resuélvelos antes de importar o continúa y los cargas después." />
      <KpiGrid style={{ marginBottom: 16 }} items={[
        { label: "Total", value: "325" },
        { label: "Listos", value: "313", tone: "success" },
        { label: "Sin tutor matching", value: "12", tone: "warning" },
        { label: "Bloqueantes", value: "0" },
      ]} />
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {[["problema", "Ver los 12 con problema"], ["todos", "Ver todos · 325"], ["listos", "Ver listos · 313"]].map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{ padding: "6px 13px", borderRadius: 999, fontSize: 12.5, fontWeight: 500, cursor: "pointer",
            border: tab === k ? "1px solid var(--xk-accent)" : "1px solid var(--xk-border-strong)",
            background: tab === k ? "var(--xk-accent)" : "var(--xk-surface)", color: tab === k ? "#fff" : "var(--xk-text-secondary)" }}>{l}</button>
        ))}
      </div>
      <DataTable columns={[{ label: "Alumno", w: "1.5fr" }, { label: "Edad", w: "0.7fr" }, { label: "Grupo · Tutor (CSV)", w: "1.5fr" }, { label: "Match Xokai", w: "1.4fr" }, { label: "", w: "36px", align: "right" }]}>
        {shown.map((r, i) => (
          <TRow key={i} last={i === shown.length - 1} columns={cols} tint={r[6] ? "var(--xk-warning-tint)" : null}
            cells={[
              <span style={{ fontSize: 13, fontWeight: 500 }}>{r[0]}</span>,
              <span style={{ fontSize: 12.5, color: "var(--xk-text-muted)" }}>{r[1]}</span>,
              <div style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ display: "inline-flex", width: "fit-content", padding: "2px 8px", background: "var(--xk-accent-light)", color: "var(--xk-accent)", borderRadius: 6, fontSize: 11, fontWeight: 600 }}>{r[2]}</span><span className="xk-mono" style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>{r[3]}</span></div>,
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: r[6] ? "var(--xk-warning)" : "var(--xk-success)" }}><Icon name={r[6] ? "alert-triangle" : "check-circle-2"} size={14} />{r[4]}</span>,
              <button onClick={() => r[6] && openModal(<MAssignTutor onClose={openModal.close} student={r[0]} />)} style={{ border: "none", background: "transparent", cursor: "pointer", color: r[6] ? "var(--xk-warning)" : "var(--xk-text-muted)", display: "inline-flex" }}><Icon name={r[6] ? "user-plus" : "more-vertical"} size={15} /></button>,
            ]} />
        ))}
      </DataTable>
      <Banner tone="info" style={{ marginTop: 16 }} title="Tres maneras de resolver los 12 sin tutor">
        <ol style={{ margin: "6px 0 0", paddingLeft: 18, lineHeight: 1.6 }}>
          <li>Importa los alumnos ahora y carga tutores después · se vinculan automáticamente al coincidir emails.</li>
          <li>Vuelve a Tutores, agrega los 12 emails faltantes y regresa aquí · Re-validar detecta el cambio.</li>
          <li>Edita individualmente cada alumno desde el menú · útil si son solo 2-3.</li>
        </ol>
      </Banner>
      <WizardFooter onBack={() => window.goTo("I0")} next={false}>
        <Btn variant="secondary" icon={revalidating ? null : "refresh-cw"} onClick={() => { setRevalidating(true); setTimeout(() => { setRevalidating(false); setToast(true); setTimeout(() => setToast(false), 2400); }, 1400); }}>
          {revalidating ? <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Spinner size={14} />Re-validando…</span> : "Re-validar"}
        </Btn>
        <Btn variant="primary" iconRight="arrow-right" onClick={() => openModal(<MConfirmDestructive title="Importar alumnos listos" description="Se importarán 313 alumnos con tutor confirmado. Los 12 sin tutor quedan pendientes para vincular después." actionLabel="Sí, importar 313" confirmWord="IMPORTAR" affected={313} onClose={openModal.close} onConfirm={() => { openModal.close(); window.goTo("I4"); }} />)}>Importar los 313 listos</Btn>
      </WizardFooter>
      {toast && <Toast>3 alumnos resueltos · 9 siguen sin tutor</Toast>}
    </ScreenFrame>
  );
}
function MAssignTutor({ onClose, student }) {
  return (
    <ModalShell width={460} onClose={onClose}>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>Asignar tutor</h3>
        <p style={{ margin: "6px 0 18px", fontSize: 13, color: "var(--xk-text-secondary)" }}>{student}</p>
        <Field label="Buscar tutor cargado"><Input placeholder="Nombre o email del tutor…" /></Field>
        <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
          <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" onClick={onClose}>Vincular tutor</Btn>
        </div>
      </div>
    </ModalShell>
  );
}
window.MAssignTutor = MAssignTutor;

// ---------- I4 · Conceptos de cobro ----------
function I4({ state = "happy", openModal }) {
  const [toast, setToast] = useState(false);
  const concepts = [
    { icon: "school", bg: "#FBEAF0", color: "#D4537E", name: "Inscripción anual", freq: "Una vez al ciclo", amount: "8,500", due: "Antes del 15 ago", applies: "Todos los alumnos" },
    { icon: "calendar", bg: "var(--xk-accent-light)", color: "var(--xk-accent)", name: "Colegiatura · Pre-K + K", freq: "Mensual · 10 meses", amount: "6,800", due: "Día 5 del mes", applies: "Por nivel · PK + K" },
    { icon: "calendar", bg: "var(--xk-accent-light)", color: "var(--xk-accent)", name: "Colegiatura · Primaria", freq: "Mensual · 10 meses", amount: "8,200", due: "Día 5 del mes", applies: "Por nivel · Primaria" },
    { icon: "calendar", bg: "var(--xk-accent-light)", color: "var(--xk-accent)", name: "Colegiatura · Secundaria", freq: "Mensual · 10 meses", amount: "9,500", due: "Día 5 del mes", applies: "Por nivel · Secundaria" },
    { icon: "palette", bg: "var(--xk-warning-tint)", color: "var(--xk-warning)", name: "Materiales y ateliers", freq: "Trimestral", amount: "1,500", due: "Inicio de trimestre", applies: "Todos" },
    { icon: "wrench", bg: "var(--xk-success-tint)", color: "var(--xk-success)", name: "Cuota de mantenimiento", freq: "Anual", amount: "2,800", due: "Antes del 15 ago", applies: "Todos" },
  ];
  return (
    <ScreenFrame header={tenantHeaderB(["Centro de carga", "Conceptos de cobro"])} maxWidth={980}>
      <WizardHead title={"Conceptos de cobro de " + window.b("school.short_name")} subtitle={"Pre-llenamos con el template estándar de escuelas " + window.b("school.pedagogy") + " · ajusta los montos a los de " + window.b("school.short_name") + " y agrega lo que falte."} />
      <Banner tone="purple" icon="sparkles" style={{ marginBottom: 16 }}>
        <strong style={{ color: "var(--xk-text)" }}>Template {window.b("school.pedagogy")} aplicado</strong> · 6 conceptos típicos cargados con montos de referencia · cambia los valores cuando sepas los de {window.b("school.short_name")}, no urge tenerlos exactos hoy.
      </Banner>
      <Label style={{ marginBottom: 10 }}>Conceptos activos</Label>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {concepts.map((c, i) => (
          <Card key={i} style={{ padding: "13px 16px", display: "grid", gridTemplateColumns: "auto 1.6fr 1.1fr 1.2fr 1.2fr 32px", alignItems: "center", gap: 14 }}>
            <IconBox icon={c.icon} size={36} bg={c.bg} color={c.color} iconSize={17} />
            <div><div style={{ fontSize: 13.5, fontWeight: 600 }}>{c.name}</div><div style={{ fontSize: 11.5, color: "var(--xk-text-muted)" }}>{c.freq}</div></div>
            <div><div className="xk-overline" style={{ fontSize: 9.5, marginBottom: 4 }}>Monto MXN</div><div style={{ display: "flex", alignItems: "center", gap: 4 }}><span style={{ fontSize: 13, color: "var(--xk-text-muted)" }}>$</span><input className="xk-input" defaultValue={c.amount} style={{ height: 30, fontFamily: "var(--xk-font-mono)", fontWeight: 600, padding: "0 8px" }} /></div></div>
            <div><div className="xk-overline" style={{ fontSize: 9.5, marginBottom: 4 }}>Vencimiento</div><div style={{ fontSize: 12.5 }}>{c.due}</div></div>
            <div><div className="xk-overline" style={{ fontSize: 9.5, marginBottom: 4 }}>Aplica a</div><div style={{ fontSize: 12.5 }}>{c.applies}</div></div>
            <button onClick={() => openModal(<MConfirmDestructive title="Eliminar concepto" description={"Se eliminará \"" + c.name + "\" · 14 familias serán afectadas y dejarán de verlo en su estado de cuenta."} actionLabel="Sí, eliminar" onClose={openModal.close} onConfirm={openModal.close} />)} className="xk-iconbtn"><Icon name="more-vertical" size={16} /></button>
          </Card>
        ))}
      </div>
      <button onClick={() => openModal(<MAddConcept 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 }}>+ Agregar concepto · transporte, idiomas extra, eventos, etc.</button>
      <Label style={{ margin: "22px 0 10px" }}>Descuentos disponibles</Label>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {[{ t: "Hermanos", d: "10% sobre la colegiatura del menor", on: true }, { t: "Pronto pago", d: "5% si paga antes del día 1", on: false }].map((d, i) => (
          <Card key={i} style={{ padding: 14, display: "flex", alignItems: "center", gap: 12, opacity: d.on ? 1 : 0.72 }}>
            <IconBox icon="badge-percent" size={34} bg={d.on ? "var(--xk-accent-light)" : "var(--xk-surface-2)"} color={d.on ? "var(--xk-accent)" : "var(--xk-text-muted)"} iconSize={16} />
            <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600 }}>{d.t}</div><div style={{ fontSize: 12, color: "var(--xk-text-muted)" }}>{d.d}</div></div>
            <Badge tone={d.on ? "success" : "gray"} dot={d.on}>{d.on ? "ACTIVO" : "DESACTIVADO"}</Badge>
          </Card>
        ))}
      </div>
      <WizardFooter backLabel="Centro de carga" onBack={() => window.goTo("I0")} saveLabel="Guardar borrador" next={false}>
        <Btn variant="primary" icon="check" onClick={() => { setToast(true); setTimeout(() => { setToast(false); window.goTo("I5"); }, 1400); }}>Guardar conceptos</Btn>
      </WizardFooter>
      {toast && <Toast>6 conceptos guardados</Toast>}
    </ScreenFrame>
  );
}
function MAddConcept({ onClose }) {
  return (
    <ModalShell width={520} onClose={onClose}>
      <div style={{ padding: 24 }}>
        <h3 style={{ margin: "0 0 18px", fontSize: 16, fontWeight: 600 }}>Agregar concepto de cobro</h3>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label="Nombre del concepto" full><Input placeholder="Transporte mensual" /></Field>
          <Field label="Monto MXN"><Input mono placeholder="0" /></Field>
          <Field label="Frecuencia"><Select value="Mensual" options={["Mensual", "Trimestral", "Anual", "Una vez al ciclo"]} /></Field>
          <Field label="Vencimiento"><Input placeholder="Día 5 del mes" /></Field>
          <Field label="Aplica a"><Select value="Todos los alumnos" options={["Todos los alumnos", "Por nivel", "Por grupo"]} /></Field>
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
          <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" onClick={onClose}>Agregar concepto</Btn>
        </div>
      </div>
    </ModalShell>
  );
}
window.MAddConcept = MAddConcept;

// ---------- I5 · Activación masiva ----------
function I5({ state = "happy", openModal }) {
  const [sent, setSent] = useState(false);
  const [when, setWhen] = useState("ahora");
  if (sent || state === "sent") {
    return (
      <ScreenFrame header={tenantHeaderB(["Centro de carga", "Activación"])} maxWidth={760}>
        <CelebrationHero variant="soft" icon="mail-check" confettiCount={16} title="614 invitaciones enviadas" subtitle={window.b("school.short_name") + " está viva · los tutores reciben su acceso en los próximos 5 minutos."} />
        <div className="animate-fade-up" style={{ animationDelay: "0.15s", marginTop: 26 }}>
          <KpiGrid items={[{ label: "Enviadas", value: "614", tone: "success" }, { label: "Entregadas", value: "611", tone: "success" }, { label: "Rebotadas", value: "3", tone: "warning" }, { label: "Abiertas", value: "—", sub: "actualiza en 48 h" }]} />
        </div>
        <div className="animate-fade-up" style={{ animationDelay: "0.45s", marginTop: 22 }}>
          <Btn variant="primary" size="lg" full iconRight="arrow-right" onClick={() => window.goTo("I0")}>Entrar al dashboard de {window.b("school.short_name")}</Btn>
        </div>
      </ScreenFrame>
    );
  }
  return (
    <ScreenFrame header={tenantHeaderB(["Centro de carga", "Activación"])} maxWidth={780}>
      <CelebrationHero variant="soft" icon="rocket" confettiCount={14} title={window.b("school.short_name") + " está lista para arrancar"} subtitle="Las 5 categorías están cargadas · solo falta abrir la puerta a las familias."
        summary={[
          { icon: "check-circle-2", label: "5 de 5 categorías listas" },
          { icon: "calendar-check", label: "ciclo 26–27 configurado" },
          { icon: "mail", label: "magic link listo" },
        ]} />
      <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 22 }}>
        <KpiGrid cols={5} items={[
          { label: "Personal", value: "28", tone: "success" },
          { label: "Tutores", value: "614", tone: "success" },
          { label: "Alumnos", value: "325", tone: "success" },
          { label: "Conceptos", value: "6", tone: "success" },
          { label: "Calendario", value: "185 d", tone: "success" },
        ]} />
        <div>
          <Eyebrow>Activación · invitar a las familias</Eyebrow>
          <Card style={{ padding: 20 }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
              <IconBox icon="mail" size={42} iconSize={20} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Magic link masivo a 614 tutores</div>
                <div style={{ fontSize: 12.5, color: "var(--xk-text-secondary)", marginTop: 3, lineHeight: 1.5 }}>Cada padre/tutor recibe un email branded con su acceso · sin password · entra desde su celular.</div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
              <Field label="¿Cuándo?"><Select value={when === "ahora" ? "Enviar ahora" : "Programar"} options={["Enviar ahora", "Programar"]} onChange={e => setWhen(e.target.value === "Programar" ? "programar" : "ahora")} /></Field>
              <Field label="Cadencia de recordatorio"><Select value="Re-enviar a quien no abra en 48 h" options={["Re-enviar a quien no abra en 48 h", "Sin recordatorio", "Re-enviar en 24 h"]} /></Field>
            </div>
            {when === "programar" && <div style={{ marginTop: 14 }}><Field label="Fecha y hora de envío"><Input mono value="2026-06-15 08:00" /></Field></div>}
          </Card>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", marginBottom: 10 }}>
            <Eyebrow style={{ marginBottom: 0 }}>Vista previa del email</Eyebrow>
            <button onClick={() => openModal(<MPreviewEmail onClose={openModal.close} branded={true} />)} style={{ marginLeft: "auto", border: "none", background: "transparent", cursor: "pointer", fontSize: 12, color: "var(--xk-accent)", fontWeight: 500 }}>Ver a tamaño completo →</button>
          </div>
          <div onClick={() => openModal(<MPreviewEmail onClose={openModal.close} branded={true} />)} style={{ cursor: "pointer" }}><EmailMock branded={true} /></div>
        </div>
        <Banner tone="warning" icon="alert-circle"><strong style={{ color: "var(--xk-text)" }}>Esto es irreversible una vez enviado</strong> · los 614 tutores recibirán el email en los próximos 5 minutos · si necesitas detener el envío, escribe a hola@xokai.app inmediatamente.</Banner>
        <div>
          <Btn variant="primary" size="lg" full icon="send" onClick={() => openModal(<MConfirmDestructive title="Enviar magic link a 614 tutores" description="Esto enviará 614 emails branded y no se puede revertir. Cada tutor recibe su acceso personal." actionLabel="Sí, enviar ahora" confirmWord="ENVIAR" affected={614} onClose={openModal.close} onConfirm={() => { openModal.close(); setSent(true); }} />)}>Enviar magic link a 614 tutores ahora</Btn>
          <div style={{ textAlign: "center", marginTop: 12 }}><button style={{ border: "none", background: "transparent", cursor: "pointer", fontSize: 12.5, color: "var(--xk-text-secondary)" }}>Mejor lo dejo para mañana</button></div>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ---------- PRIV · Centro de Privacidad (derechos ARCO · LFPDPPP) ----------
function PrivacyCenter({ state = "happy", openModal }) {
  const [toast, setToast] = useState(null);
  const arco = [
    { icon: "eye", t: "Acceder a mis datos", d: "Consulta qué datos personales tiene Xokai sobre ti y tu familia." },
    { icon: "pencil", t: "Rectificar", d: "Corrige datos inexactos o desactualizados de tu perfil." },
    { icon: "trash-2", t: "Cancelar / eliminar", d: "Solicita que se eliminen tus datos cuando ya no sean necesarios." },
    { icon: "ban", t: "Oponerme al tratamiento", d: "Limita el uso de tus datos para fines específicos." },
  ];
  return (
    <ScreenFrame header={tenantHeaderB(["Perfil", "Privacidad"])} maxWidth={840}>
      <WizardHead title="Tu privacidad y tus datos" subtitle="Ejerce tus derechos ARCO sobre los datos personales que resguarda tu institución educativa, conforme a la Ley Federal de Protección de Datos Personales (LFPDPPP)." />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {arco.map((a, i) => (
          <Card key={i} style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <IconBox icon={a.icon} size={40} iconSize={20} />
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>{a.t}</div>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--xk-text-secondary)", lineHeight: 1.5, flex: 1 }}>{a.d}</div>
            <Btn variant="secondary" full onClick={() => { setToast(a.t); setTimeout(() => setToast(null), 2400); }}>Solicitar</Btn>
          </Card>
        ))}
      </div>
      <Card style={{ padding: 18, marginTop: 12, display: "flex", alignItems: "center", gap: 14 }}>
        <IconBox icon="download" size={42} iconSize={20} bg="var(--xk-accent-light)" color="var(--xk-accent)" />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600 }}>Descargar todos mis datos</div>
          <div style={{ fontSize: 12.5, color: "var(--xk-text-secondary)", marginTop: 2 }}>Exporta una copia de tu información personal en un archivo descargable.</div>
        </div>
        <Btn variant="primary" icon="download" onClick={() => { setToast("Exportación"); setTimeout(() => setToast(null), 2400); }}>Exportar</Btn>
      </Card>
      <div style={{ display: "flex", gap: 10, marginTop: 18, padding: "13px 16px", background: "var(--xk-surface-2)", borderRadius: 12, fontSize: 12, color: "var(--xk-text-secondary)", lineHeight: 1.5 }}>
        <Icon name="info" size={15} color="var(--xk-text-muted)" style={{ marginTop: 1, flexShrink: 0 }} />
        <span>Las solicitudes se procesan en coordinación con tu institución educativa · respuesta en 20 días hábiles, conforme a la LFPDPPP.</span>
      </div>
      <PrivacyFooter />
      {toast && <Toast icon="check">Solicitud enviada · {toast}</Toast>}
    </ScreenFrame>
  );
}

Object.assign(window, { IF4, IA4, I4, I5, PrivacyCenter });