/* Blackstock — Product page (deep dive on the system) */

const ProductPage = ({ onNavigate, onCTA }) => {
  return (
    <div className="bs-shell">
      <TopBanner />
      <Nav activePage="product" onNavigate={onNavigate} />

      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 0 40px' }}>
        <div className="bs-grid-bg" />
        <div className="bs-acid-glow" style={{ top: -200, right: -100 }} />
        <div className="bs-container" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 24 }}>
            <span className="bs-eyebrow">PRODUCTO</span>
            <span style={{ color: 'var(--fg-4)' }}>/</span>
            <span className="bs-eyebrow acid">EL PANEL</span>
          </div>
          <h1 className="bs-display bs-h1" style={{ margin: 0, marginBottom: 24, maxWidth: 900 }}>
            Una sola pantalla.<br/>
            <span style={{ color: 'var(--acid)' }}>Toda tu operación.</span>
          </h1>
          <p style={{ fontSize: 19, color: 'var(--fg-2)', maxWidth: 620, margin: 0, marginBottom: 32, lineHeight: 1.45 }}>
            Hasta 4 cuentas de Vinted gestionadas en paralelo. Pedidos, mensajes, restocks, IA y datos del mercado en tiempo real.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={onCTA} className="bs-btn bs-btn-acid">Probar el panel →</button>
            <button onClick={onCTA} className="bs-btn bs-btn-ghost">Ver tour de 90s</button>
          </div>
        </div>
      </section>

      {/* Big panel mockup */}
      <section style={{ padding: '40px 0 80px', position: 'relative' }}>
        <div className="bs-container">
          <FullPanelMockup />
        </div>
      </section>

      {/* Features split sections */}
      <FeatureSplit
        tag="BOT DE MERCADO"
        title="Saber qué comprar antes de comprarlo."
        body="Pega un producto de China, AliExpress o cualquier mayorista. El bot escanea Vinted EU en tiempo real y devuelve precio sugerido, demanda, competencia y un veredicto."
        bullets={['Análisis instantáneo sin registro', 'Demanda 7d / 30d / 90d', 'Precio sugerido por talla', 'Top sellers similares']}
        right={<BotMockup />}
      />

      <FeatureSplit
        reverse
        tag="IA NEGOCIADORA"
        title="Responde, ofrece y cierra mientras duermes."
        body="La IA aprende tu tono, negocia contraofertas con tus reglas y aplica descuentos a interesados. Tú confirmas envíos cuando quieras."
        bullets={['Respuestas en menos de 30s', 'Reglas de oferta personalizables', 'Likes inteligentes', 'Detección de tirakick']}
        right={<ChatMockup />}
      />

      <FeatureSplit
        tag="MULTICUENTA"
        title="4 cuentas. Un panel. Cero VPN."
        body="Gestiona hasta 4 cuentas Vinted desde la misma pestaña. Anti-detección integrado, identidades aisladas, sin riesgo de cruce."
        bullets={['Hasta 4 cuentas en PRO', 'Identidades aisladas', 'Anti-detección integrado', 'Cambio de cuenta en 1 click']}
        right={<MultiAccountMockup />}
      />

      <Cases />
      <Pricing onCTA={onCTA} />
      <FAQ />
      <FinalCTA onCTA={onCTA} />
      <Footer />
    </div>
  );
};

/* FullPanelMockup — Clon visual del panel real (panel.blackstock.es).
 * Sidebar con la jerarquía exacta + topbar Blackstock OS + selector de
 * pestañas para mostrar Resumen, Pedidos, Inventario, Productos y
 * Contabilidad con datos demo realistas. */
const FullPanelMockup = () => {
  const [activeTab, setActiveTab] = React.useState('resumen');
  const [openGroup, setOpenGroup] = React.useState('Pedidos');

  const navGroups = [
    { label: 'Tablero', icon: 'M3 13h8V3H3v10zm10 8h8V11h-8v10zM3 21h8v-6H3v6zM13 3v6h8V3h-8z', tab: 'resumen' },
    {
      label: 'Pedidos', icon: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2 M9 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2H9V4z',
      children: [
        { label: 'Resumen', tab: 'resumen' },
        { label: 'Pedidos', tab: 'pedidos' },
        { label: 'Clientes', tab: 'clientes' },
      ],
    },
    {
      label: 'Artículos', icon: 'M16.5 9.4 7.5 4.21 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z M3.27 6.96 12 12.01l8.73-5.05 M12 22.08V12',
      children: [
        { label: 'Artículos guardados', tab: 'articulos' },
        { label: 'Importación pendiente', tab: 'articulos' },
      ],
    },
    {
      label: 'Productos', icon: 'M16.5 9.4 7.5 4.21 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z',
      children: [
        { label: 'Catálogo', tab: 'productos' },
        { label: 'Resumen', tab: 'productos' },
      ],
    },
    { label: 'Inventario', icon: 'M3 9h18 M3 15h18 M5 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', tab: 'inventario' },
    { label: 'Contabilidad', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8', tab: 'contabilidad' },
    { label: 'Cuentas', 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', tab: 'cuentas' },
    { label: 'Documentación', icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', tab: 'docs' },
    { label: 'Guías', icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', tab: 'guias' },
    { label: 'Extensión', icon: 'M14 12V8a4 4 0 1 0-8 0v4 M5 12h18 M14 12h7 M5 16h14 M5 20h14', tab: 'extension', external: true },
  ];

  return (
    <div style={{
      background: '#0a0a0a',
      border: '1px solid var(--line-2)',
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 60px 120px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(214,255,77,0.04)',
      position: 'relative',
    }}>
      {/* Glow verde sutil */}
      <div style={{
        position: 'absolute', top: -120, left: -100, width: 360, height: 360,
        background: 'radial-gradient(circle, rgba(214,255,77,0.08), transparent 60%)',
        pointerEvents: 'none', zIndex: 0,
      }} />

      <div style={{ display: 'grid', gridTemplateColumns: '232px 1fr', minHeight: 640, position: 'relative', zIndex: 1 }}>
        {/* SIDEBAR */}
        <aside style={{
          background: '#070707',
          borderRight: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', flexDirection: 'column',
        }}>
          {/* Header sidebar */}
          <div style={{
            padding: '20px 18px',
            borderBottom: '1px solid rgba(255,255,255,0.06)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 11,
              background: 'rgba(214,255,77,0.12)',
              border: '1px solid rgba(214,255,77,0.20)',
              boxShadow: '0 0 16px -4px rgba(214,255,77,0.40)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {/* Logo oficial Blackstock — 3 chevrones apilados */}
              <svg width="22" height="22" viewBox="0 0 128 128" fill="none" aria-hidden="true">
                <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>
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="bs-display" style={{ fontSize: 17, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Blackstock</div>
              <div style={{ marginTop: 4, fontSize: 9, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.36)' }}>Panel operativo</div>
            </div>
          </div>

          {/* Nav */}
          <nav style={{ flex: 1, overflowY: 'auto', padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {navGroups.map((group, gi) => {
              const isExpanded = openGroup === group.label;
              const groupActive = group.tab === activeTab || (group.children && group.children.some(c => c.tab === activeTab && isExpanded));
              if (group.children) {
                return (
                  <div key={gi}>
                    <button
                      type="button"
                      onClick={() => setOpenGroup(isExpanded ? '' : group.label)}
                      style={{
                        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        padding: '8px 12px', borderRadius: 10,
                        fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                        color: groupActive ? 'rgba(214,255,77,0.85)' : 'rgba(255,255,255,0.55)',
                        background: 'transparent',
                        cursor: 'pointer',
                      }}
                    >
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ color: groupActive ? 'var(--acid)' : 'rgba(214,255,77,0.7)' }}>
                          <path d={group.icon} />
                        </svg>
                        {group.label}
                      </span>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.40)" strokeWidth="2" strokeLinecap="round" style={{ transform: isExpanded ? 'rotate(0)' : 'rotate(-90deg)', transition: 'transform 200ms ease' }}>
                        <path d="M6 9l6 6 6-6" />
                      </svg>
                    </button>
                    {isExpanded && (
                      <div style={{ marginTop: 2, marginBottom: 4, paddingLeft: 12 }}>
                        {group.children.map((c, ci) => (
                          <button
                            key={ci}
                            type="button"
                            onClick={() => setActiveTab(c.tab)}
                            style={{
                              width: '100%', textAlign: 'left',
                              padding: '7px 14px', borderRadius: 8,
                              fontSize: 13,
                              color: activeTab === c.tab ? 'var(--fg)' : 'rgba(255,255,255,0.62)',
                              background: activeTab === c.tab ? 'rgba(214,255,77,0.06)' : 'transparent',
                              border: '1px solid', borderColor: activeTab === c.tab ? 'rgba(214,255,77,0.18)' : 'transparent',
                              cursor: 'pointer',
                            }}
                          >
                            {c.label}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                );
              }
              const itemActive = group.tab === activeTab;
              return (
                <button
                  key={gi}
                  type="button"
                  onClick={() => setActiveTab(group.tab)}
                  style={{
                    width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                    padding: '9px 12px', borderRadius: 10,
                    fontSize: 12.5, fontWeight: 500,
                    color: itemActive ? 'var(--fg)' : 'rgba(255,255,255,0.62)',
                    background: itemActive ? 'rgba(214,255,77,0.06)' : 'transparent',
                    border: '1px solid', borderColor: itemActive ? 'rgba(214,255,77,0.18)' : 'transparent',
                    cursor: 'pointer',
                  }}
                >
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ color: itemActive ? 'var(--acid)' : 'rgba(214,255,77,0.7)' }}>
                    <path d={group.icon} />
                  </svg>
                  {group.label}
                  {group.external && (
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.34)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 'auto' }}>
                      <path d="M7 17 17 7 M9 7h8v8" />
                    </svg>
                  )}
                </button>
              );
            })}
          </nav>

          {/* Footer sidebar — usuario */}
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', padding: 14 }}>
            <div style={{
              padding: 14, borderRadius: 14,
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.06)',
            }}>
              <div style={{ fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(214,255,77,0.7)' }}>Cuenta</div>
              <div style={{ marginTop: 8, fontSize: 13, fontWeight: 500, color: 'var(--fg)' }}>Marc · Operaciones</div>
              <div style={{ marginTop: 2, fontSize: 11, color: 'rgba(255,255,255,0.48)' }}>marc@blackstock.es</div>
              <span style={{
                display: 'inline-flex', marginTop: 10,
                padding: '3px 9px', borderRadius: 999,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
                background: 'rgba(214,255,77,0.12)',
                border: '1px solid rgba(214,255,77,0.20)',
                color: 'var(--acid)',
              }}>Blackstock Pro</span>
            </div>
          </div>
        </aside>

        {/* MAIN AREA */}
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          {/* TOPBAR */}
          <header style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
            padding: '14px 22px',
            borderBottom: '1px solid rgba(255,255,255,0.06)',
            background: 'rgba(9,9,9,0.82)',
            backdropFilter: 'blur(14px)',
            WebkitBackdropFilter: 'blur(14px)',
          }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(214,255,77,0.7)' }}>Blackstock OS</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.52)', marginTop: 2 }}>Blackstock Pro</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                padding: '6px 14px', borderRadius: 999,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.08)',
                fontSize: 12.5, color: 'rgba(255,255,255,0.72)',
              }}>Marc</span>
              <button type="button" style={{
                padding: '7px 14px', borderRadius: 12,
                background: 'var(--acid)', color: '#0a0b07',
                fontSize: 13, fontWeight: 600,
                border: '1px solid rgba(214,255,77,0.22)',
                boxShadow: '0 6px 20px -10px rgba(214,255,77,0.45)',
                cursor: 'pointer',
              }}>Salir</button>
            </div>
          </header>

          {/* CONTENT */}
          <main style={{ padding: '24px 22px', overflowY: 'auto' }}>
            {activeTab === 'resumen' && <PanelResumen />}
            {activeTab === 'pedidos' && <PanelPedidosTable />}
            {activeTab === 'clientes' && <PanelClientes />}
            {activeTab === 'inventario' && <PanelInventario />}
            {activeTab === 'productos' && <PanelProductos />}
            {activeTab === 'contabilidad' && <PanelContabilidad />}
            {activeTab === 'cuentas' && <PanelCuentas />}
            {(activeTab === 'docs' || activeTab === 'guias' || activeTab === 'extension' || activeTab === 'articulos') && <PanelPlaceholder name={activeTab} />}
          </main>
        </div>
      </div>
    </div>
  );
};

/* ─── Sub-vistas del FullPanelMockup ─── */

const PanelSummaryCard = ({ title, value, icon }) => (
  <div style={{
    background: 'rgba(255,255,255,0.025)',
    border: '1px solid rgba(255,255,255,0.07)',
    borderRadius: 16,
    padding: 18,
    display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12,
  }}>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(214,255,77,0.72)' }}>{title}</div>
      <div className="bs-display" style={{ fontSize: 26, fontWeight: 700, color: 'var(--fg)', letterSpacing: '-0.02em', marginTop: 8 }}>{value}</div>
    </div>
    <div style={{
      width: 32, height: 32, borderRadius: 10,
      background: 'rgba(214,255,77,0.10)',
      border: '1px solid rgba(214,255,77,0.18)',
      color: 'var(--acid)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flex: '0 0 32px',
    }}>{icon}</div>
  </div>
);

const HelpIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.30)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: '0 0 14px' }}>
    <circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01" />
  </svg>
);

const PanelResumen = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    {/* Filtros */}
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
      <div>
        <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Resumen</h2>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>1 may 2026 — 8 may 2026</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button type="button" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'rgba(255,255,255,0.72)',
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', cursor: 'pointer',
        }}>Todas las cuentas ▾</button>
        <button type="button" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'rgba(255,255,255,0.72)',
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', cursor: 'pointer',
        }}>Últimos 7 días ▾</button>
        <button type="button" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'var(--acid)',
          background: 'rgba(214,255,77,0.08)', border: '1px solid rgba(214,255,77,0.20)', cursor: 'pointer',
        }}>Exportar informe</button>
      </div>
    </div>

    {/* 5 SummaryCards — números aterrizados, semana de un reseller real */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }} className="bs-panel-summary-grid">
      <PanelSummaryCard title="Ingresos totales" value="2.140€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>} />
      <PanelSummaryCard title="Pedidos" value="16" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2 M9 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2H9V4z" /></svg>} />
      <PanelSummaryCard title="Pedido promedio" value="68€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01" /></svg>} />
      <PanelSummaryCard title="Por enviar" value="4" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 12 2 2 4-4 M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" /></svg>} />
      <PanelSummaryCard title="En tránsito" value="5" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 8h14a2 2 0 0 1 2 2v8H3v-8a2 2 0 0 1 2-2z M16 18h5l-3-7M3 14h13" /></svg>} />
    </div>

    {/* Charts */}
    <div style={{ display: 'grid', gridTemplateColumns: '2.15fr 1fr', gap: 12 }} className="bs-panel-charts">
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>
          Ventas a lo largo del tiempo <HelpIcon />
        </div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.40)', marginBottom: 16 }}>1 may — 8 may</div>
        <div style={{ height: 140, position: 'relative' }}>
          <svg viewBox="0 0 600 140" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block' }}>
            <defs>
              <linearGradient id="bsResGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(214,255,77,0.40)" />
                <stop offset="100%" stopColor="rgba(214,255,77,0)" />
              </linearGradient>
            </defs>
            <path d="M0,110 C60,100 80,90 110,82 S180,55 220,60 S290,42 330,30 S420,55 460,42 S540,18 600,12 L600,140 L0,140 Z" fill="url(#bsResGrad)" />
            <path d="M0,110 C60,100 80,90 110,82 S180,55 220,60 S290,42 330,30 S420,55 460,42 S540,18 600,12" fill="none" stroke="var(--acid)" strokeWidth="2" />
          </svg>
        </div>
      </section>
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>Número de ventas <HelpIcon /></div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.40)', marginTop: 2 }}>1 may — 8 may</div>
          </div>
          <div className="bs-display" style={{ fontSize: 32, fontWeight: 700, color: 'var(--fg)', letterSpacing: '-0.025em' }}>16</div>
        </div>
        <div style={{ marginTop: 16, display: 'flex', gap: 4, alignItems: 'flex-end', height: 90 }}>
          {[3, 4, 1, 5, 2, 4, 3, 2].map((v, i) => (
            <div key={i} style={{ flex: 1, height: `${(v/5)*100}%`, background: 'linear-gradient(180deg, var(--acid), rgba(214,255,77,0.4))', borderRadius: 3 }} />
          ))}
        </div>
      </section>
    </div>

    {/* 3 col: Mejores horas, Pedidos por país, Top */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="bs-panel-3cols">
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--fg)' }}>Mejores horas <HelpIcon /></div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.40)', marginTop: 2, marginBottom: 14 }}>1 may — 8 may</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gridTemplateRows: 'repeat(6, 14px)', gap: 3 }}>
          {Array.from({ length: 42 }).map((_, i) => {
            const intensities = [0.05, 0.10, 0.18, 0.32, 0.50, 0.72, 0.90];
            const v = intensities[Math.floor(Math.random()*7)];
            return <div key={i} style={{ background: `rgba(214,255,77,${v})`, borderRadius: 3 }} />;
          })}
        </div>
      </section>
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--fg)' }}>Pedidos por país <HelpIcon /></div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.40)', marginTop: 2, marginBottom: 14 }}>1 may — 8 may</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { flag: '🇪🇸', code: 'ES', n: 9 }, { flag: '🇫🇷', code: 'FR', n: 4 },
            { flag: '🇮🇹', code: 'IT', n: 2 }, { flag: '🇩🇪', code: 'DE', n: 1 },
          ].map((c, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 32px', alignItems: 'center', gap: 10 }}>
              <div style={{ fontSize: 16 }}>{c.flag}</div>
              <div style={{ height: 22, borderRadius: 10, background: 'rgba(255,255,255,0.04)', position: 'relative', overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: `${(c.n/9)*100}%`, borderRadius: 10,
                  background: 'rgba(214,255,77,0.35)',
                  display: 'flex', alignItems: 'center', paddingLeft: 8,
                  fontSize: 10, fontWeight: 600, color: '#0a0b07',
                }}>{c.code}</div>
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.62)', textAlign: 'right' }}>{c.n}</div>
            </div>
          ))}
        </div>
      </section>
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--fg)' }}>Top artículos <HelpIcon /></div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.40)', marginTop: 2, marginBottom: 14 }}>1 may — 8 may</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ['Carhartt Detroit M', '4 ud'], ['Acne scarf wool', '3 ud'],
            ['Birkenstock Boston 42', '3 ud'], ['Stüssy 8-Ball 90s', '2 ud'], ['Levi\'s 501 MIUSA', '2 ud'],
          ].map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr auto', alignItems: 'center', gap: 10, fontSize: 12.5 }}>
              <div style={{ width: 18, height: 18, borderRadius: 999, background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.5)', fontSize: 10, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i+1}</div>
              <div style={{ color: 'rgba(255,255,255,0.85)' }}>{r[0]}</div>
              <div style={{ color: 'rgba(255,255,255,0.48)' }}>{r[1]}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  </div>
);

const PanelPedidosTable = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
      <div>
        <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Pedidos de Vinted</h2>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>16 pedidos en los últimos 7 días</div>
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <input placeholder="Buscar pedido…" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12,
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
          color: 'rgba(255,255,255,0.85)', width: 180,
        }} />
        <button type="button" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'rgba(255,255,255,0.72)',
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', cursor: 'pointer',
        }}>Todos los estados ▾</button>
        <button type="button" style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'rgba(255,255,255,0.72)',
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', cursor: 'pointer',
        }}>Todas las cuentas ▾</button>
      </div>
    </div>

    <div style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, overflow: 'hidden' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '36px 90px 1.5fr 110px 100px 110px 110px 1fr',
        padding: '12px 18px', borderBottom: '1px solid rgba(255,255,255,0.06)',
        fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.42)',
      }} className="bs-panel-orders-head">
        <span></span><span>Fecha</span><span>Título</span><span>Estado</span><span>Seguimiento</span><span>Enviar antes</span><span>Cuenta</span><span>Cliente</span>
      </div>
      {[
        ['8 may', 'Carhartt Detroit M', 'Pagado', 'CE 832 419', '10 may', 'archive.dpt', 'Aitana V.', 'ok'],
        ['8 may', 'Acne scarf wool', 'Listo enviar', 'Pendiente', 'Hoy', 'nordic.studio', 'Iker S.', 'wait'],
        ['7 may', 'Birkenstock Boston 42', 'Enviado', 'CE 832 401', '–', 'archive.dpt', 'Marina C.', 'ship'],
        ['7 may', 'Levi\'s 501 MIUSA W32', 'Enviado', 'DH 994 102', '–', 'maison.eu', 'Pol M.', 'ship'],
        ['6 may', 'Stüssy 8-Ball 90s', 'Pagado', 'CE 832 388', '8 may', 'nordic.studio', 'Júlia R.', 'ok'],
        ['6 may', 'Diesel archive denim 30', 'Incidencia', 'Bloqueado', 'Urgente', 'archive.dpt', 'Bruno F.', 'alert'],
      ].map((r, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '36px 90px 1.5fr 110px 100px 110px 110px 1fr',
          padding: '12px 18px', alignItems: 'center',
          borderBottom: i < 5 ? '1px solid rgba(255,255,255,0.04)' : 'none',
          fontSize: 12.5,
        }} className="bs-panel-orders-row">
          <div style={{ width: 28, height: 28, borderRadius: 6, background: 'rgba(255,255,255,0.05)', backgroundImage: 'linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.10) 49% 51%, transparent 51%)', backgroundSize: '6px 6px' }} />
          <span style={{ color: 'rgba(255,255,255,0.55)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{r[0]}</span>
          <span style={{ color: 'rgba(255,255,255,0.92)' }}>{r[1]}</span>
          <span>
            <span style={{
              padding: '3px 9px', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              background: r[7] === 'ok' ? 'rgba(214,255,77,0.10)' : r[7] === 'wait' ? 'rgba(255,200,60,0.10)' : r[7] === 'ship' ? 'rgba(120,180,255,0.10)' : 'rgba(255,80,80,0.10)',
              border: '1px solid', borderColor: r[7] === 'ok' ? 'rgba(214,255,77,0.28)' : r[7] === 'wait' ? 'rgba(255,200,60,0.28)' : r[7] === 'ship' ? 'rgba(120,180,255,0.28)' : 'rgba(255,80,80,0.28)',
              color: r[7] === 'ok' ? 'var(--acid)' : r[7] === 'wait' ? '#ffd76a' : r[7] === 'ship' ? '#8fb8ff' : '#ff8a8a',
            }}>{r[2]}</span>
          </span>
          <span style={{ color: 'rgba(255,255,255,0.55)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{r[3]}</span>
          <span style={{ color: r[5] === 'Urgente' ? '#ff8a8a' : r[5] === 'Hoy' ? 'var(--acid)' : 'rgba(255,255,255,0.55)', fontSize: 11.5 }}>{r[5]}</span>
          <span style={{ color: 'rgba(255,255,255,0.62)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{r[5] !== r[6] ? r[6] : ''}</span>
          <span style={{ color: 'rgba(255,255,255,0.78)' }}>{r[6]}</span>
        </div>
      ))}
    </div>
  </div>
);

const PanelClientes = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Clientes</h2>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>Histórico de compradores únicos</div>
    </div>
    <div style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, overflow: 'hidden' }}>
      {[
        ['Aitana V.', '@aitanavc', '3 pedidos', '184€'],
        ['Iker S.', '@iker.s', '2 pedidos', '156€'],
        ['Marina C.', '@marina_c', '2 pedidos', '128€'],
        ['Pol M.', '@polm', '2 pedidos', '108€'],
        ['Júlia R.', '@julia_r', '2 pedidos', '96€'],
      ].map((r, i, arr) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr 1fr 100px 100px', padding: '14px 18px', alignItems: 'center', gap: 10, borderBottom: i < arr.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: 12.5 }}>
          <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(214,255,77,0.12)', border: '1px solid rgba(214,255,77,0.20)', color: 'var(--acid)', fontWeight: 700, fontSize: 11, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{r[0][0]}</div>
          <span style={{ color: 'var(--fg)' }}>{r[0]}</span>
          <span style={{ color: 'rgba(255,255,255,0.55)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11.5 }}>{r[1]}</span>
          <span style={{ color: 'rgba(255,255,255,0.72)' }}>{r[2]}</span>
          <span className="bs-num" style={{ fontWeight: 700, color: 'var(--acid)' }}>{r[3]}</span>
        </div>
      ))}
    </div>
  </div>
);

const PanelInventario = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Inventario</h2>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>Stock unificado entre cuentas · 7 referencias</div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="bs-panel-summary-grid">
      <PanelSummaryCard title="Total unidades" value="18" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M16.5 9.4 7.5 4.21 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /></svg>} />
      <PanelSummaryCard title="Stock crítico" value="2" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 9v4 M12 17h.01 M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /></svg>} />
      <PanelSummaryCard title="Sin stock" value="1" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="m4.93 4.93 14.14 14.14" /></svg>} />
      <PanelSummaryCard title="Valor inventario" value="1.180€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>} />
    </div>
    <div style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
          ['Carhartt Detroit M', 4, 6, 67, ''],
          ['Acne scarf wool', 1, 4, 25, 'crit'],
          ['Birkenstock Boston 42', 2, 5, 40, 'warn'],
          ['Levi\'s 501 MIUSA W32', 3, 5, 60, ''],
          ['Stüssy 8-Ball 90s', 6, 8, 75, ''],
          ['Diesel archive denim 30', 2, 5, 40, 'warn'],
          ['Salomon XT-6 41', 0, 3, 0, 'crit'],
        ].map((it, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 70px 80px', alignItems: 'center', gap: 14, fontSize: 12.5 }}>
            <span style={{ color: 'rgba(255,255,255,0.85)' }}>{it[0]}</span>
            <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${it[3]}%`, borderRadius: 999, background: it[4]==='crit' ? 'linear-gradient(90deg,#ff5a5a,#ff8a8a)' : it[4]==='warn' ? 'linear-gradient(90deg,#ffb84a,#ffd76a)' : 'linear-gradient(90deg, var(--acid), var(--acid-soft))' }} />
            </div>
            <span className="bs-num" style={{ textAlign: 'right', color: 'var(--fg)', fontWeight: 600 }}>{it[1]}/{it[2]}</span>
            <span style={{ textAlign: 'right' }}>
              <span style={{
                padding: '2px 8px', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                background: it[4]==='crit' ? 'rgba(255,80,80,0.10)' : it[4]==='warn' ? 'rgba(255,200,60,0.10)' : 'rgba(214,255,77,0.10)',
                color: it[4]==='crit' ? '#ff8a8a' : it[4]==='warn' ? '#ffd76a' : 'var(--acid)',
                border: '1px solid', borderColor: it[4]==='crit' ? 'rgba(255,80,80,0.28)' : it[4]==='warn' ? 'rgba(255,200,60,0.28)' : 'rgba(214,255,77,0.28)',
              }}>{it[4]==='crit' ? 'Crítico' : it[4]==='warn' ? 'Bajo' : 'OK'}</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const PanelProductos = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
      <div>
        <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Catálogo de productos</h2>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>96 productos publicados · 3 cuentas</div>
      </div>
      <button type="button" style={{ padding: '8px 12px', borderRadius: 10, fontSize: 12, color: 'var(--acid)', background: 'rgba(214,255,77,0.08)', border: '1px solid rgba(214,255,77,0.20)', cursor: 'pointer' }}>+ Nuevo producto</button>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }} className="bs-panel-products-grid">
      {[
        ['Carhartt Detroit M', '92€', 4, '@archive.dpt'],
        ['Acne scarf wool', '78€', 1, '@nordic.studio'],
        ['Birkenstock Boston 42', '65€', 2, '@maison.eu'],
        ['Levi\'s 501 MIUSA W32', '54€', 3, '@archive.dpt'],
        ['Stüssy 8-Ball 90s', '48€', 6, '@nordic.studio'],
        ['Our Legacy denim 33', '95€', 1, '@maison.eu'],
      ].map((p, i) => (
        <div key={i} style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 14, padding: 14 }}>
          <div style={{ height: 90, borderRadius: 10, background: 'rgba(255,255,255,0.04)', backgroundImage: 'linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.07) 49% 51%, transparent 51%)', backgroundSize: '8px 8px', marginBottom: 10 }} />
          <div style={{ fontSize: 13, color: 'var(--fg)', fontWeight: 500, marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[0]}</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11.5, color: 'rgba(255,255,255,0.55)' }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>{p[3]}</span>
            <span><span className="bs-num" style={{ fontWeight: 700, color: 'var(--acid)' }}>{p[1]}</span> · {p[2]} ud</span>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PanelContabilidad = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Contabilidad</h2>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>Mayo 2026 · todas las cuentas</div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="bs-panel-summary-grid">
      <PanelSummaryCard title="Ingresos" value="6.240€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v20 M5 9l7-7 7 7" /></svg>} />
      <PanelSummaryCard title="Gastos" value="2.980€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22V2 M19 15l-7 7-7-7" /></svg>} />
      <PanelSummaryCard title="Beneficio" value="3.260€" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>} />
      <PanelSummaryCard title="Margen" value="38%" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="19" y1="5" x2="5" y2="19" /><circle cx="6.5" cy="6.5" r="2.5" /><circle cx="17.5" cy="17.5" r="2.5" /></svg>} />
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)', marginBottom: 14 }}>Desglose de gastos</div>
        {[['Coste mercancía', '2.140€'], ['Comisiones plataforma', '360€'], ['Envíos', '320€'], ['IVA repercutido', '120€'], ['Suscripciones', '40€']].map((r, i, arr) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i < arr.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: 12.5 }}>
            <span style={{ color: 'rgba(255,255,255,0.72)' }}>{r[0]}</span>
            <span className="bs-num" style={{ fontWeight: 600, color: 'var(--fg)' }}>{r[1]}</span>
          </div>
        ))}
      </section>
      <section style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 16, padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)', marginBottom: 14 }}>Beneficio por cuenta</div>
        {[['archive.dpt', '+ 1.940€'], ['nordic.studio', '+ 870€'], ['maison.eu', '+ 450€']].map((r, i, arr) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i < arr.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: 12.5 }}>
            <span style={{ color: 'rgba(255,255,255,0.72)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11.5 }}>{r[0]}</span>
            <span className="bs-num" style={{ fontWeight: 700, color: 'var(--acid)' }}>{r[1]}</span>
          </div>
        ))}
      </section>
    </div>
  </div>
);

const PanelCuentas = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <h2 className="bs-display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Cuentas conectadas</h2>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>3 de 4 disponibles · plan Pro</div>
    </div>
    {[
      ['archive.dpt', 'Cuenta principal · ES — vintage / archive', 38, 'Conectada'],
      ['nordic.studio', 'Cuenta secundaria · FR/IT — basics premium', 32, 'Conectada'],
      ['maison.eu', 'Drop fines de semana · ES — workwear', 26, 'Conectada'],
    ].map((c, i) => (
      <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr auto auto', alignItems: 'center', gap: 14, padding: 16, background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 14 }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(214,255,77,0.12)', border: '1px solid rgba(214,255,77,0.20)', color: 'var(--acid)', fontWeight: 700, fontSize: 13, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{c[0][0].toUpperCase()}</div>
        <div>
          <div style={{ fontSize: 13, color: 'var(--fg)', fontFamily: 'JetBrains Mono, monospace', fontWeight: 500 }}>{c[0]}</div>
          <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.48)', marginTop: 2 }}>{c[1]}</div>
        </div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.72)' }}>{c[2]} productos</div>
        <span style={{ padding: '4px 10px', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', background: 'rgba(214,255,77,0.10)', border: '1px solid rgba(214,255,77,0.28)', color: 'var(--acid)' }}>{c[3]}</span>
      </div>
    ))}
  </div>
);

const PanelPlaceholder = ({ name }) => (
  <div style={{ padding: '40px 20px', textAlign: 'center' }}>
    <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>Sección "{name}" — abre la demo completa para ver el contenido.</div>
  </div>
);

const FeatureSplit = ({ tag, title, body, bullets, right, reverse }) => (
  <section className="bs-section">
    <div className="bs-container">
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center',
        direction: reverse ? 'rtl' : 'ltr',
      }}>
        <div style={{ direction: 'ltr' }}>
          <span className="bs-eyebrow acid">{tag}</span>
          <h3 className="bs-display" style={{ fontSize: 48, fontWeight: 700, margin: '16px 0 20px', letterSpacing: '-0.03em', lineHeight: 1.0 }}>
            {title}
          </h3>
          <p style={{ color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.55, margin: 0, marginBottom: 24, maxWidth: 480 }}>
            {body}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {bullets.map((b, j) => (
              <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'var(--fg-2)' }}>
                <svg width="14" height="14" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                {b}
              </div>
            ))}
          </div>
        </div>
        <div style={{ direction: 'ltr' }}>{right}</div>
      </div>
    </div>
  </section>
);

const BotMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    padding: 24, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
      <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}>BOT</span>
      <span className="bs-eyebrow" style={{ fontSize: 10 }}>ANÁLISIS · LIVE</span>
    </div>
    <div style={{
      background: 'var(--bg-3)', borderRadius: 8, padding: 12, marginBottom: 16,
      fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)',
    }}>
      &gt; analizar "carhartt detroit jacket vintage"
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
      <MetricTile size="sm" label="DEMANDA 7D" value="118" sub="ventas EU" color="acid" />
      <MetricTile size="sm" label="PRECIO MED." value="92€" sub="rango 76-114€" />
      <MetricTile size="sm" label="COMPETENCIA" value="24" sub="activos" />
      <MetricTile size="sm" label="MARGEN" value="×2.3" sub="vs coste 38€" color="acid" />
    </div>

    <div style={{
      padding: 14, background: 'rgba(214,255,77,0.06)',
      border: '1px solid var(--line-acid)', borderRadius: 10,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ fontSize: 18 }}>✦</div>
      <div style={{ fontSize: 13 }}>
        <strong style={{ color: 'var(--acid)' }}>VEREDICTO:</strong> compra. Publica a <strong>89€</strong>, demanda estable en M/L sobre las 4 últimas semanas.
      </div>
    </div>
  </div>
);

const ChatMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    padding: 20, display: 'flex', flexDirection: 'column', gap: 10,
    boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
      <span style={{ fontWeight: 600, fontSize: 14 }}>@aitanavc</span>
      <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}>IA AUTO</span>
    </div>

    {[
      { from: 'them', text: 'Hola, ¿lo dejarías a 70€?' },
      { from: 'us', text: 'Hola Aitana 🖤 a 70€ no me sale, lo mínimo serían 82€ con envío incluido. ¿Te encaja?' },
      { from: 'them', text: '¿Y 78€?' },
      { from: 'us', text: 'Cerramos en 80€. Te lanzo la oferta ahora.' },
      { from: 'system', text: '✦ Oferta aplicada · 80€ · Pendiente respuesta' },
    ].map((m, i) => (
      <div key={i} style={{
        alignSelf: m.from === 'us' ? 'flex-end' : m.from === 'system' ? 'center' : 'flex-start',
        maxWidth: '80%',
        padding: '10px 14px', borderRadius: 12,
        background: m.from === 'us'
          ? 'var(--acid)'
          : m.from === 'system'
          ? 'rgba(214,255,77,0.06)'
          : 'var(--bg-3)',
        color: m.from === 'us' ? '#000' : m.from === 'system' ? 'var(--acid)' : 'var(--fg)',
        fontSize: 13,
        fontFamily: m.from === 'system' ? 'var(--font-mono)' : 'var(--font-body)',
        border: m.from === 'system' ? '1px solid var(--line-acid)' : 'none',
      }}>
        {m.text}
      </div>
    ))}
  </div>
);

const MultiAccountMockup = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
    {[
      { n: '@archive.dpt', s: '118€', d: '4 vendidos', c: 'var(--acid)' },
      { n: '@nordic.studio', s: '76€', d: '2 vendidos', c: 'var(--fg)' },
      { n: '@maison.eu', s: '54€', d: '1 vendido', c: 'var(--fg)' },
      { n: '@boldface', s: '32€', d: '1 vendido', c: 'var(--fg)' },
    ].map((a, i) => (
      <div key={i} style={{
        background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 12,
        padding: 18,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{a.n}</span>
          <span className="bs-dot live" style={{ width: 6, height: 6 }}></span>
        </div>
        <div className="bs-num" style={{ fontSize: 28, fontWeight: 700, color: a.c, letterSpacing: '-0.025em' }}>
          {a.s}
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>{a.d}</div>
        <Sparkline width={180} height={32} />
      </div>
    ))}
  </div>
);

Object.assign(window, {
  ProductPage,
  FullPanelMockup,
  FeatureSplit,
  BotMockup,
  ChatMockup,
  MultiAccountMockup,
});
