/* ============================================================
 *  DEMO MODAL — Preview funcional del panel Blackstock
 *
 *  Se monta como overlay encima de la landing.
 *  Datos demo realistas (no reales) que ilustran el panel:
 *    Dashboard, Pedidos, Restocker, Smart Agent, Etiquetas,
 *    Inventario, Productos, Contabilidad, IA Inbox, Multicuenta.
 *
 *  Uso: window.bsOpenDemo() / window.bsCloseDemo()
 * ============================================================ */
const BsDemoModal = () => {
  const [open, setOpen] = React.useState(false);
  const [tab, setTab] = React.useState('dashboard');

  React.useEffect(() => {
    window.bsOpenDemo = (initialTab) => {
      if (typeof initialTab === 'string') setTab(initialTab);
      setOpen(true);
    };
    window.bsCloseDemo = () => setOpen(false);
    return () => {
      delete window.bsOpenDemo;
      delete window.bsCloseDemo;
    };
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);

  if (!open) return null;

  const TABS = [
    { id: 'dashboard', label: 'Dashboard', icon: 'M3 12h4l3-9 4 18 3-9h4' },
    { id: 'pedidos', label: 'Pedidos', icon: 'M3 7h18M3 12h18M3 17h18' },
    { id: 'restocker', label: 'Restocker', icon: 'M21 12a9 9 0 1 1-3-6.7L21 8V3M21 12h-5' },
    { id: 'smart', label: 'Smart Agent', icon: 'M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1' },
    { id: 'labels', label: 'Etiquetas', icon: 'M3 5a2 2 0 0 1 2-2h7l9 9-7 7-9-9V5z M7 9.5h.01' },
    { id: 'inventario', label: 'Inventario', icon: 'M3 9h18M3 15h18M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' },
    { id: 'inbox', label: 'IA Inbox', icon: 'M22 12h-6l-2 3h-4l-2-3H2 M5.5 5h13l3.5 7v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l3.5-7z' },
    { id: 'contabilidad', label: 'Contabilidad', icon: 'M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6' },
    { id: 'multicuenta', label: 'Multicuenta', icon: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75' },
  ];

  return (
    <div className="bs-demo-overlay" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <div className="bs-demo-shell" role="dialog" aria-modal="true" aria-label="Demo del panel">
        <button className="bs-demo-close" onClick={() => setOpen(false)} aria-label="Cerrar demo">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
        </button>

        <aside className="bs-demo-sidebar">
          <div className="bs-demo-brand">
            <span className="bs-brand-mark" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 128 128" fill="none">
                <g fill="var(--acid)">
                  <path d="M64 14 92 31.5V43L64 26.5 36 43V31.5L64 14Z" />
                  <path d="M64 38 99 59.5V72L64 51.5 29 72V59.5L64 38Z" />
                  <path d="M64 64 104 87.5V100L64 76.5 24 100V87.5L64 64Z" />
                </g>
              </svg>
            </span>
            <span>Blackstock</span>
          </div>
          {TABS.map(t => (
            <button
              key={t.id}
              type="button"
              className={`bs-demo-tab ${tab === t.id ? 'is-active' : ''}`}
              onClick={() => setTab(t.id)}
            >
              <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d={t.icon} />
              </svg>
              <span>{t.label}</span>
            </button>
          ))}
        </aside>

        <main className="bs-demo-main" key={tab}>
          {tab === 'dashboard' && <DemoDashboard />}
          {tab === 'pedidos' && <DemoPedidos />}
          {tab === 'restocker' && <DemoRestocker />}
          {tab === 'smart' && <DemoSmart />}
          {tab === 'labels' && <DemoLabels />}
          {tab === 'inventario' && <DemoInventario />}
          {tab === 'inbox' && <DemoInbox />}
          {tab === 'contabilidad' && <DemoContabilidad />}
          {tab === 'multicuenta' && <DemoMulticuenta />}
        </main>
      </div>
    </div>
  );
};

const DemoH = ({ title, sub, badge }) => (
  <>
    <div className="bs-demo-h">
      <h2>{title}</h2>
      {badge && (
        <span className="bs-demo-pill">
          <span className="dot" /> {badge}
        </span>
      )}
    </div>
    {sub && <p className="bs-demo-h-sub">{sub}</p>}
  </>
);

const KPI = ({ label, value, delta, neg }) => (
  <div className="bs-demo-kpi">
    <div className="bs-demo-kpi-l">{label}</div>
    <div className="bs-demo-kpi-v">{value}</div>
    {delta && (
      <div className={`bs-demo-kpi-d ${neg ? 'neg' : ''}`}>
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
          <path d={neg ? 'M7 13l5 5 5-5 M12 4v14' : 'M7 11l5-5 5 5 M12 6v14'} />
        </svg>
        {delta}
      </div>
    )}
  </div>
);

/* --- DASHBOARD --- */
const DemoDashboard = () => (
  <>
    <DemoH title="Dashboard" sub="Resumen ejecutivo de tu operación" badge="EN VIVO" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Ingresos · 7d" value="2.140€" delta="+8.6%" />
      <KPI label="Pedidos hoy" value="4" delta="+1" />
      <KPI label="Margen medio" value="38%" delta="+2pt" />
      <KPI label="Stock crítico" value="2" delta="-1" />
    </div>
    <div className="bs-demo-grid-2">
      <div className="bs-demo-card">
        <h3>Ingresos últimos 14 días <span style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>2.140€ total</span></h3>
        <div className="bs-demo-spark">
          <svg viewBox="0 0 400 110" preserveAspectRatio="none">
            <defs>
              <linearGradient id="bsGrad1" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(184,255,58,0.45)" />
                <stop offset="100%" stopColor="rgba(184,255,58,0)" />
              </linearGradient>
            </defs>
            <path d="M0,80 L30,72 L60,75 L90,60 L120,55 L150,40 L180,48 L210,30 L240,38 L270,22 L300,30 L330,18 L360,28 L400,12" fill="none" stroke="#b8ff3a" strokeWidth="2" />
            <path d="M0,80 L30,72 L60,75 L90,60 L120,55 L150,40 L180,48 L210,30 L240,38 L270,22 L300,30 L330,18 L360,28 L400,12 L400,110 L0,110 Z" fill="url(#bsGrad1)" />
          </svg>
        </div>
      </div>
      <div className="bs-demo-card">
        <h3>Top productos</h3>
        <div className="bs-demo-row"><span className="lbl">Carhartt Detroit jacket M</span><span className="v">4 ud</span></div>
        <div className="bs-demo-row"><span className="lbl">Acne scarf wool</span><span className="v">3 ud</span></div>
        <div className="bs-demo-row"><span className="lbl">Birkenstock Boston 42</span><span className="v">3 ud</span></div>
        <div className="bs-demo-row"><span className="lbl">Stüssy 8-Ball 90s</span><span className="v">2 ud</span></div>
        <div className="bs-demo-row"><span className="lbl">Levi's 501 MIUSA W32</span><span className="v">2 ud</span></div>
      </div>
    </div>
    <div className="bs-demo-card">
      <h3>Actividad reciente</h3>
      <div className="bs-demo-row">
        <span className="lbl">Restocker re-publicó Carhartt Detroit M en @archive.dpt</span>
        <span className="badge ok">AUTO</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl">Smart Agent respondió a 3 ofertas (aceptadas: 1)</span>
        <span className="badge ok">AUTO</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl">Etiqueta generada para pedido #BS-1284</span>
        <span className="badge ship">ENVIADO</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl">Stock crítico: Acne scarf wool (1 ud)</span>
        <span className="badge alert">ALERTA</span>
      </div>
    </div>
  </>
);

/* --- PEDIDOS --- */
const DemoPedidos = () => {
  const orders = [
    { id: 'BS-1284', acc: 'archive.dpt', client: 'Aitana V.', prod: 'Carhartt Detroit jacket M', total: '92€', status: 'ship', label: 'ENVIADO' },
    { id: 'BS-1283', acc: 'archive.dpt', client: 'Iker S.', prod: 'Acne scarf wool', total: '78€', status: 'ok', label: 'PAGADO' },
    { id: 'BS-1282', acc: 'nordic.studio', client: 'Marina C.', prod: 'Birkenstock Boston 42', total: '65€', status: 'wait', label: 'PENDIENTE' },
    { id: 'BS-1281', acc: 'maison.eu', client: 'Pol M.', prod: 'Levi\'s 501 MIUSA W32', total: '54€', status: 'ship', label: 'ENVIADO' },
    { id: 'BS-1280', acc: 'archive.dpt', client: 'Júlia R.', prod: 'Stüssy 8-Ball 90s', total: '48€', status: 'ok', label: 'PAGADO' },
    { id: 'BS-1279', acc: 'archive.dpt', client: 'Bruno F.', prod: 'Diesel archive denim 30', total: '62€', status: 'alert', label: 'INCIDENCIA' },
    { id: 'BS-1278', acc: 'nordic.studio', client: 'Adrián L.', prod: 'Stüssy crewneck 90s', total: '54€', status: 'ship', label: 'ENVIADO' },
  ];
  return (
    <>
      <DemoH title="Pedidos" sub="Sincronización en tiempo real con todas tus cuentas" badge="16 ESTA SEMANA" />
      <div className="bs-demo-grid-kpi">
        <KPI label="Pendientes" value="4" />
        <KPI label="Listos para enviar" value="3" />
        <KPI label="Enviados" value="8" delta="+2" />
        <KPI label="Incidencias" value="1" />
      </div>
      <div className="bs-demo-card">
        <h3>Últimos pedidos</h3>
        {orders.map(o => (
          <div className="bs-demo-row" key={o.id}>
            <span className="id" style={{ flex: '0 0 78px', fontFamily: 'JetBrains Mono, monospace' }}>{o.id}</span>
            <span className="lbl" style={{ flex: '0 0 110px' }}>{o.acc}</span>
            <span className="lbl">{o.prod}</span>
            <span className="v">{o.total}</span>
            <span className={`badge ${o.status}`}>{o.label}</span>
          </div>
        ))}
      </div>
    </>
  );
};

/* --- RESTOCKER --- */
const DemoRestocker = () => (
  <>
    <DemoH title="Restocker" sub="Re-publica automáticamente tus productos para mantenerlos en lo alto del feed." badge="ACTIVO 24/7" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Re-listings hoy" value="48" delta="+9" />
      <KPI label="Cuentas activas" value="2" />
      <KPI label="Productos en rotación" value="32" />
      <KPI label="Vistas extra · 7d" value="4.6k" delta="+18%" />
    </div>
    <div className="bs-demo-grid-2">
      <div className="bs-demo-card">
        <h3>Cola de re-listing</h3>
        <div className="bs-demo-row"><span className="lbl">Carhartt Detroit jacket M</span><span className="badge ok">EN COLA · 12m</span></div>
        <div className="bs-demo-row"><span className="lbl">Acne scarf wool</span><span className="badge wait">PROGRAMADO 18:30</span></div>
        <div className="bs-demo-row"><span className="lbl">Birkenstock Boston 42</span><span className="badge ship">PUBLICADO HACE 4m</span></div>
        <div className="bs-demo-row"><span className="lbl">Levi's 501 MIUSA W32</span><span className="badge ok">EN COLA · 27m</span></div>
        <div className="bs-demo-row"><span className="lbl">Stüssy 8-Ball 90s</span><span className="badge ship">PUBLICADO HACE 8m</span></div>
      </div>
      <div className="bs-demo-card">
        <h3>Reglas activas</h3>
        <div className="bs-demo-row"><span className="lbl">Re-listar cada 30 min</span><span className="v">ON</span></div>
        <div className="bs-demo-row"><span className="lbl">Saltar si vendido en 24h</span><span className="v">ON</span></div>
        <div className="bs-demo-row"><span className="lbl">Limitar 5 acciones / hora</span><span className="v">ON</span></div>
        <div className="bs-demo-row"><span className="lbl">Pausar 02:00–07:00</span><span className="v">ON</span></div>
        <div className="bs-demo-row"><span className="lbl">Aleatorizar tiempo ±4m</span><span className="v">ON</span></div>
      </div>
    </div>
  </>
);

/* --- SMART AGENT --- */
const DemoSmart = () => (
  <>
    <DemoH title="Smart Agent" sub="IA conversacional que negocia ofertas y responde dudas en tu nombre." badge="ESPAÑOL · GPT-5" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Conversaciones hoy" value="22" delta="+5" />
      <KPI label="Ofertas aceptadas" value="4" />
      <KPI label="Tasa respuesta" value="100%" />
      <KPI label="Tiempo medio" value="9s" delta="-2s" />
    </div>
    <div className="bs-demo-card">
      <h3>Conversación · pedido #BS-1284</h3>
      <div className="bs-demo-chat">
        <div className="bs-demo-msg user">
          <div className="meta">CLIENTE · Aitana</div>
          Hola, ¿lo dejarías a 70€?
        </div>
        <div className="bs-demo-msg bot">
          <div className="meta">SMART AGENT · auto</div>
          ¡Hola Aitana! A 70€ no me sale, lo mínimo serían 82€ con envío incluido. Es una pieza con poca rotación, espero ofertas hasta el viernes.
        </div>
        <div className="bs-demo-msg user">
          <div className="meta">CLIENTE · Aitana</div>
          ¿Y 78€?
        </div>
        <div className="bs-demo-msg bot">
          <div className="meta">SMART AGENT · auto</div>
          Cerramos en 80€ y va con seguimiento. Te lanzo la oferta ahora.
        </div>
      </div>
    </div>
    <div className="bs-demo-card" style={{ marginTop: 12 }}>
      <h3>Reglas de negociación</h3>
      <div className="bs-demo-row"><span className="lbl">Margen mínimo aceptado</span><span className="v">25%</span></div>
      <div className="bs-demo-row"><span className="lbl">Auto-aceptar ofertas ≥ 90% precio</span><span className="v">ON</span></div>
      <div className="bs-demo-row"><span className="lbl">Contraofertar ofertas &lt; 80%</span><span className="v">ON</span></div>
      <div className="bs-demo-row"><span className="lbl">Tono</span><span className="v">Cercano</span></div>
    </div>
  </>
);

/* --- LABELS --- */
const DemoLabels = () => (
  <>
    <DemoH title="Etiquetas" sub="Generación instantánea, almacenadas en cdn.blackstock.es de forma permanente." badge="CDN PROPIO" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Generadas hoy" value="14" />
      <KPI label="Total este mes" value="178" />
      <KPI label="Tiempo medio" value="0.9s" delta="-0.2s" />
      <KPI label="Tasa éxito" value="99.6%" />
    </div>
    <div className="bs-demo-grid-2">
      <div className="bs-demo-card">
        <h3>Últimas etiquetas</h3>
        <div className="bs-demo-row"><span className="id">#BS-1284</span><span className="lbl">Correos Express</span><span className="badge ship">DESCARGABLE</span></div>
        <div className="bs-demo-row"><span className="id">#BS-1283</span><span className="lbl">SEUR · Nacional</span><span className="badge ship">DESCARGABLE</span></div>
        <div className="bs-demo-row"><span className="id">#BS-1282</span><span className="lbl">DHL Express</span><span className="badge wait">GENERANDO</span></div>
        <div className="bs-demo-row"><span className="id">#BS-1281</span><span className="lbl">MRW · 24h</span><span className="badge ship">DESCARGABLE</span></div>
        <div className="bs-demo-row"><span className="id">#BS-1280</span><span className="lbl">InPost Lockers</span><span className="badge ship">DESCARGABLE</span></div>
      </div>
      <div className="bs-demo-card">
        <h3>Vista previa</h3>
        <div className="bs-demo-label">
          <div className="bs-demo-label-body">
            <div style={{ fontWeight: 700, fontSize: 13 }}>BS-1284 · Correos Express</div>
            <div style={{ marginTop: 4 }}>De: @archive.dpt</div>
            <div>Para: Aitana V.</div>
            <div>C/ Aribau 142, 08036 Barcelona</div>
            <div style={{ marginTop: 6, opacity: 0.7 }}>Peso: 0.6kg · Servicio: 48h</div>
            <div style={{ marginTop: 6, fontFamily: 'monospace', fontSize: 9, letterSpacing: '0.05em' }}>
              ▌▌║▌▌║║▌║▌▌║▌║▌║║▌▌║▌║▌║▌
            </div>
          </div>
        </div>
      </div>
    </div>
  </>
);

/* --- INVENTARIO --- */
const DemoInventario = () => {
  const items = [
    { name: 'Carhartt Detroit jacket M', stock: 4, max: 6, pct: 67, tone: '' },
    { name: 'Acne scarf wool', stock: 1, max: 4, pct: 25, tone: 'crit' },
    { name: 'Birkenstock Boston 42', stock: 2, max: 5, pct: 40, tone: 'warn' },
    { name: 'Levi\'s 501 MIUSA W32', stock: 3, max: 5, pct: 60, tone: '' },
    { name: 'Stüssy 8-Ball 90s', stock: 6, max: 8, pct: 75, tone: '' },
    { name: 'Diesel archive denim 30', stock: 2, max: 5, pct: 40, tone: 'warn' },
    { name: 'Salomon XT-6 41', stock: 0, max: 3, pct: 0, tone: 'crit' },
  ];
  return (
    <>
      <DemoH title="Inventario" sub="Stock unificado entre todas tus cuentas. Alertas automáticas." badge={`${items.length} REFERENCIAS`} />
      <div className="bs-demo-grid-kpi">
        <KPI label="Total unidades" value="18" />
        <KPI label="Stock crítico" value="2" />
        <KPI label="Sin stock" value="1" />
        <KPI label="Valor inventario" value="1.180€" />
      </div>
      <div className="bs-demo-card">
        <h3>Productos</h3>
        {items.map((it) => (
          <div className="bs-demo-row" key={it.name}>
            <span className="lbl" style={{ flex: 2 }}>{it.name}</span>
            <div className="bs-demo-bar"><i className={it.tone} style={{ width: `${it.pct}%` }} /></div>
            <span className="v" style={{ flex: '0 0 60px', textAlign: 'right' }}>{it.stock}/{it.max}</span>
            {it.tone === 'crit' && <span className="badge alert">CRÍTICO</span>}
            {it.tone === 'warn' && <span className="badge wait">BAJO</span>}
            {!it.tone && <span className="badge ok">OK</span>}
          </div>
        ))}
      </div>
    </>
  );
};

/* --- INBOX --- */
const DemoInbox = () => (
  <>
    <DemoH title="IA Inbox" sub="Todos tus mensajes en un único panel, priorizados y resumidos por IA." badge="12 NUEVOS" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Sin leer" value="7" />
      <KPI label="Resumidos hoy" value="22" />
      <KPI label="Respondidos auto" value="14" />
      <KPI label="Cuentas conectadas" value="3" />
    </div>
    <div className="bs-demo-card">
      <h3>Bandeja unificada</h3>
      <div className="bs-demo-row">
        <span className="lbl"><strong>Aitana V.</strong> · pregunta talla Carhartt Detroit — <span style={{ color: 'var(--fg-3)' }}>resumido por IA: cliente quiere confirmar M etiquetada</span></span>
        <span className="badge ok">RESPONDIDO</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>Iker S.</strong> · oferta 65€ por Acne scarf — <span style={{ color: 'var(--fg-3)' }}>auto-contraoferta a 78€</span></span>
        <span className="badge wait">PENDIENTE REVISIÓN</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>Marina C.</strong> · pregunta tracking SEUR — <span style={{ color: 'var(--fg-3)' }}>resuelta con número de envío</span></span>
        <span className="badge ok">RESPONDIDO</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>Bruno F.</strong> · incidencia · paquete dañado — <span style={{ color: 'var(--fg-3)' }}>marcada como prioritaria</span></span>
        <span className="badge alert">URGENTE</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>Pol M.</strong> · valoración 5★ Levi's MIUSA — <span style={{ color: 'var(--fg-3)' }}>agradecido por IA</span></span>
        <span className="badge ok">RESPONDIDO</span>
      </div>
    </div>
  </>
);

/* --- CONTABILIDAD --- */
const DemoContabilidad = () => (
  <>
    <DemoH title="Contabilidad" sub="Beneficio real, comisiones, tasas y márgenes. Listo para tu gestor." badge="MAYO 2026" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Ingresos · mes" value="6.240€" delta="+4.8%" />
      <KPI label="Gastos · mes" value="2.980€" />
      <KPI label="Beneficio neto" value="3.260€" delta="+7%" />
      <KPI label="Margen" value="38%" delta="+2pt" />
    </div>
    <div className="bs-demo-grid-2">
      <div className="bs-demo-card">
        <h3>Desglose de gastos</h3>
        <div className="bs-demo-row"><span className="lbl">Coste mercancía</span><span className="v">2.140€</span></div>
        <div className="bs-demo-row"><span className="lbl">Comisiones plataforma</span><span className="v">360€</span></div>
        <div className="bs-demo-row"><span className="lbl">Envíos</span><span className="v">320€</span></div>
        <div className="bs-demo-row"><span className="lbl">IVA repercutido</span><span className="v">120€</span></div>
        <div className="bs-demo-row"><span className="lbl">Suscripciones</span><span className="v">40€</span></div>
      </div>
      <div className="bs-demo-card">
        <h3>Por cuenta</h3>
        <div className="bs-demo-row"><span className="lbl">archive.dpt</span><span className="v">+ 1.940€</span></div>
        <div className="bs-demo-row"><span className="lbl">nordic.studio</span><span className="v">+ 870€</span></div>
        <div className="bs-demo-row"><span className="lbl">maison.eu</span><span className="v">+ 450€</span></div>
        <div className="bs-demo-row"><span className="lbl">Total neto</span><span className="v" style={{ color: 'var(--acid)' }}>3.260€</span></div>
      </div>
    </div>
  </>
);

/* --- MULTICUENTA --- */
const DemoMulticuenta = () => (
  <>
    <DemoH title="Multicuenta" sub="Gestiona varias cuentas Vinted desde un único panel, sin saltar entre logins." badge="3 ACTIVAS" />
    <div className="bs-demo-grid-kpi">
      <KPI label="Cuentas activas" value="3" />
      <KPI label="Productos publicados" value="96" delta="+5" />
      <KPI label="Ventas · mes" value="42" delta="+9" />
      <KPI label="Worker remoto" value="ON" />
    </div>
    <div className="bs-demo-card">
      <h3>Cuentas conectadas</h3>
      <div className="bs-demo-row">
        <span className="lbl"><strong>archive.dpt</strong> · cuenta principal · ES — vintage / archive</span>
        <span className="v">38 productos</span>
        <span className="badge ok">CONECTADA</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>nordic.studio</strong> · cuenta secundaria · FR/IT — basics premium</span>
        <span className="v">32 productos</span>
        <span className="badge ok">CONECTADA</span>
      </div>
      <div className="bs-demo-row">
        <span className="lbl"><strong>maison.eu</strong> · drop fines de semana · ES — workwear</span>
        <span className="v">26 productos</span>
        <span className="badge ok">CONECTADA</span>
      </div>
    </div>
    <div className="bs-demo-card" style={{ marginTop: 12 }}>
      <h3>Worker remoto · Cloud Worker</h3>
      <p style={{ fontSize: 12.5, color: 'var(--fg-3)', margin: '0 0 12px', lineHeight: 1.55 }}>
        Tus cuentas operan desde nuestra infraestructura cloud, no desde tu ordenador. Restocker, Smart Agent y sincronización funcionan 24/7 aunque cierres el portátil.
      </p>
      <div className="bs-demo-row"><span className="lbl">Uptime · 30 días</span><span className="v">99.94%</span></div>
      <div className="bs-demo-row"><span className="lbl">IPs únicas por cuenta</span><span className="v">SI</span></div>
      <div className="bs-demo-row"><span className="lbl">Aislamiento de sesión</span><span className="v">SI</span></div>
    </div>
  </>
);

window.BsDemoModal = BsDemoModal;