/* Blackstock — Home page (with 3 hero variants) */

/* HERO A — Visual product hero (estilo "Dentro").
 * Eyebrow + headline corto + sub 1 línea + 2 CTAs + mockup grande del panel.
 * Debajo: 4 KPI tiles. Sin paredes de texto. */
const HeroA = ({ onCTA }) => (
  <section style={{
    position: 'relative',
    paddingTop: 64, paddingBottom: 56,
    overflow: 'hidden',
  }}>
    <div className="bs-grid-bg" />
    <div className="bs-acid-glow" style={{ top: -240, left: '50%', transform: 'translateX(-50%)', opacity: 0.55 }} />

    <div className="bs-container" style={{ position: 'relative', zIndex: 1 }}>
      {/* Hero — Manifesto editorial */}
      <div style={{ textAlign: 'center', maxWidth: 980, margin: '0 auto 56px' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32 }}>
          <span className="bs-pill acid"><span className="bs-dot live"></span>RESELLERS ACTIVOS · MAYO 2026</span>
          <span className="bs-pill">VINTED EU · OS</span>
        </div>

        {/* Claim: tipografía manifesto. Línea 1 grande mate, línea 2 acid emphasis */}
        <h1 className="bs-display bs-hero-claim" style={{
          margin: 0,
          fontSize: 'clamp(52px, 9vw, 132px)',
          fontWeight: 800,
          letterSpacing: '-0.042em',
          lineHeight: 0.92,
          color: 'var(--fg)',
        }}>
          <span style={{ display: 'block' }}>Convierte China</span>
          <span style={{ display: 'block', color: 'var(--acid)', fontStyle: 'italic', fontWeight: 700, letterSpacing: '-0.045em' }}>en dinero.</span>
        </h1>

        {/* Subcopy mono — ancla operativa, no marketing */}
        <p style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--fg-3)',
          margin: '24px 0 8px',
        }}>—— SISTEMA OPERATIVO PARA REVENTA EN VINTED EU ——</p>
        <p style={{
          fontSize: 16, color: 'var(--fg-2)',
          margin: '0 auto 32px', maxWidth: 520, lineHeight: 1.55,
        }}>
          Restocker, IA y multicuenta en una sola pantalla. Pensado para resellers que tratan esto como un negocio.
        </p>

        <div style={{ display: 'inline-flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
          <button onClick={onCTA} className="bs-btn bs-btn-acid">Empezar →</button>
          <button onClick={() => window.bsOpenDemo && window.bsOpenDemo()} className="bs-btn bs-btn-ghost">Ver el panel</button>
        </div>
      </div>

      {/* Big mockup — el panel funcionando */}
      <div style={{ position: 'relative' }} data-bs-reveal>
        {window.FullPanelMockup ? <FullPanelMockup /> : <PanelPreview />}
      </div>

      {/* KPI tiles debajo — números aterrizados */}
      <div style={{
        marginTop: 64,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 12,
      }} className="bs-hero-kpis">
        {[
          { v: '+3h', l: 'al día sin tareas manuales', color: 'acid' },
          { v: '×2.1', l: 'margen medio sobre coste' },
          { v: '4', l: 'cuentas en paralelo' },
          { v: '99.9%', l: 'uptime sync · 30d' },
        ].map((p, i) => (
          <div key={i} style={{
            background: 'var(--bg-1)',
            border: '1px solid var(--line)',
            borderRadius: 14,
            padding: '20px 22px',
            display: 'flex',
            flexDirection: 'column',
            gap: 4,
          }}>
            <div className="bs-num" style={{
              fontSize: 30, fontWeight: 800, letterSpacing: '-0.03em',
              color: p.color === 'acid' ? 'var(--acid)' : 'var(--fg)',
              lineHeight: 1,
            }}>{p.v}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.3 }}>{p.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* HERO B — Editorial / typographic */
const HeroB = ({ onCTA }) => (
  <section style={{ position: 'relative', overflow: 'hidden' }}>
    <div className="bs-grid-bg" />
    <div className="bs-acid-glow" style={{ top: '40%', left: '-200px' }} />

    <div className="bs-container" style={{ position: 'relative', zIndex: 1, paddingTop: 60, paddingBottom: 100 }}>
      {/* Top meta bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 24, marginBottom: 60, borderBottom: '1px solid var(--line)',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        <span>EDICIÓN 03 / 2026</span>
        <span>EL SISTEMA OPERATIVO PARA REVENDER EN VINTED</span>
        <span>MADRID · ES</span>
      </div>

      {/* Massive typography */}
      <div style={{ position: 'relative' }}>
        <h1 className="bs-display" style={{
          margin: 0,
          fontSize: 'clamp(72px, 14vw, 220px)',
          fontWeight: 800,
          letterSpacing: '-0.05em',
          lineHeight: 0.86,
        }}>
          De ropa a<br/>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 24, position: 'relative',
          }}>
            <span style={{ color: 'var(--acid)' }}>cashflow</span>
            <span style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 14, color: 'var(--fg-3)',
              fontWeight: 400, letterSpacing: '0.05em',
              alignSelf: 'flex-end', paddingBottom: 28,
              maxWidth: 240, lineHeight: 1.4,
            }}>
              ←&nbsp;noun. lo que pasa cuando<br/>
              automatizas tu reventa
            </span>
          </span><br/>
          en 14 días.
        </h1>

        {/* Bottom row */}
        <div style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48, alignItems: 'end',
        }}>
          <div style={{ maxWidth: 360 }}>
            <div className="bs-eyebrow" style={{ marginBottom: 14 }}>EL PROBLEMA</div>
            <p style={{ margin: 0, fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.5 }}>
              Compras barato, vendes manual. 8h al día publicando, respondiendo y republicando. Sin saber qué precio poner. Sin saber qué se vende.
            </p>
          </div>

          <div style={{ maxWidth: 360 }}>
            <div className="bs-eyebrow acid" style={{ marginBottom: 14 }}>BLACKSTOCK</div>
            <p style={{ margin: 0, fontSize: 16, color: 'var(--fg)', lineHeight: 1.5 }}>
              Bot de mercado que te dice qué comprar. Multicuenta. IA que negocia, ofrece y republica. Academia paso a paso.
              <strong style={{ color: 'var(--acid)' }}> Una suscripción.</strong>
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <button onClick={onCTA} className="bs-btn bs-btn-acid" style={{ height: 60, padding: '0 32px', fontSize: 16 }}>
              Reservar mi plaza →
            </button>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
              ● ACCESO INMEDIATO · CANCELAS CUANDO QUIERAS
            </span>
          </div>
        </div>
      </div>
    </div>

    {/* Marquee */}
    <Marquee />
  </section>
);

/* HERO C — Interactive calculator */
const HeroC = ({ onCTA }) => {
  const [budget, setBudget] = React.useState(500);
  const [hours, setHours] = React.useState(2);

  // Modelo realista: margen ×2.1 sobre coste, esfuerzo escalado por horas/día
  const monthlyRevenue = Math.round(budget * 2.1 * (hours / 2) * 1.05);
  const monthlyProfit = Math.round(monthlyRevenue - budget);
  const itemsPerMonth = Math.round((budget / 8) * (hours / 2) * 1.4);

  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="bs-grid-bg" />
      <div className="bs-acid-glow" style={{ top: -100, right: -200 }} />

      <div className="bs-container" style={{ position: 'relative', zIndex: 1, paddingTop: 80, paddingBottom: 96 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          {/* Left */}
          <div>
            <span className="bs-pill acid" style={{ marginBottom: 24 }}>
              <span className="bs-dot live"></span>SIMULADOR EN VIVO
            </span>

            <h1 className="bs-display bs-h1" style={{ margin: 0, marginBottom: 24 }}>
              Calcula lo que <span style={{ color: 'var(--acid)' }}>ganarías</span><br/>
              con Blackstock.
            </h1>

            <p style={{ fontSize: 18, color: 'var(--fg-2)', maxWidth: 480, marginBottom: 32, lineHeight: 1.5 }}>
              Mueve los controles según tu situación. Estimación basada en datos reales
              de los <strong style={{ color: 'var(--fg)' }}>+30 resellers</strong> activos en el sistema este mes.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 480 }}>
              {/* Budget slider */}
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <span className="bs-eyebrow">PRESUPUESTO MENSUAL DE COMPRA</span>
                  <span className="bs-num" style={{ color: 'var(--acid)', fontSize: 18, fontWeight: 700 }}>
                    {budget}€
                  </span>
                </div>
                <BSSlider value={budget} min={100} max={3000} step={50} onChange={setBudget} />
              </div>

              {/* Hours slider */}
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <span className="bs-eyebrow">HORAS AL DÍA QUE LE DEDICAS</span>
                  <span className="bs-num" style={{ color: 'var(--acid)', fontSize: 18, fontWeight: 700 }}>
                    {hours}h
                  </span>
                </div>
                <BSSlider value={hours} min={0.5} max={6} step={0.5} onChange={setHours} />
              </div>
            </div>

            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <button onClick={onCTA} className="bs-btn bs-btn-acid">
                Empezar →
              </button>
              <button onClick={onCTA} className="bs-btn bs-btn-ghost">
                Cómo lo calculamos
              </button>
            </div>
          </div>

          {/* Right: result card */}
          <div style={{
            background: 'linear-gradient(180deg, var(--bg-2), var(--bg-1))',
            border: '1px solid var(--line-acid)',
            borderRadius: 20,
            padding: 32,
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -100, right: -80, width: 280, height: 280,
              borderRadius: '50%',
              background: 'radial-gradient(circle, var(--acid-glow), transparent 60%)',
              pointerEvents: 'none',
            }} />

            <div style={{ position: 'relative' }}>
              <div className="bs-eyebrow acid" style={{ marginBottom: 12 }}>PROYECCIÓN MENSUAL</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 4 }}>
                <span className="bs-num" style={{ fontSize: 80, fontWeight: 800, color: 'var(--acid)', letterSpacing: '-0.04em', lineHeight: 1 }}>
                  {monthlyProfit.toLocaleString('es-ES')}€
                </span>
              </div>
              <div style={{ color: 'var(--fg-3)', fontSize: 14, marginBottom: 24 }}>
                beneficio neto estimado · margen ×3.2 medio
              </div>

              <Sparkline width={520} height={90} />

              <div style={{
                marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line)',
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
              }}>
                <div>
                  <div className="bs-eyebrow" style={{ fontSize: 10 }}>FACTURACIÓN</div>
                  <div className="bs-num" style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>
                    {monthlyRevenue.toLocaleString('es-ES')}€
                  </div>
                </div>
                <div>
                  <div className="bs-eyebrow" style={{ fontSize: 10 }}>UNIDADES</div>
                  <div className="bs-num" style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>
                    {itemsPerMonth}
                  </div>
                </div>
                <div>
                  <div className="bs-eyebrow" style={{ fontSize: 10 }}>HORAS AHORRADAS</div>
                  <div className="bs-num" style={{ fontSize: 22, fontWeight: 700, marginTop: 4, color: 'var(--acid)' }}>
                    {Math.round(hours * 30 * 0.7)}h
                  </div>
                </div>
              </div>

              <div style={{
                marginTop: 24, padding: 14,
                background: 'rgba(214, 255, 77, 0.05)',
                border: '1px solid var(--line-acid)',
                borderRadius: 10,
                display: 'flex', alignItems: 'center', gap: 10,
                fontSize: 13, color: 'var(--fg-2)',
              }}>
                <div className="bs-dot" style={{ width: 8, height: 8 }}></div>
                <span>Recuperas la suscripción con <strong style={{ color: 'var(--acid)' }}>solo 2 ventas</strong> al mes.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const BSSlider = ({ value, min, max, step, onChange }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ position: 'relative', width: '100%', height: 28 }}>
      <div style={{
        position: 'absolute', top: 12, left: 0, right: 0, height: 4,
        borderRadius: 999, background: 'var(--bg-3)',
      }} />
      <div style={{
        position: 'absolute', top: 12, left: 0, width: `${pct}%`, height: 4,
        borderRadius: 999, background: 'var(--acid)',
        boxShadow: '0 0 12px var(--acid-glow)',
      }} />
      <input
        type="range"
        min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          opacity: 0, cursor: 'pointer',
        }}
      />
      <div style={{
        position: 'absolute', top: 6, left: `calc(${pct}% - 8px)`,
        width: 16, height: 16, borderRadius: '50%',
        background: 'var(--acid)',
        boxShadow: '0 0 0 4px rgba(214, 255, 77, 0.2), 0 4px 12px var(--acid-glow)',
        pointerEvents: 'none',
      }} />
    </div>
  );
};

/* Marquee strip */
const Marquee = () => {
  const items = [
    'BOT DE MERCADO 24/7', 'IA NEGOCIADORA', 'MULTICUENTA SIN VPN', 'RESTOCKS AUTO',
    'ACADEMIA INCLUIDA', 'PANEL UNIFICADO', 'ANTI-DETECCIÓN', '+30 RESELLERS ACTIVOS',
  ];
  return (
    <div style={{
      borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
      background: 'var(--bg-1)', overflow: 'hidden', padding: '20px 0',
    }}>
      <div style={{
        display: 'flex', gap: 48, whiteSpace: 'nowrap',
        animation: 'bsMarquee 40s linear infinite',
      }}>
        {[...items, ...items, ...items].map((item, i) => (
          <span key={i} style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500,
            color: i % 4 === 0 ? 'var(--acid)' : 'var(--fg-3)',
            letterSpacing: '0.06em', display: 'inline-flex', alignItems: 'center', gap: 48,
          }}>
            {item}
            <span style={{ color: 'var(--fg-4)' }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
};

/* ─── Mini-mockups visuales para VisualSections ─────────────── */

/* Pedidos — tabla con 5 filas y badges de estado */
const PedidosMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    overflow: 'hidden', boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 18px', borderBottom: '1px solid var(--line)',
      background: 'var(--bg-1)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}><span className="bs-dot live"></span>LIVE</span>
        <span className="bs-eyebrow" style={{ fontSize: 10 }}>PEDIDOS · ÚLTIMA HORA</span>
      </div>
      <span className="bs-num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--acid)' }}>+5</span>
    </div>
    <div>
      {[
        ['BS-1284', 'Carhartt Detroit M', '@archive.dpt', '92€', 'pagado'],
        ['BS-1283', 'Acne scarf wool', '@nordic.studio', '78€', 'enviado'],
        ['BS-1282', 'Birkenstock Boston 42', '@maison.eu', '65€', 'oferta IA'],
        ['BS-1281', 'Levi\'s 501 MIUSA W32', '@archive.dpt', '54€', 'enviado'],
        ['BS-1280', 'Stüssy 8-Ball 90s', '@nordic.studio', '48€', 'pagado'],
      ].map((r, i) => (
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '70px 1fr 110px 60px 90px',
          padding: '12px 18px',
          alignItems: 'center',
          borderBottom: i < 4 ? '1px solid var(--line)' : 'none',
          fontSize: 13,
        }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>{r[0]}</span>
          <span style={{ color: 'var(--fg)' }}>{r[1]}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>{r[2]}</span>
          <span className="bs-num" style={{ fontWeight: 600 }}>{r[3]}</span>
          <span style={{
            fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
            textTransform: 'uppercase',
            color: r[4] === 'oferta IA' ? 'var(--acid)' : 'var(--fg-2)',
          }}>{r[4] === 'oferta IA' ? '● ' : ''}{r[4]}</span>
        </div>
      ))}
    </div>
  </div>
);

/* Restocker — cola de re-publicaciones con timer */
const RestockerMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    padding: 22, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}><span className="bs-dot live"></span>ACTIVO</span>
        <span className="bs-eyebrow" style={{ fontSize: 10 }}>RESTOCKER · 24/7</span>
      </div>
      <span className="bs-num" style={{ fontSize: 22, fontWeight: 800, color: 'var(--acid)', letterSpacing: '-0.02em' }}>48</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { p: 'Our Legacy denim 33', s: 'Publicado hace 4m', tone: 'ok' },
        { p: 'Arc\'teryx Beta AR · M', s: 'En cola · 18m', tone: 'wait' },
        { p: 'Diesel archive denim 30', s: 'Programado 19:15', tone: 'wait' },
        { p: 'Salomon XT-6 41', s: 'En cola · 34m', tone: 'wait' },
      ].map((r, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '10px 12px',
          background: 'var(--bg-3)', border: '1px solid var(--line)', borderRadius: 8,
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.p}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{r.s}</div>
          </div>
          <span style={{
            width: 8, height: 8, borderRadius: '50%',
            background: r.tone === 'ok' ? 'var(--acid)' : 'var(--fg-3)',
            boxShadow: r.tone === 'ok' ? '0 0 8px var(--acid)' : 'none',
            flex: '0 0 auto', marginLeft: 12,
          }} />
        </div>
      ))}
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 14 }}>
      <MetricTile size="sm" label="HOY" value="48" sub="re-listings" />
      <MetricTile size="sm" label="VISTAS +7D" value="4.6k" sub="+18%" color="acid" />
      <MetricTile size="sm" label="CUENTAS" value="2" sub="en rotación" />
    </div>
  </div>
);

/* Inventario — barras de stock por producto */
const InventarioMockup = () => {
  const items = [
    { n: 'Carhartt Detroit M', s: 4, m: 6, p: 67, tone: '' },
    { n: 'Acne scarf wool', s: 1, m: 4, p: 25, tone: 'crit' },
    { n: 'Birkenstock Boston 42', s: 2, m: 5, p: 40, tone: 'warn' },
    { n: 'Levi\'s 501 MIUSA', s: 3, m: 5, p: 60, tone: '' },
    { n: 'Stüssy 8-Ball 90s', s: 6, m: 8, p: 75, tone: '' },
  ];
  return (
    <div style={{
      background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
      padding: 22, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}>STOCK</span>
          <span className="bs-eyebrow" style={{ fontSize: 10 }}>INVENTARIO · UNIFICADO</span>
        </div>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{items.length} REFS</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12.5 }}>
            <span style={{ flex: '0 0 130px', color: 'var(--fg-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.n}</span>
            <div style={{ flex: 1, height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{
                height: '100%', width: `${it.p}%`, borderRadius: 999,
                background: it.tone === 'crit' ? 'linear-gradient(90deg, #ff5a5a, #ff8a8a)' :
                           it.tone === 'warn' ? 'linear-gradient(90deg, #ffb84a, #ffd76a)' :
                           'linear-gradient(90deg, var(--acid), var(--acid-soft))',
              }} />
            </div>
            <span className="bs-num" style={{ flex: '0 0 50px', textAlign: 'right', color: 'var(--fg)', fontWeight: 600 }}>{it.s}/{it.m}</span>
            {it.tone === 'crit' ? <span className="bs-pill" style={{ height: 18, fontSize: 9, background: 'rgba(255,80,80,0.10)', borderColor: 'rgba(255,80,80,0.32)', color: '#ff8a8a' }}>BAJO</span> : null}
            {it.tone === 'warn' ? <span className="bs-pill" style={{ height: 18, fontSize: 9, background: 'rgba(255,200,60,0.10)', borderColor: 'rgba(255,200,60,0.32)', color: '#ffd76a' }}>MEDIO</span> : null}
            {!it.tone ? <span className="bs-pill acid" style={{ height: 18, fontSize: 9 }}>OK</span> : null}
          </div>
        ))}
      </div>
    </div>
  );
};

/* Etiquetas — preview tipo tracking */
const LabelMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    padding: 22, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}>0.9s</span>
        <span className="bs-eyebrow" style={{ fontSize: 10 }}>ETIQUETA · CDN PROPIO</span>
      </div>
      <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>14 HOY</span>
    </div>
    <div style={{
      background: '#fff', color: '#111', borderRadius: 10,
      padding: '14px 16px', fontFamily: 'JetBrains Mono, monospace',
      fontSize: 11, lineHeight: 1.5,
    }}>
      <div style={{ height: 26, background: 'repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 5px)', marginBottom: 10, opacity: 0.85 }} />
      <div style={{ fontWeight: 700, fontSize: 13 }}>BS-1284 · Correos Express</div>
      <div style={{ marginTop: 4 }}>De: @archive.dpt</div>
      <div>Para: Aitana V. — C/ Aribau 142, 08036 Barcelona</div>
      <div style={{ marginTop: 6, opacity: 0.65 }}>Peso: 0.6 kg · Servicio: 48h</div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 14 }}>
      <MetricTile size="sm" label="GENERADAS" value="178" sub="este mes" />
      <MetricTile size="sm" label="MEDIA" value="0.9s" sub="-0.2s" color="acid" />
      <MetricTile size="sm" label="ÉXITO" value="99.6%" />
    </div>
  </div>
);

/* Contabilidad — KPIs financieros */
const FinanzasMockup = () => (
  <div style={{
    background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 16,
    padding: 22, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="bs-pill acid" style={{ height: 22, fontSize: 10 }}>FINANZAS</span>
        <span className="bs-eyebrow" style={{ fontSize: 10 }}>MAYO 2026</span>
      </div>
      <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>+7% MoM</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
      <MetricTile label="INGRESOS" value="6.240€" sub="+4.8%" color="acid" />
      <MetricTile label="GASTOS" value="2.980€" sub="comisiones + envíos" />
      <MetricTile label="BENEFICIO" value="3.260€" sub="neto" color="acid" />
      <MetricTile label="MARGEN" value="38%" sub="+2pt" color="acid" />
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        ['archive.dpt', '+ 1.940€'],
        ['nordic.studio', '+ 870€'],
        ['maison.eu', '+ 450€'],
      ].map((r, i) => (
        <div key={i} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '8px 12px', background: 'var(--bg-3)',
          border: '1px solid var(--line)', borderRadius: 8,
          fontSize: 12.5,
        }}>
          <span style={{ color: 'var(--fg-2)', fontFamily: 'var(--font-mono)' }}>{r[0]}</span>
          <span className="bs-num" style={{ fontWeight: 700, color: 'var(--acid)' }}>{r[1]}</span>
        </div>
      ))}
    </div>
  </div>
);

/* VisualSections — sustituye HowItWorks/FeaturesGrid/Capabilities con
 * un encadenado de FeatureSplit + mockup. Cada sección es visual. */
const VisualSections = () => {
  const Split = window.FeatureSplit;
  if (!Split) return null;
  return (
    <>
      <Split
        tag="BOT DE MERCADO"
        title="Saber qué comprar antes de comprarlo."
        body="Pega un producto. El bot escanea Vinted EU en tiempo real y te devuelve precio sugerido, demanda y veredicto."
        bullets={['Análisis instantáneo', 'Demanda 7d / 30d', 'Precio sugerido por talla']}
        right={<BotMockup />}
      />
      <Split
        reverse
        tag="RESTOCKER"
        title="Re-publica solo, 24/7."
        body="Mantiene tus productos arriba del feed sin que toques el móvil. Reglas, horarios y rotación con jitter humano."
        bullets={['Re-listing cada 30 min', 'Jitter aleatorio ±4m', 'Pausa nocturna automática']}
        right={<RestockerMockup />}
      />
      <Split
        tag="SMART AGENT"
        title="Negocia y responde mientras duermes."
        body="IA en español que aplica tus márgenes, contraofertea y cierra ventas con tono natural."
        bullets={['Respuestas en 6s medio', 'Reglas de margen mínimas', 'Auto-aceptar ≥ 90%']}
        right={<ChatMockup />}
      />
      <Split
        reverse
        tag="MULTICUENTA"
        title="4 cuentas. Un panel. Cero VPN."
        body="Hasta 4 cuentas Vinted en paralelo desde la misma pestaña. Identidades aisladas, IPs únicas."
        bullets={['Hasta 4 cuentas en paralelo', 'Anti-detección integrado', 'Cambio de cuenta 1 click']}
        right={<MultiAccountMockup />}
      />
      <Split
        tag="PEDIDOS"
        title="Cada pedido capturado al instante."
        body="En cuanto entra un pedido, el sistema lo sincroniza y envía la etiqueta al panel en menos de 1 segundo."
        bullets={['Sync en tiempo real', 'Estado IA · pagado · enviado', 'Sin recargas manuales']}
        right={<PedidosMockup />}
      />
      <Split
        reverse
        tag="ETIQUETAS"
        title="Listas en menos de un segundo."
        body="Las generamos al instante y las guardamos en cdn.blackstock.es de forma permanente. Acceso desde cualquier dispositivo."
        bullets={['Tiempo medio 0.9s', 'Tasa éxito 99.8%', 'CDN propio Blackstock']}
        right={<LabelMockup />}
      />
      <Split
        tag="INVENTARIO"
        title="Stock unificado entre cuentas."
        body="Una sola fuente de verdad. Alertas automáticas de stock bajo antes de quedarte sin producto."
        bullets={['Alertas automáticas', 'Sincroniza todas tus cuentas', 'Vista por talla y variante']}
        right={<InventarioMockup />}
      />
      <Split
        reverse
        tag="CONTABILIDAD"
        title="Beneficio real, no facturación."
        body="Ingresos, comisiones, envíos y márgenes calculados solos. Listos para tu gestor sin Excel."
        bullets={['Beneficio neto por cuenta', 'Gastos categorizados', 'Export para gestoría']}
        right={<FinanzasMockup />}
      />
    </>
  );
};

window.PedidosMockup = PedidosMockup;
window.RestockerMockup = RestockerMockup;
window.InventarioMockup = InventarioMockup;
window.LabelMockup = LabelMockup;
window.FinanzasMockup = FinanzasMockup;
window.VisualSections = VisualSections;

/* Section: Cómo funciona (3 pasos) — DEPRECATED, mantenido por canvas */
const HowItWorks = () => {
  const steps = [
    {
      n: '01', label: 'COMPRAS BARATO',
      title: 'El bot te dice qué comprar.',
      body: 'Pegas un producto de China, AliExpress o cualquier mayorista. El bot analiza Vinted EU en tiempo real y te dice precio medio, demanda, competencia y si vale la pena.',
      detail: ['Análisis sin registro', 'Demanda 7d / 30d', 'Top sellers similares', 'Precio sugerido por talla'],
    },
    {
      n: '02', label: 'PUBLICAS UNA VEZ',
      title: 'Lo subes y olvidas.',
      body: 'El sistema crea la ficha optimizada (título, descripción, hashtags), la replica en N cuentas en paralelo y la republica automáticamente cuando pierde visibilidad.',
      detail: ['Multicuenta sin VPN', 'Restocks automáticos', 'A/B de fotos y precio', 'Anti-detección integrado'],
    },
    {
      n: '03', label: 'LA IA VENDE',
      title: 'Negocia, ofrece y cierra.',
      body: 'Responde mensajes, gestiona contraofertas y aplica ofertas a interesados según las reglas que tú marcas. Tú solo confirmas envíos desde el panel unificado.',
      detail: ['IA conversacional', 'Reglas de oferta', 'Likes inteligentes', 'Panel multicuenta único'],
    },
  ];

  return (
    <section className="bs-section" id="como-funciona">
      <div className="bs-container">
        <div className="bs-section-head">
          <span className="bs-eyebrow acid">CÓMO FUNCIONA</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>
            Tres pasos.
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 1.2fr 1fr', gap: 48,
              padding: '48px 0',
              borderTop: '1px solid var(--line)',
              alignItems: 'start',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 14,
                color: 'var(--acid)', letterSpacing: '0.05em',
              }}>
                {s.n}<br/>
                <span style={{ color: 'var(--fg-3)', fontSize: 11, marginTop: 6, display: 'block' }}>{s.label}</span>
              </div>
              <div>
                <h3 className="bs-display" style={{ fontSize: 36, fontWeight: 700, margin: 0, marginBottom: 12, letterSpacing: '-0.02em' }}>
                  {s.title}
                </h3>
                <p style={{ margin: 0, fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.5, maxWidth: 480 }}>
                  {s.body}
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {s.detail.map((d, j) => (
                  <div key={j} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '12px 16px',
                    background: 'var(--bg-1)',
                    border: '1px solid var(--line)',
                    borderRadius: 10,
                    fontSize: 14, color: 'var(--fg-2)',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    {d}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Section: Features grid (the system) */
const FeaturesGrid = () => {
  const features = [
    { tag: 'RESTOCKER', title: 'Republica con anti-detección', body: 'Cooldown 30m, rotación de photo sets contra pHash, reescritura de copy con IA y bajada de precio escalonada.', span: 2 },
    { tag: 'IA INBOX', title: 'Smart Offers', body: 'Acepta, contraoferta o rechaza según tus reglas de margen y comprador.', span: 1 },
    { tag: 'HUB', title: 'Multicuenta nativa', body: 'Cookies, sesiones y settings aislados por cuenta. Sin VPN, sin cruces.', span: 1 },
    { tag: 'ETIQUETAS', title: 'Impresión local automática', body: 'Puente local Mac/Win/Linux: la etiqueta llega a tu impresora sin diálogo.', span: 1 },
    { tag: 'BAZOOKA', title: 'Worker remoto 24/7', body: 'Cola de productos que ejecuta una máquina remota. No depende de tu navegador.', span: 1 },
  ];
  return (
    <section className="bs-section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }} id="sistema">
      <div className="bs-container">
        <div className="bs-section-head">
          <span className="bs-eyebrow acid">EL SISTEMA</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>
            Una <span style={{ color: 'var(--acid)' }}>suscripción</span>.<br/>Todo dentro.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {features.map((f, i) => (
            <div key={i} className="bs-card" style={{
              gridColumn: `span ${f.span}`,
              padding: 28,
              minHeight: 200,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              transition: 'border-color .2s ease, transform .2s ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-acid)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}
            >
              <div>
                <span className="bs-pill acid" style={{ height: 22, fontSize: 10, marginBottom: 16 }}>{f.tag}</span>
                <h3 className="bs-display" style={{ fontSize: 26, fontWeight: 700, margin: 0, marginBottom: 10, letterSpacing: '-0.02em' }}>
                  {f.title}
                </h3>
                <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.5 }}>{f.body}</p>
              </div>
              <div style={{
                marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)', letterSpacing: '0.06em',
              }}>
                INCLUIDO →
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Section: Casos de éxito */
const Cases = () => {
  const cases = [
    {
      name: 'Marc V.', age: 26, city: 'Barcelona',
      before: '210€/mes', after: '1.180€/mes', months: 5,
      quote: 'Compraba archive en mercadillos los sábados. Con Blackstock paso de tener 12 prendas listadas a 60. La IA me ahorra responder mensajes mientras trabajo.',
    },
    {
      name: 'Andrea P.', age: 31, city: 'Madrid',
      before: '0€', after: '720€/mes', months: 3,
      quote: 'Empecé vendiendo mi armario y ropa de mi hermana. Lo importante para mí ha sido el panel: ver el inventario y la contabilidad reales sin Excel.',
    },
    {
      name: 'Diego R.', age: 24, city: 'Valencia',
      before: '380€/mes', after: '2.140€/mes', months: 7,
      quote: 'Llevo 3 cuentas con vintage y workwear. El restocker mantiene los listings arriba sin que toque el móvil. Es un trabajo, no una pasión.',
    },
  ];
  return (
    <section className="bs-section" id="casos">
      <div className="bs-container">
        <div className="bs-section-head">
          <span className="bs-eyebrow acid">CASOS REALES</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>
            Datos reales.<br/>Cuentas reales.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {cases.map((c, i) => (
            <div key={i} className="bs-card elevated" style={{ padding: 28 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 17 }}>{c.name}</div>
                  <div style={{ color: 'var(--fg-3)', fontSize: 13 }}>{c.age} · {c.city}</div>
                </div>
                <div className="bs-pill acid" style={{ height: 24, fontSize: 10 }}>VERIFICADO</div>
              </div>

              <div style={{
                display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 8, alignItems: 'end',
                padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
                marginBottom: 20,
              }}>
                <div>
                  <div className="bs-eyebrow" style={{ fontSize: 10 }}>ANTES</div>
                  <div className="bs-num" style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-3)', marginTop: 4 }}>
                    {c.before}
                  </div>
                </div>
                <div style={{ color: 'var(--acid)', fontSize: 24, paddingBottom: 4 }}>→</div>
                <div style={{ textAlign: 'right' }}>
                  <div className="bs-eyebrow" style={{ fontSize: 10 }}>AHORA · {c.months} MESES</div>
                  <div className="bs-num" style={{ fontSize: 26, fontWeight: 700, color: 'var(--acid)', marginTop: 4 }}>
                    {c.after}
                  </div>
                </div>
              </div>

              <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>
                "{c.quote}"
              </p>
            </div>
          ))}
        </div>

        {/* Aggregate stats */}
        <div style={{
          marginTop: 60,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: 'var(--bg-1)', border: '1px solid var(--line)',
          borderRadius: 16, padding: '32px 0',
        }}>
          {[
            { v: '+74.000€', l: 'facturados por resellers activos este mes' },
            { v: '×2.1', l: 'margen medio sobre coste' },
            { v: '91%', l: 'mantienen suscripción tras mes 1' },
            { v: '4.8/5', l: 'rating · resellers verificados' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '0 32px',
              borderRight: i < 3 ? '1px solid var(--line)' : 'none',
              textAlign: 'center',
            }}>
              <div className="bs-num" style={{ fontSize: 36, fontWeight: 700, color: 'var(--acid)', letterSpacing: '-0.025em' }}>
                {s.v}
              </div>
              <div style={{ color: 'var(--fg-3)', fontSize: 13, marginTop: 6 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Section: Pricing — solo planes mensuales reales */
const Pricing = ({ onCTA }) => {
  const plans = [
    {
      code: 'basic',
      name: 'BASIC', tag: 'Estándar',
      price: 22.90,
      desc: 'Todo Blackstock + Anty. Opera desde tu equipo.',
      features: [
        '★ Blackstock Anty · navegador antidetect privado',
        'Restocker · Smart Agent · IA Inbox',
        'Multicuenta nativa',
        'Panel operativo + inventario',
        'Pedidos sincronizados + etiquetas',
        'Analytics + automatizaciones',
        'Academia paso a paso',
        'Soporte por email',
      ],
      cta: 'Agendar llamada', highlight: false,
    },
    {
      code: 'pro',
      name: 'PRO', tag: 'Incluye Bazooka',
      price: 149.90,
      desc: 'Todo Blackstock + Bazooka. Infraestructura remota 24/7.',
      features: [
        'Todo lo de BASIC',
        '★ Bazooka · worker remoto 24/7',
        'Ejecución cloud persistente',
        'Automatizaciones sin tu ordenador',
        'Infraestructura dedicada',
      ],
      cta: 'Agendar llamada', highlight: true,
    },
  ];

  return (
    <section className="bs-section" id="planes" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="bs-container">
        <div className="bs-section-head" style={{ alignItems: 'flex-start' }}>
          <span className="bs-eyebrow acid">PLANES MENSUALES</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>
            Planes.
          </h2>
          <p style={{ marginTop: 12, color: 'var(--fg-2)', fontSize: 14, maxWidth: 540 }}>
            Acceso bajo llamada. Te ayudamos a elegir plan en 15 minutos. Sin permanencia.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, alignItems: 'stretch', maxWidth: 880, margin: '0 auto' }}>
          {plans.map((p, i) => (
            <div key={i} style={{
              background: p.highlight ? 'linear-gradient(180deg, rgba(214,255,77,0.04), var(--bg-2))' : 'var(--bg-2)',
              border: p.highlight ? '1px solid var(--line-acid)' : '1px solid var(--line)',
              borderRadius: 16,
              padding: 32,
              display: 'flex', flexDirection: 'column',
              position: 'relative',
              boxShadow: p.highlight ? '0 30px 80px -30px rgba(214,255,77,0.18)' : 'none',
            }}>
              {p.highlight && (
                <div style={{
                  position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                  background: 'var(--acid)', color: '#000',
                  padding: '6px 14px', borderRadius: 999,
                  fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                }}>★ INCLUYE BAZOOKA</div>
              )}

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <span className="bs-display" style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>
                  {p.name}
                </span>
                <span className="bs-pill" style={{ height: 22, fontSize: 10 }}>{p.tag}</span>
              </div>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '20px 0 8px' }}>
                <span className="bs-num" style={{
                  fontSize: 56, fontWeight: 800,
                  color: p.highlight ? 'var(--acid)' : 'var(--fg)',
                  letterSpacing: '-0.04em', lineHeight: 1,
                }}>{p.price}€</span>
                <span style={{ color: 'var(--fg-3)', fontSize: 13 }}>/mes</span>
              </div>
              <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 14, marginBottom: 24, minHeight: 44 }}>
                {p.desc}
              </p>

              <button
                onClick={() => onCTA && onCTA(p.code)}
                className={p.highlight ? 'bs-btn bs-btn-acid' : 'bs-btn bs-btn-ghost'}
                style={{ width: '100%', marginBottom: 24 }}
              >
                {p.cta} →
              </button>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {p.features.map((f, j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-2)' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'center', gap: 24,
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em',
          flexWrap: 'wrap',
        }}>
          <span>● ACCESO BAJO LLAMADA</span>
          <span>● SIN PERMANENCIA</span>
          <span>● CANCELAS CUANDO QUIERAS</span>
        </div>
      </div>
    </section>
  );
};

/* FAQ */
const FAQ = () => {
  const items = [
    { q: '¿Qué pasa si no he vendido nada en mi vida?', a: 'La academia (incluida) te lleva desde cero: cómo elegir producto, fotos, descripciones, precios. Muchos resellers empezaron sin experiencia previa, pero con tiempo para tratar esto como un proyecto serio.' },
    { q: '¿Vinted me puede banear por usar automatizaciones?', a: 'Blackstock opera dentro de patrones humanos: jitter aleatorio, ventanas de pausa y aprobación manual de las acciones críticas. Aun así, ninguna automatización elimina el riesgo al 100%; eres tú quien lo asume sobre tus cuentas.' },
    { q: '¿Cuánto tardo en recuperar la inversión?', a: 'BASIC son 22,90€/mes. Con un margen sano y un par de ventas a la semana, la suscripción se cubre sola. No prometemos resultados: depende de tu producto, fotos y tiempo invertido.' },
    { q: '¿Puedo cancelar cuando quiera?', a: 'Sí, sin permanencia. Cancelas desde tu panel cuando quieras. Mantienes acceso hasta el final del mes pagado. Sin preguntas, sin retención.' },
    { q: '¿Y Hacienda?', a: 'En España, Vinted reporta operaciones desde 2.000€ o 30 ventas anuales (DAC7). En la academia te explicamos cómo declarar correctamente según tu volumen.' },
    { q: '¿Cuántas cuentas de Vinted puedo gestionar?', a: 'Sin límite. La extensión es multicuenta nativa: aisla cookies, sesiones y settings por cuenta. Recomendado un perfil de Chrome distinto por cuenta con más de 500 ítems.' },
    { q: '¿La impresión de etiquetas es realmente automática?', a: 'Sí. Un puente local en tu equipo (Mac, Windows o Linux) recibe el PDF y lo manda a tu impresora sin diálogo. Detecta pedidos nuevos cada 20 minutos.' },
    { q: '¿Funciona en países fuera de España?', a: 'Sí. Soporta los 27 dominios Vinted EU activos: España, Francia, Italia, Alemania, UK, NL, BE, PT, PL, CZ, SK, LT, LV, EE, HU, RO, AT, DK, FI, SE, IE, LU, HR, SI, GR + .com / .co.uk.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="bs-section" id="faq">
      <div className="bs-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <span className="bs-eyebrow acid">DUDAS FRECUENTES</span>
            <h2 className="bs-display bs-h2" style={{ margin: '16px 0 24px' }}>
              FAQ.
            </h2>
            <button onClick={() => window.bsOpenBooking && window.bsOpenBooking()} className="bs-btn bs-btn-ghost">Agendar llamada →</button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)' }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', padding: '24px 0',
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    color: 'var(--fg)', textAlign: 'left',
                    fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em',
                  }}
                >
                  {it.q}
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    border: '1px solid var(--line-2)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, color: open === i ? 'var(--acid)' : 'var(--fg-3)',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform .25s ease, color .15s ease',
                    flexShrink: 0,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 200 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .3s ease, padding .3s ease',
                  paddingBottom: open === i ? 24 : 0,
                }}>
                  <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.55, maxWidth: 560 }}>
                    {it.a}
                  </p>
                </div>
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--line)' }} />
          </div>
        </div>
      </div>
    </section>
  );
};

/* Capabilities — explica las funciones premium con cards
 * Cada card describe un módulo del sistema. Animaciones via [data-bs-reveal].
 */
const Capabilities = () => {
  const items = [
    {
      tab: 'restocker',
      tag: 'AUTOMATIZACIÓN',
      title: 'Restocker 24/7',
      body: 'Re-publica tus productos cada 30 minutos para mantenerlos arriba del feed. Sin tocar el móvil, sin riesgo de baneo.',
      icon: 'M21 12a9 9 0 1 1-3-6.7L21 8V3 M21 12h-5',
    },
    {
      tab: 'smart',
      tag: 'IA EN ESPAÑOL',
      title: 'Smart Agent',
      body: 'Negocia ofertas y responde dudas en tu nombre con tono natural. Tú defines márgenes y reglas, él ejecuta.',
      icon: 'M12 2v3 M12 19v3 M4.2 4.2l2.1 2.1 M17.7 17.7l2.1 2.1 M2 12h3 M19 12h3',
    },
    {
      tab: 'pedidos',
      tag: 'TIEMPO REAL',
      title: 'Sincronización de pedidos',
      body: 'Capturamos cada pedido al instante en cuanto entra. Etiqueta lista en menos de 1 segundo y enviada al panel.',
      icon: 'M3 7h18 M3 12h18 M3 17h18',
    },
    {
      tab: 'multicuenta',
      tag: 'MULTICUENTA',
      title: 'Varias cuentas, un panel',
      body: 'Gestiona hasta 4 cuentas Vinted desde un único dashboard. Sin saltar entre logins, con IPs únicas por cuenta.',
      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: 'labels',
      tag: 'CDN PROPIO',
      title: 'Etiquetas instantáneas',
      body: 'Generamos cada etiqueta de envío en 0.9s y la guardamos en cdn.blackstock.es para acceso permanente desde cualquier dispositivo.',
      icon: 'M3 5a2 2 0 0 1 2-2h7l9 9-7 7-9-9V5z M7 9.5h.01',
    },
    {
      tab: 'inbox',
      tag: 'IA CONTEXTUAL',
      title: 'IA Inbox unificado',
      body: 'Todos los mensajes en un mismo sitio, resumidos y priorizados por IA. Lo urgente lo ves; lo trivial se responde solo.',
      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',
    },
    {
      tab: 'multicuenta',
      tag: 'CLOUD WORKER',
      title: 'Worker remoto',
      body: 'Tus cuentas operan desde nuestra infraestructura cloud. Restocker y Smart Agent siguen activos aunque cierres el portátil.',
      icon: 'M18 10a8 8 0 0 0-15.78-1A6 6 0 0 0 4 21h13a5 5 0 0 0 1-9.9z',
    },
    {
      tab: 'inventario',
      tag: 'STOCK',
      title: 'Inventario unificado',
      body: 'Una sola fuente de verdad para todas tus cuentas. Alertas automáticas de stock crítico antes de quedarte sin producto.',
      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: 'contabilidad',
      tag: 'FINANZAS',
      title: 'Contabilidad real',
      body: 'Beneficio neto, comisiones, gastos de envío y márgenes. Listo para exportar a tu gestor sin hojas de cálculo manuales.',
      icon: 'M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',
    },
    {
      tab: 'dashboard',
      tag: 'INSIGHTS',
      title: 'Dashboard ejecutivo',
      body: 'Ingresos, pedidos, márgenes y rendimiento por cuenta. Decisiones basadas en datos reales, no en sensaciones.',
      icon: 'M3 12h4l3-9 4 18 3-9h4',
    },
    {
      tab: 'smart',
      tag: 'OFERTAS',
      title: 'Auto-negociación',
      body: 'Acepta automáticamente ofertas que cumplen tu margen mínimo y contraofertea las demás. Sin perder ventas mientras duermes.',
      icon: 'M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z',
    },
    {
      tab: 'dashboard',
      tag: 'FORMACIÓN',
      title: 'Academia incluida',
      body: 'Acceso al programa Blackstock Academy: curso completo de reventa en Vinted, comunidad privada y soporte directo.',
      icon: 'M22 10v6 M2 10l10-5 10 5-10 5z M6 12v5c3 3 9 3 12 0v-5',
    },
  ];

  return (
    <section className="bs-section" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="bs-container">
        <div style={{ marginBottom: 40, maxWidth: 760 }} data-bs-reveal>
          <div className="bs-eyebrow"><span className="dot" />TODO EL SISTEMA</div>
          <h2 style={{ fontSize: 'clamp(28px, 5vw, 44px)', fontWeight: 800, letterSpacing: '-0.025em', margin: '0 0 12px', color: 'var(--fg)' }}>
            Doce módulos. Un único panel.
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-3)', lineHeight: 1.6, margin: 0 }}>
            Cada parte del sistema está pensada para sustituir una hora de trabajo manual al día. Toca cualquiera para ver una demo en vivo.
          </p>
        </div>

        <div className="bs-feat-grid">
          {items.map((it, i) => (
            <button
              key={it.title}
              type="button"
              className="bs-feat-card"
              data-bs-reveal
              data-bs-reveal-delay={i * 35}
              onClick={() => window.bsOpenDemo && window.bsOpenDemo(it.tab)}
              style={{ textAlign: 'left', cursor: 'pointer', font: 'inherit' }}
            >
              <span className="ic">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d={it.icon} />
                </svg>
              </span>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
              <span className="tag">{it.tag}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Team section — real team photo */
const Team = () => (
  <section className="bs-section" style={{ paddingTop: 96, paddingBottom: 96 }}>
    <div className="bs-container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{
          position: 'relative',
          borderRadius: 20,
          overflow: 'hidden',
          border: '1px solid var(--line-2)',
          aspectRatio: '9 / 14',
          background: 'var(--bg-1)',
          maxWidth: 520,
        }}>
          <img
            src="assets/team.png"
            alt="Equipo Blackstock en el almacén"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <div style={{
            position: 'absolute', top: 16, left: 16,
          }}>
            <span className="bs-pill acid" style={{ height: 24, fontSize: 10 }}>
              <span className="bs-dot live"></span>EQUIPO REAL
            </span>
          </div>
          <div style={{
            position: 'absolute', bottom: 16, left: 16, right: 16,
            display: 'flex', justifyContent: 'space-between',
            fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            background: 'rgba(10,11,7,0.6)',
            backdropFilter: 'blur(8px)',
            padding: '8px 12px', borderRadius: 8,
            border: '1px solid var(--line)',
          }}>
            <span>HQ · ALMACÉN</span>
            <span>2026</span>
          </div>
        </div>

        <div>
          <span className="bs-eyebrow acid">DETRÁS DEL HUB</span>
          <h2 className="bs-display bs-h2" style={{ margin: '16px 0 24px' }}>
            No somos un curso.<br/>
            <span style={{ color: 'var(--acid)' }}>Vendemos lo mismo que tú.</span>
          </h2>
          <p style={{ color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.55, margin: 0, marginBottom: 28, maxWidth: 460 }}>
            Blackstock lo construye gente que enviaba paquetes cada día. Cada feature del Hub sale de una fricción real en nuestro propio almacén.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
            {[
              { v: '+12.000', l: 'pedidos enviados\npor el equipo' },
              { v: '4 años', l: 'vendiendo en\nVinted EU' },
              { v: '24/7', l: 'el Hub corre\ntambién para nosotros' },
            ].map((s, i) => (
              <div key={i} className="bs-stat" style={{ borderColor: 'var(--line-2)' }}>
                <div className="value" style={{ color: i === 0 ? 'var(--acid)' : 'var(--fg)' }}>{s.v}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', whiteSpace: 'pre-line', lineHeight: 1.4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Final CTA */
const FinalCTA = ({ onCTA }) => (
  <section style={{ position: 'relative', padding: '120px 0', overflow: 'hidden' }}>
    <div className="bs-acid-glow" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 900, height: 900, opacity: 0.6 }} />

    <div className="bs-container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
      <span className="bs-eyebrow acid" style={{ marginBottom: 24, display: 'block' }}>EMPEZAR HOY</span>
      <h2 className="bs-display" style={{
        fontSize: 'clamp(56px, 8vw, 128px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.9,
        margin: 0, marginBottom: 32,
        textWrap: 'balance',
      }}>
        <span style={{ display: 'block' }}>Convierte China</span>
        <span style={{ display: 'block', color: 'var(--acid)', fontStyle: 'italic', fontWeight: 700, letterSpacing: '-0.045em' }}>en dinero.</span>
      </h2>
      <p style={{ fontSize: 16, color: 'var(--fg-2)', maxWidth: 480, margin: '0 auto 36px', lineHeight: 1.55 }}>
        Sistema operativo para reventa en Vinted EU. Desde 22,90€/mes, sin permanencia.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button onClick={onCTA} className="bs-btn bs-btn-acid" style={{ height: 60, padding: '0 32px', fontSize: 16 }}>
          Empezar →
        </button>
        <button onClick={() => window.bsOpenDemo && window.bsOpenDemo()} className="bs-btn bs-btn-ghost" style={{ height: 60, padding: '0 32px', fontSize: 16 }}>
          Ver el panel
        </button>
      </div>
    </div>
  </section>
);

/* Top banner */
const TopBanner = () => (
  <div style={{
    background: 'var(--acid)', color: '#0A0B07',
    fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.06em', textAlign: 'center', padding: '8px 0',
  }}>
    ✦&nbsp;&nbsp;RESELLERS ACTIVOS · MAYO 2026&nbsp;&nbsp;✦&nbsp;&nbsp;PLAZAS LIMITADAS&nbsp;&nbsp;✦&nbsp;&nbsp;BASIC DESDE 22,90€/MES · SIN PERMANENCIA&nbsp;&nbsp;✦
  </div>
);

/* HomeAntyTeaser · bloque para invitar a la página dedicada de Anty
 * desde la home. Es solo un teaser — el detalle premium vive en /anty. */
const HomeAntyTeaser = ({ onNavigate, onCTA }) => (
  <section className="bs-section" style={{
    borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
    background: 'linear-gradient(180deg, rgba(214,255,77,0.025), transparent 60%)',
  }}>
    <div className="bs-container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <span aria-hidden="true" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              filter: 'drop-shadow(0 0 18px rgba(214,255,77,0.4))',
            }}>
              <LogoMark size={32} />
            </span>
            <span className="bs-eyebrow acid">NUEVO · INCLUIDO EN BASIC</span>
          </div>
          <h2 className="bs-display bs-h2" style={{ margin: 0, letterSpacing: '-0.02em' }}>
            Blackstock <span style={{ color: 'var(--acid)' }}>Anty</span>.<br />
            Tu navegador privado.
          </h2>
          <p style={{ marginTop: 22, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 480 }}>
            Chromium aislado por cuenta con TLS Safari iOS, fingerprint por perfil y proxy
            dedicado. Sin antidetects de pago. Sin contaminación entre sesiones.
          </p>
          <ul style={{
            listStyle: 'none', padding: 0, margin: '24px 0 0',
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8,
            fontSize: 13, color: 'var(--fg-2)',
          }}>
            {['TLS JA3 Safari iOS', 'WebRTC guard MV3', 'iOS Deep Profile', 'Vault local cifrado'].map((f, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                {f}
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
            <button className="bs-btn bs-btn-acid" onClick={() => onNavigate && onNavigate('anty')}>
              Conocer Anty →
            </button>
            <button className="bs-btn bs-btn-ghost" onClick={() => onCTA && onCTA('basic')}>
              Empezar con BASIC
            </button>
          </div>
        </div>
        <div style={{
          position: 'relative',
          borderRadius: 16,
          overflow: 'hidden',
          background: 'linear-gradient(180deg, var(--bg-2), var(--bg-1))',
          border: '1px solid var(--line)',
          minHeight: 320,
          boxShadow: '0 40px 100px -40px rgba(0,0,0,0.5)',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(50% 40% at 70% 40%, rgba(214,255,77,0.08), transparent 70%)',
            pointerEvents: 'none',
          }} />
          <div style={{ padding: 24, position: 'relative' }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)',
              letterSpacing: '0.1em', marginBottom: 16,
            }}>
              BLACKSTOCK ANTY · DASHBOARD
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {[
                { i: 'M', n: 'Maria · Vinted ES', s: 'Activo', c: '#B6FF00', sc: '#B6FF00' },
                { i: 'L', n: 'Lucia FR', s: 'Parado', c: '#60A5FA', sc: 'var(--fg-3)' },
                { i: 'B', n: 'Bot warmup', s: 'Parado', c: '#F59E0B', sc: 'var(--fg-3)' },
                { i: 'A', n: 'Anna DE', s: 'Activo', c: '#A78BFA', sc: '#B6FF00' },
              ].map((p, i) => (
                <div key={i} style={{
                  background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 10, padding: 10,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <span style={{
                      width: 24, height: 24, borderRadius: 6,
                      background: p.c, color: '#0A0B07',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 10, fontWeight: 700,
                    }}>{p.i}</span>
                    <div style={{
                      fontSize: 11, fontWeight: 500, lineHeight: 1.2, minWidth: 0,
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>
                      {p.n}
                    </div>
                  </div>
                  <div style={{
                    fontSize: 9, color: p.sc,
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                  }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: p.sc }} />
                    {p.s}
                  </div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 16, padding: 12, borderRadius: 10,
              background: 'var(--bg)', border: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--acid)' }} />
              <div style={{ fontSize: 11, color: 'var(--fg)' }}>Licencia activa</div>
              <div style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--fg-3)' }}>year · expira 11 may 2027</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);
window.HomeAntyTeaser = HomeAntyTeaser;

const HomePage = ({ heroVariant = 'A', onNavigate, onCTA }) => {
  const Hero = heroVariant === 'B' ? HeroB : heroVariant === 'C' ? HeroC : HeroA;
  return (
    <div className="bs-shell">
      <TopBanner />
      <Nav activePage="home" onNavigate={onNavigate} />
      <Hero onCTA={onCTA} />
      {heroVariant !== 'B' && <Marquee />}
      <VisualSections />
      <HomeAntyTeaser onNavigate={onNavigate} onCTA={onCTA} />
      <Cases />
      <Team />
      <Pricing onCTA={onCTA} />
      <FAQ />
      <FinalCTA onCTA={onCTA} />
      <Footer />
    </div>
  );
};

/* ============================================================
 *  MOBILE LANDING — diseñada desde cero para móvil.
 *  Se renderiza en lugar de HomePage cuando viewport ≤ 720px.
 *  No es la desktop comprimida: composición distinta, mockup
 *  tipo phone, módulos verticales apilados, sticky CTA inferior.
 * ============================================================ */

/* HeroMobile — copy mínimo + phone-frame mockup vertical + CTAs */
const HeroMobile = ({ onCTA }) => (
  <section className="bs-m-hero">
    <div className="bs-m-glow" />
    <div className="bs-m-container">
      <div style={{ display: 'inline-flex', gap: 6, flexWrap: 'wrap' }}>
        <span className="bs-pill acid"><span className="bs-dot live"></span>RESELLERS ACTIVOS · MAYO 2026</span>
        <span className="bs-pill">VINTED EU · OS</span>
      </div>

      <h1 className="bs-display bs-m-claim">
        <span style={{ display: 'block' }}>Convierte China</span>
        <span style={{ display: 'block', color: 'var(--acid)', fontStyle: 'italic', fontWeight: 700 }}>en dinero.</span>
      </h1>

      <div className="bs-m-mono">— SISTEMA OPERATIVO PARA REVENTA EN VINTED EU —</div>
      <p className="bs-m-sub">
        Restocker, IA y multicuenta en una sola pantalla. Pensado para resellers que tratan esto como un negocio.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button onClick={onCTA} className="bs-btn bs-btn-acid bs-m-cta">Empezar →</button>
        <button onClick={() => window.bsOpenDemo && window.bsOpenDemo()} className="bs-btn bs-btn-ghost bs-m-cta">Ver el panel</button>
      </div>
    </div>

    {/* Phone mockup — pantalla del panel real escalada para móvil */}
    <PhoneMockup />

    {/* KPIs 2x2 */}
    <div className="bs-m-kpis">
      {[
        { v: '+3h', l: 'al día sin tareas manuales', acid: true },
        { v: '×2.1', l: 'margen medio sobre coste' },
        { v: '4', l: 'cuentas en paralelo' },
        { v: '99.9%', l: 'uptime sync · 30d' },
      ].map((p, i) => (
        <div key={i} className="bs-m-kpi">
          <div className="bs-num" style={{ color: p.acid ? 'var(--acid)' : 'var(--fg)' }}>{p.v}</div>
          <div className="bs-m-kpi-l">{p.l}</div>
        </div>
      ))}
    </div>
  </section>
);

/* PhoneMockup — frame de iPhone con preview Pedidos. */
const PhoneMockup = () => (
  <div className="bs-m-phone-wrap" data-bs-reveal>
    <div className="bs-m-phone">
      <div className="bs-m-phone-notch" />
      <div className="bs-m-phone-screen">
        {/* Status bar fake */}
        <div className="bs-m-phone-status">
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4 }}>
            <span style={{ width: 14, height: 9, border: '1px solid var(--fg-3)', borderRadius: 2 }} />
            <span style={{ fontSize: 9, color: 'var(--fg-3)' }}>5G</span>
          </span>
        </div>

        {/* Header del panel mobile */}
        <div className="bs-m-phone-header">
          <div className="bs-brand-mark">
            <svg width="14" height="14" 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>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--acid)' }}>BLACKSTOCK OS</div>
            <div style={{ fontSize: 11, color: 'var(--fg-2)' }}>Pedidos · 16 esta semana</div>
          </div>
        </div>

        {/* KPI strip */}
        <div className="bs-m-phone-kpis">
          <div><span className="l">INGRESOS · 7D</span><span className="v">2.140€</span></div>
          <div><span className="l">PEDIDOS</span><span className="v">16</span></div>
        </div>

        {/* Lista de pedidos */}
        <div className="bs-m-phone-list">
          {[
            ['Carhartt Detroit M', 'Aitana V.', '92€', 'PAGADO', 'ok'],
            ['Acne scarf wool', 'Iker S.', '78€', 'ENVIADO', 'ship'],
            ['Birkenstock Boston 42', 'Marina C.', '65€', 'OFERTA IA', 'live'],
            ['Levi\'s 501 MIUSA W32', 'Pol M.', '54€', 'ENVIADO', 'ship'],
            ['Stüssy 8-Ball 90s', 'Júlia R.', '48€', 'PAGADO', 'ok'],
          ].map((r, i) => (
            <div key={i} className="bs-m-phone-row">
              <div className="thumb" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t">{r[0]}</div>
                <div className="c">{r[1]} · <span className="bs-num" style={{ color: 'var(--fg)' }}>{r[2]}</span></div>
              </div>
              <span className={`badge ${r[4]}`}>{r[3]}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

/* MobileFeatureCard — tarjeta apilada con mini preview */
const MobileFeatureCard = ({ tag, title, body, preview }) => (
  <article className="bs-m-feat" data-bs-reveal>
    <span className="bs-m-feat-tag">{tag}</span>
    <h3 className="bs-m-feat-title">{title}</h3>
    <p className="bs-m-feat-body">{body}</p>
    {preview && <div className="bs-m-feat-preview">{preview}</div>}
  </article>
);

const MobileSections = () => {
  const items = [
    {
      tag: 'BOT DE MERCADO',
      title: 'Saber qué comprar antes de comprarlo.',
      body: 'Pega un producto. El bot escanea Vinted EU y te devuelve precio sugerido, demanda y veredicto.',
      preview: (
        <div className="bs-m-preview-stat">
          <div className="row"><span>Demanda 7d</span><span className="bs-num" style={{ color: 'var(--acid)' }}>118</span></div>
          <div className="row"><span>Precio medio</span><span className="bs-num">92€</span></div>
          <div className="row"><span>Margen</span><span className="bs-num" style={{ color: 'var(--acid)' }}>×2.3</span></div>
          <div className="verdict">✦ <strong>Compra.</strong> Publica a 89€.</div>
        </div>
      ),
    },
    {
      tag: 'RESTOCKER',
      title: 'Re-publica solo, 24/7.',
      body: 'Mantiene tus productos arriba del feed sin que toques el móvil. Reglas, horarios y jitter humano.',
      preview: (
        <div className="bs-m-preview-list">
          <div><span className="dot ok"/> Carhartt Detroit M <em>publicado · 4m</em></div>
          <div><span className="dot wait"/> Acne scarf wool <em>en cola · 18m</em></div>
          <div><span className="dot wait"/> Birkenstock Boston 42 <em>programado 19:15</em></div>
        </div>
      ),
    },
    {
      tag: 'SMART AGENT',
      title: 'Negocia mientras duermes.',
      body: 'IA en español que aplica tus márgenes, contraofertea y cierra ventas con tono natural.',
      preview: (
        <div className="bs-m-preview-chat">
          <div className="msg them">¿Lo dejarías a 70€?</div>
          <div className="msg us">A 70€ no me sale. Mínimo 82€ con envío.</div>
          <div className="msg them">¿Y 78€?</div>
          <div className="msg us">Cerramos en 80€.</div>
        </div>
      ),
    },
    {
      tag: 'MULTICUENTA',
      title: '4 cuentas. Un panel.',
      body: 'Hasta 4 cuentas Vinted en paralelo desde la misma pestaña. Identidades aisladas, IPs únicas.',
      preview: (
        <div className="bs-m-preview-grid">
          {[
            ['archive.dpt', '118€', 'acid'],
            ['nordic.studio', '76€', ''],
            ['maison.eu', '54€', ''],
            ['boldface', '32€', ''],
          ].map((a, i) => (
            <div key={i}>
              <div className="acc">@{a[0]}</div>
              <div className="bs-num" style={{ color: a[2] === 'acid' ? 'var(--acid)' : 'var(--fg)' }}>{a[1]}</div>
            </div>
          ))}
        </div>
      ),
    },
    {
      tag: 'PEDIDOS',
      title: 'Cada pedido capturado al instante.',
      body: 'En cuanto entra, el sistema lo sincroniza y envía la etiqueta al panel en menos de 1 segundo.',
      preview: (
        <div className="bs-m-preview-list">
          <div><span className="dot ok" /> BS-1284 · Aitana V. <em>92€ · pagado</em></div>
          <div><span className="dot ship" /> BS-1283 · Iker S. <em>78€ · enviado</em></div>
          <div><span className="dot wait" /> BS-1282 · Marina C. <em>65€ · pendiente</em></div>
        </div>
      ),
    },
    {
      tag: 'INVENTARIO',
      title: 'Stock unificado entre cuentas.',
      body: 'Una sola fuente de verdad. Alertas automáticas antes de quedarte sin producto.',
      preview: (
        <div className="bs-m-preview-bars">
          {[
            ['Carhartt Detroit M', 67, ''],
            ['Acne scarf wool', 25, 'crit'],
            ['Birkenstock 42', 40, 'warn'],
            ['Stüssy 8-Ball', 75, ''],
          ].map((r, i) => (
            <div key={i}>
              <div className="lbl">{r[0]}</div>
              <div className="bar"><div className={`fill ${r[2]}`} style={{ width: `${r[1]}%` }} /></div>
            </div>
          ))}
        </div>
      ),
    },
    {
      tag: 'CONTABILIDAD',
      title: 'Beneficio real, no facturación.',
      body: 'Ingresos, comisiones, envíos y márgenes calculados solos. Listos para tu gestor sin Excel.',
      preview: (
        <div className="bs-m-preview-stat">
          <div className="row"><span>Ingresos</span><span className="bs-num" style={{ color: 'var(--acid)' }}>6.240€</span></div>
          <div className="row"><span>Gastos</span><span className="bs-num">2.980€</span></div>
          <div className="row"><span>Beneficio</span><span className="bs-num" style={{ color: 'var(--acid)' }}>3.260€</span></div>
          <div className="row"><span>Margen</span><span className="bs-num" style={{ color: 'var(--acid)' }}>38%</span></div>
        </div>
      ),
    },
    {
      tag: 'ETIQUETAS',
      title: 'Listas en menos de un segundo.',
      body: 'Generadas al instante y guardadas en cdn.blackstock.es para acceso desde cualquier dispositivo.',
      preview: (
        <div className="bs-m-preview-stat">
          <div className="row"><span>Tiempo medio</span><span className="bs-num" style={{ color: 'var(--acid)' }}>0.9s</span></div>
          <div className="row"><span>Generadas hoy</span><span className="bs-num">14</span></div>
          <div className="row"><span>Tasa éxito</span><span className="bs-num">99.6%</span></div>
        </div>
      ),
    },
  ];

  return (
    <section className="bs-m-section">
      <div className="bs-m-container">
        <div className="bs-m-section-head">
          <span className="bs-eyebrow"><span className="dot" />TODO EL SISTEMA</span>
          <h2 className="bs-m-section-title">Doce módulos. Un único panel.</h2>
          <p className="bs-m-section-sub">Cada parte sustituye una hora de trabajo manual al día.</p>
        </div>
        <div className="bs-m-feat-stack">
          {items.map((it, i) => <MobileFeatureCard key={i} {...it} />)}
        </div>
      </div>
    </section>
  );
};

/* MobileCases — testimonios apilados, una columna */
const MobileCases = () => (
  <section className="bs-m-section" id="casos">
    <div className="bs-m-container">
      <div className="bs-m-section-head">
        <span className="bs-eyebrow acid">CASOS REALES</span>
        <h2 className="bs-m-section-title">Datos reales. Cuentas reales.</h2>
      </div>
      <div className="bs-m-cases">
        {[
          { name: 'Marc V.', age: 26, city: 'Barcelona', before: '210€/mes', after: '1.180€/mes', months: 5,
            quote: 'Compraba archive en mercadillos los sábados. Con Blackstock paso de 12 prendas listadas a 60. La IA me ahorra responder mensajes mientras trabajo.' },
          { name: 'Andrea P.', age: 31, city: 'Madrid', before: '0€', after: '720€/mes', months: 3,
            quote: 'Empecé vendiendo mi armario y ropa de mi hermana. Lo importante para mí ha sido el panel: ver inventario y contabilidad reales sin Excel.' },
          { name: 'Diego R.', age: 24, city: 'Valencia', before: '380€/mes', after: '2.140€/mes', months: 7,
            quote: 'Llevo 3 cuentas con vintage y workwear. El restocker mantiene los listings arriba sin que toque el móvil. Es un trabajo, no una pasión.' },
        ].map((c, i) => (
          <div key={i} className="bs-m-case">
            <div className="head">
              <div>
                <div className="name">{c.name}</div>
                <div className="meta">{c.age} · {c.city}</div>
              </div>
              <span className="bs-pill acid" style={{ height: 22, fontSize: 9 }}>VERIFICADO</span>
            </div>
            <div className="ba">
              <div><span className="l">ANTES</span><span className="v" style={{ color: 'var(--fg-3)' }}>{c.before}</span></div>
              <span className="arrow">→</span>
              <div className="r"><span className="l">AHORA · {c.months}M</span><span className="v" style={{ color: 'var(--acid)' }}>{c.after}</span></div>
            </div>
            <p>"{c.quote}"</p>
          </div>
        ))}
      </div>
      <div className="bs-m-stats">
        {[
          ['+74.000€', 'facturados por resellers activos este mes'],
          ['×2.1', 'margen medio sobre coste'],
          ['91%', 'mantienen suscripción tras mes 1'],
        ].map((s, i) => (
          <div key={i}>
            <div className="bs-num" style={{ color: 'var(--acid)' }}>{s[0]}</div>
            <div className="l">{s[1]}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* MobilePricing — cards apiladas full-width, sin overflow lateral */
const MobilePricing = ({ onCTA }) => {
  const plans = [
    {
      code: 'basic',
      name: 'BASIC', tag: 'Estándar', price: 22.90,
      desc: 'Todo Blackstock + Anty. Opera desde tu equipo.',
      features: [
        '★ Blackstock Anty · navegador antidetect',
        'Restocker · Smart Agent · IA Inbox',
        'Multicuenta nativa',
        'Panel + inventario + pedidos',
        'Etiquetas + analytics + automatizaciones',
        'Academia + soporte por email',
      ],
      cta: 'Agendar llamada', highlight: false,
    },
    {
      code: 'pro',
      name: 'PRO', tag: 'Incluye Bazooka', price: 149.90,
      desc: 'Todo Blackstock + Bazooka. Infraestructura remota 24/7.',
      features: [
        'Todo lo de BASIC',
        '★ Bazooka · worker 24/7',
        'Ejecución cloud persistente',
        'Sin depender de tu ordenador',
        'Infraestructura dedicada',
      ],
      cta: 'Agendar llamada', highlight: true,
    },
  ];

  return (
    <section className="bs-m-section bs-m-pricing-section" id="planes">
      <div className="bs-m-container">
        <div className="bs-m-section-head">
          <span className="bs-eyebrow acid">PLANES MENSUALES</span>
          <h2 className="bs-m-section-title">Planes.</h2>
          <p className="bs-m-section-sub">Acceso bajo llamada. Te ayudamos a elegir plan en 15 minutos. Sin permanencia.</p>
        </div>

        <div className="bs-m-pricing-stack">
          {plans.map((p, i) => (
            <article key={i} className={`bs-m-plan ${p.highlight ? 'is-pro' : ''}`}>
              {p.highlight && (
                <div className="bs-m-plan-ribbon">★ INCLUYE BAZOOKA</div>
              )}
              <header className="bs-m-plan-head">
                <span className="bs-m-plan-name">{p.name}</span>
                <span className="bs-m-plan-tag">{p.tag}</span>
              </header>
              <div className="bs-m-plan-price">
                <span className="bs-num">{p.price}€</span>
                <span className="per">/mes</span>
              </div>
              <p className="bs-m-plan-desc">{p.desc}</p>
              <button
                onClick={() => onCTA && onCTA(p.code)}
                className={p.highlight ? 'bs-btn bs-btn-acid bs-m-plan-cta' : 'bs-btn bs-btn-ghost bs-m-plan-cta'}
              >
                {p.cta} →
              </button>
              <ul className="bs-m-plan-list">
                {p.features.map((f, j) => (
                  <li key={j}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div className="bs-m-pricing-note">
          <span>● ACCESO BAJO LLAMADA</span>
          <span>● SIN PERMANENCIA</span>
          <span>● CANCELAS CUANDO QUIERAS</span>
        </div>
      </div>
    </section>
  );
};

/* MobileFAQ — acordeón real estilo Linear/Apple */
const MobileFAQ = ({ onCTA }) => {
  const items = [
    { q: '¿Qué pasa si no he vendido nada en mi vida?', a: 'La academia (incluida) te lleva desde cero: cómo elegir producto, fotos, descripciones, precios. Muchos resellers empezaron sin experiencia previa, pero con tiempo para tratar esto como un proyecto serio.' },
    { q: '¿Vinted me puede banear por usar automatizaciones?', a: 'Blackstock opera dentro de patrones humanos: jitter aleatorio, ventanas de pausa y aprobación manual de las acciones críticas. Aun así, ninguna automatización elimina el riesgo al 100%; eres tú quien lo asume sobre tus cuentas.' },
    { q: '¿Cuánto tardo en recuperar la inversión?', a: 'BASIC son 22,90€/mes. Con un margen sano y un par de ventas a la semana, la suscripción se cubre sola. No prometemos resultados: depende de tu producto, fotos y tiempo invertido.' },
    { q: '¿Puedo cancelar cuando quiera?', a: 'Sí, sin permanencia. Cancelas desde tu panel cuando quieras. Mantienes acceso hasta el final del mes pagado. Sin preguntas, sin retención.' },
    { q: '¿Y Hacienda?', a: 'En España, Vinted reporta operaciones desde 2.000€ o 30 ventas anuales (DAC7). En la academia te explicamos cómo declarar correctamente según tu volumen.' },
    { q: '¿Cuántas cuentas de Vinted puedo gestionar?', a: 'Sin límite. La extensión es multicuenta nativa: aisla cookies, sesiones y settings por cuenta. Recomendado un perfil de Chrome distinto por cuenta con más de 500 ítems.' },
    { q: '¿La impresión de etiquetas es realmente automática?', a: 'Sí. Un puente local en tu equipo (Mac, Windows o Linux) recibe el PDF y lo manda a tu impresora sin diálogo. Detecta pedidos nuevos cada 20 minutos.' },
    { q: '¿Funciona en países fuera de España?', a: 'Sí. Soporta los 27 dominios Vinted EU activos: España, Francia, Italia, Alemania, UK, NL, BE, PT, PL, CZ, SK, LT, LV, EE, HU, RO, AT, DK, FI, SE, IE, LU, HR, SI, GR + .com / .co.uk.' },
  ];
  const [open, setOpen] = React.useState(-1);

  return (
    <section className="bs-m-section bs-m-faq-section" id="faq">
      <div className="bs-m-container">
        <div className="bs-m-section-head">
          <span className="bs-eyebrow acid">DUDAS FRECUENTES</span>
          <h2 className="bs-m-section-title">FAQ.</h2>
          <p className="bs-m-section-sub">Las preguntas que más nos hacen antes de empezar.</p>
        </div>

        <div className="bs-m-faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`bs-m-faq-item ${isOpen ? 'is-open' : ''}`}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="bs-m-faq-q"
                  aria-expanded={isOpen}
                >
                  <span className="text">{it.q}</span>
                  <span className="icon" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
                      <path d="M5 12h14" />
                      <path d="M12 5v14" className="vline" />
                    </svg>
                  </span>
                </button>
                <div className="bs-m-faq-a" aria-hidden={!isOpen}>
                  <p>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>

        <a
          href="mailto:hola@blackstock.es"
          className="bs-m-faq-contact"
        >
          <span className="t">¿Sigues con dudas?</span>
          <span className="c">Hablar con un humano →</span>
        </a>
      </div>
    </section>
  );
};

/* MobileSticky — barra fija inferior premium iOS-style.
 * Se oculta cuando el usuario scrollea cerca del final (planes/FAQ visibles)
 * para no tapar el contenido cuando ya hay un CTA de plan visible. */
const MobileSticky = ({ onCTA }) => {
  const [state, setState] = React.useState('hidden'); // 'hidden' | 'visible'
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const nearBottom = max > 0 && (max - y) < 600; // últimos 600px
      if (y < 280) setState('hidden');
      else if (nearBottom) setState('hidden');
      else setState('visible');
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
  return (
    <div className={`bs-m-sticky is-${state}`} role="region" aria-label="CTA flotante">
      <div className="bs-m-sticky-info">
        <span className="price">22,90€<small>/mes</small></span>
        <span className="meta">Sin permanencia</span>
      </div>
      <button onClick={onCTA} className="bs-btn bs-btn-acid bs-m-sticky-btn">Empezar →</button>
    </div>
  );
};

/* HomeMobile — composición mobile-first completa */
const HomeMobile = ({ onNavigate, onCTA }) => (
  <div className="bs-shell bs-m-shell">
    <TopBanner />
    <Nav activePage="home" onNavigate={onNavigate} />
    <HeroMobile onCTA={onCTA} />
    <MobileSections />
    <MobileCases />
    <MobilePricing onCTA={onCTA} />
    <MobileFAQ onCTA={onCTA} />
    <Footer />
    <MobileSticky onCTA={onCTA} />
  </div>
);

Object.assign(window, {
  HomePage, HomeMobile, HeroA, HeroB, HeroC, BSSlider, Marquee,
  HowItWorks, FeaturesGrid, Capabilities, Cases, Team, Pricing, FAQ, FinalCTA, TopBanner,
  HeroMobile, MobileSections, MobileCases, MobilePricing, MobileFAQ, MobileSticky, PhoneMockup,
});