// ============================================================
// patterns.jsx · Headers, wizard chrome, celebration, iPhone mock
// ============================================================

// ---- PATTERN 1 · Wizard stepper ----
function WizardStepper({ steps, current, style }) {
  // current = 1-indexed active step
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 0, ...style }}>
      {steps.map((label, i) => {
        const n = i + 1;
        const done = n < current, active = n === current;
        const circleBg = done || active ? "var(--xk-accent)" : "var(--xk-surface)";
        const circleFg = done || active ? "#fff" : "var(--xk-text-muted)";
        return (
          <React.Fragment key={i}>
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              <span style={{ width: 26, height: 26, borderRadius: 999, background: circleBg, color: circleFg,
                border: done || active ? "none" : "1px solid var(--xk-border-strong)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 12, fontWeight: 500, fontFamily: "var(--xk-font-mono)", flexShrink: 0,
                transition: "background 200ms ease" }}>
                {done ? <Icon name="check" size={14} /> : n}
              </span>
              <span style={{ fontSize: 12.5, fontWeight: active ? 600 : 500,
                color: active ? "var(--xk-text)" : done ? "var(--xk-text-secondary)" : "var(--xk-text-muted)",
                whiteSpace: "nowrap" }}>{label}</span>
            </div>
            {i < steps.length - 1 && (
              <span style={{ flex: "0 1 40px", minWidth: 16, height: 1, margin: "0 12px",
                background: n < current ? "var(--xk-accent)" : "var(--xk-border-strong)" }}></span>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}
window.WizardStepper = WizardStepper;

// ---- PATTERN 2 · Wizard footer ----
function WizardFooter({ back, backLabel = "← Atrás", onBack, saveLabel, onSave, next, nextLabel, nextIcon = "arrow-right", nextVariant = "primary", onNext, nextDisabled, leftNote, children }) {
  const handleBack = onBack || window.goBack;
  const handleNext = onNext || window.goNext;
  return (
    <React.Fragment>
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 26, paddingTop: 20, borderTop: "1px solid var(--xk-border)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        {back !== false && <Btn variant="secondary" onClick={handleBack}>{backLabel}</Btn>}
        {leftNote && <span style={{ fontSize: 11.5, color: "var(--xk-text-muted)" }}>{leftNote}</span>}
      </div>
      <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
        {saveLabel && <Btn variant="ghost" onClick={onSave}>{saveLabel}</Btn>}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        {children}
        {next !== false && <Btn variant={nextVariant} iconRight={nextIcon} onClick={handleNext} disabled={nextDisabled}>{nextLabel}</Btn>}
      </div>
    </div>
    <PrivacyFooter />
    </React.Fragment>
  );
}
window.WizardFooter = WizardFooter;

// ---- Global privacy links (LFPDPPP) — discreet footer line ----
function PrivacyFooter({ style }) {
  const link = { color: "var(--xk-text-muted)", textDecoration: "none", cursor: "pointer" };
  return (
    <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 14, fontSize: 11, color: "var(--xk-text-muted)", ...style }}>
      <a href="#" onClick={e => e.preventDefault()} style={link}>Aviso de privacidad</a>
      <span aria-hidden>·</span>
      <a href="#" onClick={e => e.preventDefault()} style={link}>Términos</a>
    </div>
  );
}
window.PrivacyFooter = PrivacyFooter;

// ============================================================
// SCREEN FRAME · headers per context
// ============================================================
function ScreenHeader({ kind, breadcrumb, badge, badgeTone = "purple", person }) {
  // kind: "xokai-sysadmin" | "xokai-director" | "tenant" | "minimal-xokai"
  const isTenant = kind === "tenant";
  return (
    <header style={{ height: 56, flexShrink: 0, display: "flex", alignItems: "center", gap: 14, padding: "0 24px",
      background: "var(--xk-surface)", borderBottom: "1px solid var(--xk-border)" }}>
      {isTenant ? <TenantLogo size={28} withName /> : <XokaiLockup size={26} />}
      {kind === "xokai-director" && <span style={{ fontSize: 13, color: "var(--xk-text-muted)" }}>· configuración inicial</span>}
      {isTenant && <span style={{ fontSize: 13, color: "var(--xk-text-muted)" }}>· admin</span>}
      {breadcrumb && (
        <nav style={{ display: "flex", alignItems: "center", gap: 7, marginLeft: 6, fontSize: 12.5, color: "var(--xk-text-muted)" }}>
          {breadcrumb.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <Icon name="chevron-right" size={13} />}
              <span style={{ color: i === breadcrumb.length - 1 ? "var(--xk-text-secondary)" : "var(--xk-text-muted)", fontWeight: i === breadcrumb.length - 1 ? 500 : 400 }}>{c}</span>
            </React.Fragment>
          ))}
        </nav>
      )}
      <div style={{ flex: 1 }}></div>
      {badge && <Badge tone={badgeTone}>{badge}</Badge>}
      {person && (
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <div style={{ textAlign: "right", lineHeight: 1.3 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>{person.name}</div>
            {person.sub && <div style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>{person.sub}</div>}
          </div>
          <Avatar name={person.avatarName || person.name} size={32} color={person.color} />
        </div>
      )}
    </header>
  );
}
window.ScreenHeader = ScreenHeader;

// Full screen scaffold: header + scrollable body, centered max-width content
function ScreenFrame({ header, children, maxWidth = 880, pad = 36, bg = "var(--xk-bg)" }) {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: bg, overflow: "hidden" }}>
      {header && <ScreenHeader {...header} />}
      <div className="no-scrollbar" style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ maxWidth, margin: "0 auto", padding: pad }}>
          {children}
        </div>
      </div>
    </div>
  );
}
window.ScreenFrame = ScreenFrame;

// Wizard heading block (eyebrow + h + subtitle) — no duplication with stepper
function WizardHead({ eyebrow, eyebrowTone, title, subtitle }) {
  return (
    <div className="animate-fade-up" style={{ marginBottom: 24 }}>
      {eyebrow && <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: eyebrowTone || "var(--xk-text-muted)", marginBottom: 8 }}>{eyebrow}</div>}
      <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.15 }}>{title}</h1>
      {subtitle && <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--xk-text-secondary)", lineHeight: 1.55, maxWidth: 620 }}>{subtitle}</p>}
    </div>
  );
}
window.WizardHead = WizardHead;

// ============================================================
// PATTERN 4 · Celebration
// ============================================================
const CONFETTI_COLORS = ["var(--tenant-brand)", "#FFFFFF", "var(--xk-success)", "var(--xk-warning)", "var(--xokai-purple-light)"];
const CONFETTI_PURPLE = ["var(--xokai-purple)", "var(--xokai-purple-light)", "var(--xk-accent-medium)", "var(--xk-warning)", "#FFFFFF"];
function Confetti({ count = 14, colors }) {
  const palette = colors || CONFETTI_COLORS;
  const pieces = Array.from({ length: count }, (_, i) => i);
  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", borderRadius: "inherit" }}>
      {pieces.map(i => (
        <span key={i} className="confetti-piece" style={{
          left: (4 + (i * 92 / count) + (i % 3) * 4) + "%",
          background: palette[i % palette.length],
          animationDelay: (0.1 + (i % 7) * 0.28).toFixed(2) + "s",
          animationDuration: (2.6 + (i % 4) * 0.4).toFixed(2) + "s",
          transform: "rotate(" + (i * 36) + "deg)",
        }}></span>
      ))}
    </div>
  );
}
window.Confetti = Confetti;

// Animated check inside a circle
function CheckCircle({ size = 84, ring = true, bg = "rgba(255,255,255,0.18)", stroke = "#fff", border }) {
  return (
    <span className={"animate-hero-in " + (ring ? "animate-pulse-ring" : "")} style={{
      width: size, height: size, borderRadius: 999, background: bg,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      border: border || "none" }}>
      <svg width={size * 0.5} height={size * 0.5} viewBox="0 0 52 52">
        <path d="M14 27 l8 8 l16 -18" fill="none" stroke={stroke} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"
          style={{ strokeDasharray: 60, strokeDashoffset: 0, animation: "check-draw 0.6s 0.3s ease both" }} />
      </svg>
    </span>
  );
}
window.CheckCircle = CheckCircle;

// Hero celebration band (purple solid or soft gradient)
function CelebrationHero({ variant = "soft", icon = "check", title, subtitle, summary, confettiCount = 14, children }) {
  const purple = variant === "purple";
  const soft = variant === "soft";
  const chipBg = purple ? "rgba(255,255,255,0.14)" : "var(--xk-surface)";
  const chipFg = purple ? "#fff" : "var(--xk-text-secondary)";
  const chipIcon = purple ? "#fff" : "var(--xk-accent)";
  const chipBorder = purple ? "1px solid rgba(255,255,255,0.22)" : "1px solid var(--xk-border)";
  return (
    <div className="animate-fade-up" style={{ position: "relative", overflow: "hidden", borderRadius: 16, padding: "44px 32px 38px", textAlign: "center",
      background: purple ? "var(--xokai-purple)" : "linear-gradient(180deg, var(--xokai-purple-light), var(--xk-surface))",
      color: purple ? "#fff" : "var(--xk-text)",
      border: soft ? "1px solid var(--xk-border)" : "none" }}>
      <Confetti count={confettiCount} colors={purple ? undefined : CONFETTI_PURPLE} />
      <div style={{ position: "relative" }}>
        {icon === "check"
          ? (purple
              ? <CheckCircle size={88} ring bg="rgba(255,255,255,0.16)" stroke="#fff" />
              : <CheckCircle size={88} ring bg="var(--xk-accent-light)" stroke="var(--xk-accent)" border={"1px solid color-mix(in oklab, var(--xk-accent) 30%, transparent)"} />)
          : <IconCircle icon={icon} size={88} purple={purple} />}
        <h1 style={{ margin: "20px 0 0", fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em" }}>{title}</h1>
        {subtitle && <p style={{ margin: "8px auto 0", fontSize: 14, maxWidth: 460, lineHeight: 1.55, opacity: purple ? 0.92 : 0.85, color: purple ? "rgba(255,255,255,0.92)" : "var(--xk-text-secondary)" }}>{subtitle}</p>}
        {summary && summary.length > 0 && (
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", marginTop: 18 }}>
            {summary.map((s, i) => (
              <span key={i} className="animate-fade-up" style={{ animationDelay: (0.15 + i * 0.08) + "s",
                display: "inline-flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 999,
                background: chipBg, color: chipFg, border: chipBorder, fontSize: 12.5, fontWeight: 500, backdropFilter: purple ? "blur(2px)" : "none" }}>
                <Icon name={s.icon} size={14} color={chipIcon} />
                {s.value && <strong style={{ color: purple ? "#fff" : "var(--xk-text)", fontFamily: s.mono ? "var(--xk-font-mono)" : "inherit" }}>{s.value}</strong>}
                {s.label}
              </span>
            ))}
          </div>
        )}
        {children}
      </div>
    </div>
  );
}
window.CelebrationHero = CelebrationHero;

// Contextual icon medallion (animated scale-in + ring)
function IconCircle({ icon, size = 88, purple }) {
  return (
    <span className="animate-hero-in animate-pulse-ring" style={{
      width: size, height: size, borderRadius: 999,
      background: purple ? "rgba(255,255,255,0.16)" : "var(--xk-accent-light)",
      border: purple ? "none" : "1px solid color-mix(in oklab, var(--xk-accent) 30%, transparent)",
      display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
      <Icon name={icon} size={Math.round(size * 0.42)} color={purple ? "#fff" : "var(--xk-accent)"} stroke={1.75} />
    </span>
  );
}
window.IconCircle = IconCircle;

// Rocket hero (for I5 — serious moment, no confetti)
function RocketHero({ title, subtitle }) {
  return (
    <div className="animate-fade-up" style={{ position: "relative", overflow: "hidden", borderRadius: 16, padding: "44px 32px 38px", textAlign: "center", background: "var(--xokai-purple)", color: "#fff" }}>
      <span className="animate-hero-in animate-pulse-ring" style={{ width: 88, height: 88, borderRadius: 999, background: "rgba(255,255,255,0.16)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name="rocket" size={40} color="#fff" />
      </span>
      <h1 style={{ margin: "20px 0 0", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>{title}</h1>
      {subtitle && <p style={{ margin: "8px auto 0", fontSize: 14, maxWidth: 480, lineHeight: 1.55, color: "rgba(255,255,255,0.9)" }}>{subtitle}</p>}
    </div>
  );
}
window.RocketHero = RocketHero;

// ============================================================
// iPhone mock (for B2 preview) — branded tenant
// ============================================================
function IPhoneMock({ width = 184 }) {
  const brand = "var(--tenant-brand)";
  const h = width * 2.04;
  return (
    <div style={{ width, height: h, borderRadius: 30, background: "#0F0E0C", padding: 7, boxShadow: "var(--xk-shadow-lg)", flexShrink: 0 }}>
      <div className="no-scrollbar" style={{ width: "100%", height: "100%", borderRadius: 24, background: "var(--xk-bg)", overflow: "hidden", position: "relative" }}>
        {/* notch */}
        <div style={{ position: "absolute", top: 6, left: "50%", transform: "translateX(-50%)", width: 56, height: 16, background: "#0F0E0C", borderRadius: 999, zIndex: 2 }}></div>
        {/* status + header */}
        <div style={{ padding: "10px 14px 12px", background: "var(--xk-surface)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9, fontFamily: "var(--xk-font-mono)", color: "var(--xk-text-muted)", marginBottom: 12 }}><span>9:41</span><span>5G ▪▪▪</span></div>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <TenantLogo size={22} />
            <div style={{ flex: 1, minWidth: 0, lineHeight: 1.15 }}>
              <div style={{ fontWeight: 600, fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{window.b("school.name")}</div>
              <div style={{ fontSize: 8.5, color: "var(--xk-text-muted)" }}>Guadalajara, Jalisco</div>
            </div>
            {/* bell with brand-colored notification dot */}
            <span style={{ position: "relative", width: 26, height: 26, borderRadius: 999, border: "1px solid var(--xk-border)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="bell" size={13} color="var(--xk-text-secondary)" />
              <span style={{ position: "absolute", top: 4, right: 5, width: 6, height: 6, borderRadius: 999, background: brand, border: "1.5px solid white" }}></span>
            </span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 10 }}>Hola, {window.b("guardian.first_name")}</div>
          <div style={{ fontSize: 10, color: "var(--xk-text-muted)", marginTop: 1 }}>Tienes 2 cosas urgentes hoy.</div>
        </div>
        {/* quick tiles · unread counts use brand color */}
        <div style={{ padding: "0 12px" }}>
          <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
            {[{ icon: "car-front", t: "Pickup", s: "2:30 pm", n: null }, { icon: "credit-card", t: "Pagos", s: "$22,570", n: 1 }, { icon: "message-square", t: "Avisos", s: "nuevos", n: 4 }].map((q, i) => (
              <div key={i} style={{ flex: 1, position: "relative", border: "1px solid var(--xk-border)", borderRadius: 9, padding: "8px 6px" }}>
                <Icon name={q.icon} size={13} color={brand} />
                {q.n && <span style={{ position: "absolute", top: 5, right: 5, minWidth: 13, height: 13, padding: "0 3px", borderRadius: 999, background: brand, color: "#fff", fontSize: 8, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--xk-font-mono)" }}>{q.n}</span>}
                <div style={{ fontSize: 9.5, fontWeight: 600, marginTop: 5 }}>{q.t}</div>
                <div style={{ fontSize: 8, color: "var(--xk-text-muted)" }}>{q.s}</div>
              </div>
            ))}
          </div>
          {/* bandeja items with brand unread dot */}
          {[{ icon: "cake", t: "Mother's Day", s: "Urgente · confirmar", urgent: true }, { icon: "receipt", t: "Colegiatura mayo", s: "$22,570 · vence 5 jun", urgent: false }].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 2px", borderBottom: "1px solid var(--xk-border)", position: "relative" }}>
              <IconBox icon={r.icon} size={26} bg={r.urgent ? "var(--xk-warning-tint)" : "color-mix(in oklab, var(--tenant-brand) 14%, white)"} color={r.urgent ? "var(--xk-warning)" : brand} radius={8} iconSize={14} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 600 }}>{r.t}</div>
                <div style={{ fontSize: 9, color: "var(--xk-text-muted)" }}>{r.s}</div>
              </div>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: brand, flexShrink: 0 }}></span>
            </div>
          ))}
        </div>
        {/* tab bar */}
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 46, background: "var(--xk-surface)", borderTop: "1px solid var(--xk-border)", display: "flex", alignItems: "center", justifyContent: "space-around", paddingBottom: 4 }}>
          {["home", "calendar", "message-square", "user"].map((ic, i) => (
            <Icon key={i} name={ic} size={17} color={i === 0 ? brand : "var(--xk-text-muted)"} />
          ))}
        </div>
      </div>
    </div>
  );
}
window.IPhoneMock = IPhoneMock;

// ============================================================
// Pickup phone mocks · branded (papá + portero), compact
// ============================================================
function PickupPhoneShell({ width = 156, title, children }) {
  return (
    <div style={{ width, borderRadius: 26, background: "#0F0E0C", padding: 6, boxShadow: "var(--xk-shadow-lg)", flexShrink: 0 }}>
      <div className="no-scrollbar" style={{ width: "100%", borderRadius: 20, background: "var(--xk-bg)", overflow: "hidden", position: "relative" }}>
        <div style={{ position: "absolute", top: 5, left: "50%", transform: "translateX(-50%)", width: 44, height: 13, background: "#0F0E0C", borderRadius: 999, zIndex: 2 }}></div>
        <div style={{ padding: "9px 12px 5px", background: "var(--xk-surface)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 8, fontFamily: "var(--xk-font-mono)", color: "var(--xk-text-muted)", marginBottom: 9 }}><span>14:12</span><span>5G ▪▪</span></div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <TenantLogo size={18} />
            <span style={{ fontSize: 10.5, fontWeight: 600 }}>{title}</span>
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}
// Parent view — traffic-light "tu turno" state
function PickupPhonePapa({ width = 156 }) {
  const brand = "var(--tenant-brand)";
  return (
    <PickupPhoneShell width={width} title={window.b("school.short_name")}>
      <div style={{ padding: "10px 12px 16px" }}>
        <div style={{ fontSize: 9.5, color: "var(--xk-text-secondary)", marginBottom: 8 }}>Hola {window.b("guardian.first_name")},</div>
        {/* semáforo card */}
        <div style={{ background: brand, color: "#fff", borderRadius: 12, padding: "12px 12px 13px", textAlign: "center" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 8, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.92, marginBottom: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "#fff" }} className="animate-pulse-ring"></span>Tu ventana
          </div>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: "var(--xk-font-mono)", letterSpacing: "-0.03em", lineHeight: 1 }}>14:30</div>
          <div style={{ fontSize: 9, opacity: 0.9, marginTop: 4 }}>Vania · 3°-A · Primaria mayor</div>
          <div style={{ marginTop: 9, padding: "5px 0", background: "rgba(255,255,255,0.18)", borderRadius: 7, fontSize: 9.5, fontWeight: 600 }}>Llega en 18 min</div>
        </div>
        {/* status rows */}
        <div style={{ marginTop: 9, display: "flex", flexDirection: "column", gap: 7 }}>
          {[["check", "Acceso autorizado", "var(--xk-success)"], ["car", "Avísanos al llegar", "var(--xk-text-muted)"]].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 9.5, color: "var(--xk-text-secondary)" }}>
              <Icon name={r[0]} size={12} color={r[2]} />{r[1]}
            </div>
          ))}
        </div>
      </div>
    </PickupPhoneShell>
  );
}
// Porter view — live queue
function PickupPhonePortero({ width = 156 }) {
  const brand = "var(--tenant-brand)";
  const queue = [
    { n: "Vania Baez", g: "3°-A", t: "Ez Baez", ok: true, active: true },
    { n: "Diego Solís", g: "2°-A", t: "Ana Solís", ok: true },
    { n: "Mía Rentería", g: "1°-B", t: "Tío · sin permiso", ok: false },
  ];
  return (
    <PickupPhoneShell width={width} title="Pickup · en vivo">
      <div style={{ padding: "9px 11px 16px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 9px", background: "color-mix(in oklab, var(--tenant-brand) 12%, white)", borderRadius: 8, marginBottom: 9 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: brand, flexShrink: 0 }}></span>
          <div style={{ fontSize: 9, lineHeight: 1.3 }}><div style={{ fontWeight: 700 }}>Primaria mayor</div><div style={{ color: "var(--xk-text-muted)" }}>14:30 – 15:00 · ahora</div></div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {queue.map((q, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 7px", borderRadius: 8, background: q.active ? "var(--xk-surface)" : "transparent", border: q.active ? "1px solid var(--xk-border)" : "1px solid transparent" }}>
              <Avatar name={q.n} size={20} color={q.ok ? null : "var(--xk-warning)"} warn={!q.ok} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 9, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{q.n} · {q.g}</div>
                <div style={{ fontSize: 8, color: q.ok ? "var(--xk-text-muted)" : "var(--xk-warning)" }}>{q.t}</div>
              </div>
              <Icon name={q.ok ? "check-circle-2" : "alert-triangle"} size={13} color={q.ok ? "var(--xk-success)" : "var(--xk-warning)"} />
            </div>
          ))}
        </div>
      </div>
    </PickupPhoneShell>
  );
}
Object.assign(window, { PickupPhonePapa, PickupPhonePortero });


// ---- Data table helper ----
function DataTable({ columns, children, style }) {
  return (
    <div style={{ border: "1px solid var(--xk-border)", borderRadius: 12, overflow: "hidden", ...style }}>
      <div style={{ display: "grid", gridTemplateColumns: columns.map(c => c.w || "1fr").join(" "), gap: 0,
        padding: "9px 16px", background: "var(--xk-surface-2)", borderBottom: "1px solid var(--xk-border)" }}>
        {columns.map((c, i) => (
          <div key={i} className="xk-overline" style={{ fontSize: 10, textAlign: c.align || "left", marginBottom: 0 }}>{c.label}</div>
        ))}
      </div>
      {children}
    </div>
  );
}
function TRow({ columns, cells, tint, onClick, last }) {
  return (
    <div onClick={onClick} className={onClick ? "xk-trow" : ""} style={{ display: "grid", gridTemplateColumns: columns.map(c => c.w || "1fr").join(" "),
      alignItems: "center", padding: "11px 16px", fontSize: 13,
      background: tint || "var(--xk-surface)", borderBottom: last ? "none" : "1px solid var(--xk-border)",
      cursor: onClick ? "pointer" : "default" }}>
      {cells.map((cell, i) => <div key={i} style={{ textAlign: columns[i].align || "left", minWidth: 0 }}>{cell}</div>)}
    </div>
  );
}
Object.assign(window, { DataTable, TRow });