/* eslint-disable */
/*
 * Blackstock Anty · página de producto premium.
 *
 * Estructura:
 *   1. Hero — eyebrow, título doble, sub, 2 CTAs, mock de la app a la derecha
 *   2. Contexto — "El navegador delata. Anty lo aísla."
 *   3. Stack técnico — 6 capas (TLS · Fingerprint · WebRTC · Proxy · Vault · iOS Deep)
 *   4. Cómo funciona — 3 pasos visuales
 *   5. Dentro de Anty — feature grid con mock + 4 capabilities
 *   6. Comparativa — Anty vs antidetects genéricos vs Chrome normal
 *   7. Incluido en BASIC — banner con upgrade path
 *   8. Compatibilidad / requisitos
 *   9. FAQ específico
 *   10. CTA final
 */

/* Reutilizamos el LogoMark oficial de Blackstock (definido en shared.jsx →
 * window.LogoMark). Con esto Anty hereda el branding exacto del resto del
 * ecosistema: chevrones sólidos con gradient lima oficial, sin reinterpretar.
 *
 * Para el header de Anty añadimos un wordmark "BLACKSTOCK · ANTY" para
 * dejar claro que es un producto dentro de la suite, no un brand aparte. */
const AntyWordmark = ({ size = 28, withGlow = false }) => (
  <span
    aria-hidden="true"
    style={{
      display: 'inline-flex', alignItems: 'center', gap: size * 0.4,
      filter: withGlow ? 'drop-shadow(0 0 24px rgba(214,255,77,0.35))' : 'none',
    }}
  >
    <LogoMark size={size} />
  </span>
);

/* ── Hero ─────────────────────────────────────────────────────────────── */
const AntyHero = ({ onCTA, onScrollTo }) => (
  <section style={{ paddingTop: 96, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
    {/* Glow background */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: 'radial-gradient(60% 40% at 70% 30%, rgba(214,255,77,0.07), transparent 70%)',
    }} />
    <div className="bs-container" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <AntyWordmark size={36} withGlow />
            <span className="bs-eyebrow acid">BLACKSTOCK · ANTY</span>
          </div>
          <h1 className="bs-display bs-h1" style={{ margin: 0, lineHeight: 0.96, letterSpacing: '-0.03em' }}>
            El navegador<br />
            <span style={{ color: 'var(--acid)' }}>privado</span> de Blackstock.
          </h1>
          <p style={{ marginTop: 28, color: 'var(--fg-2)', fontSize: 18, lineHeight: 1.55, maxWidth: 520 }}>
            Un Chromium aislado por cuenta con TLS Safari iOS, fingerprint independiente y proxy
            dedicado. Sin contaminación entre sesiones. Sin fugas. Sin correlación.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="bs-btn bs-btn-acid" onClick={() => onScrollTo && onScrollTo('anty-descarga')}>
              ↓ Descargar Anty
            </button>
            <button className="bs-btn bs-btn-ghost" onClick={() => onCTA && onCTA('basic')}>
              Empezar con BASIC
            </button>
            <button className="bs-btn bs-btn-ghost" onClick={() => onScrollTo && onScrollTo('anty-dentro')}>
              Ver qué hay dentro
            </button>
          </div>
          <div style={{
            marginTop: 28, display: 'flex', gap: 18, flexWrap: 'wrap',
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em',
          }}>
            <span>● INCLUIDO EN BASIC</span>
            <span>● macOS · Apple Silicon</span>
            <span>● USO PRIVADO BLACKSTOCK</span>
          </div>
        </div>

        <AntyAppMock />
      </div>
    </div>
  </section>
);

/* Mock visual del dashboard de Anty (estático, decorativo). */
const AntyAppMock = () => (
  <div style={{
    position: 'relative',
    borderRadius: 18,
    overflow: 'hidden',
    background: 'linear-gradient(180deg, var(--bg-2), var(--bg-1))',
    border: '1px solid var(--line)',
    boxShadow: '0 60px 120px -40px rgba(0,0,0,0.6), 0 0 0 1px rgba(214,255,77,0.06)',
  }}>
    {/* macOS chrome */}
    <div style={{
      height: 36, display: 'flex', alignItems: 'center', gap: 6, padding: '0 14px',
      borderBottom: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)',
    }}>
      {['#ff5f56', '#ffbd2e', '#27c93f'].map((c, i) => (
        <span key={i} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.7 }} />
      ))}
      <span style={{
        marginLeft: 'auto', marginRight: 'auto', fontFamily: 'var(--font-mono)',
        fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.05em',
      }}>BLACKSTOCK ANTY</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 360 }}>
      {/* Sidebar */}
      <div style={{ borderRight: '1px solid var(--line)', padding: 14, background: 'rgba(255,255,255,0.015)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 22 }}>
          <LogoMark size={22} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.2 }}>Blackstock Anty</div>
            <div style={{ fontSize: 10, color: 'var(--fg-3)', lineHeight: 1.2 }}>Antidetect privado</div>
          </div>
        </div>
        <div style={{ fontSize: 9, color: 'var(--fg-3)', letterSpacing: '0.1em', marginBottom: 8, textTransform: 'uppercase' }}>
          Workspace
        </div>
        {[
          { l: 'Perfiles', n: '12', active: true },
          { l: 'Ajustes', n: null, active: false },
          { l: 'Licencia', n: null, active: false },
        ].map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '7px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? 'rgba(255,255,255,0.04)' : 'transparent',
            color: it.active ? 'var(--fg)' : 'var(--fg-3)', fontSize: 12,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: it.active ? 'var(--acid)' : 'var(--fg-3)' }} />
            <span style={{ flex: 1 }}>{it.l}</span>
            {it.n && <span style={{
              fontSize: 10, color: 'var(--fg-3)', background: 'var(--bg)',
              padding: '1px 6px', borderRadius: 999, border: '1px solid var(--line)',
            }}>{it.n}</span>}
          </div>
        ))}
        <div style={{ marginTop: 'auto', paddingTop: 200 }} />
        <div style={{
          padding: '10px 12px', borderRadius: 10, background: 'var(--bg)',
          border: '1px solid var(--line)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--acid)' }} />
            <span style={{ fontSize: 10, fontWeight: 500 }}>Licencia activa</span>
          </div>
          <div style={{ fontSize: 9, color: 'var(--fg-3)' }}>Expira 11 may 2027</div>
        </div>
      </div>
      {/* Profile grid */}
      <div style={{ padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              Workspace
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Perfiles</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          {[
            { i: 'M', n: 'Maria · Vinted ES', s: 'Activo', sc: '#B6FF00', c: '#B6FF00' },
            { i: 'L', n: 'Lucia FR Ops', s: 'Parado', sc: 'var(--fg-3)', c: '#60A5FA' },
            { i: 'B', n: 'Bot warmup #03', s: 'Parado', sc: 'var(--fg-3)', c: '#F59E0B' },
            { i: 'A', n: 'Anna DE', s: 'Activo', sc: '#B6FF00', c: '#A78BFA' },
          ].map((p, i) => (
            <div key={i} style={{
              border: '1px solid var(--line)', borderRadius: 10, padding: 12,
              background: 'var(--bg)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 6,
                  background: p.c, color: '#0A0B07',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 700,
                }}>{p.i}</span>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 500, lineHeight: 1.2, color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {p.n}
                  </div>
                  <div style={{ fontSize: 9, color: 'var(--fg-3)' }}>🇪🇸 iOS 17 · TLS</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                <span 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}
                </span>
                <span style={{ marginLeft: 'auto', fontSize: 9, color: 'var(--fg-3)' }}>actualizado hoy</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

/* ── Contexto: el navegador delata ─────────────────────────────────────── */
const AntyContexto = () => (
  <section className="bs-section" style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="bs-container">
      <div className="bs-eyebrow" style={{ marginBottom: 14 }}>EL PROBLEMA</div>
      <h2 className="bs-display bs-h2" style={{ margin: 0, maxWidth: 760 }}>
        Un navegador normal te delata.<br />
        <span style={{ color: 'var(--fg-3)' }}>Vinted lo sabe.</span>
      </h2>
      <p style={{ marginTop: 22, color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 720 }}>
        Cuentas compartiendo canvas, audio, fuentes, WebGL, JA3, sec-ch-ua, batería, WebRTC y mil
        señales más. DataDome y Arkose Labs correlacionan en menos de una sesión. Un solo perfil
        sin aislar contamina los demás.
      </p>
      <div style={{
        marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
      }}>
        {[
          { k: 'JA3 / JA4 TLS', v: 'Tu Chrome desktop bajo UA iPhone = mismatch flag inmediato.' },
          { k: 'Canvas + Audio', v: 'Sin ruido determinista, dos cuentas producen el mismo hash.' },
          { k: 'WebRTC', v: 'Filtra tu IP residencial real aunque uses proxy.' },
          { k: 'Cookies cruzadas', v: 'localStorage / IDB / cache compartidos entre cuentas.' },
          { k: 'Fingerprint fuentes', v: 'Lista de fonts del sistema = signature persistente.' },
          { k: 'Batería / red', v: 'NetworkInformation y BatteryAPI delatan dispositivo desktop.' },
        ].map((it, i) => (
          <div key={i} style={{
            padding: 20, border: '1px solid var(--line)', borderRadius: 12,
            background: 'var(--bg-2)',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)',
              letterSpacing: '0.08em', marginBottom: 8, textTransform: 'uppercase',
            }}>
              {it.k}
            </div>
            <div style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.5 }}>{it.v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── Stack técnico ─────────────────────────────────────────────────────── */
const AntyStack = () => (
  <section className="bs-section">
    <div className="bs-container">
      <div className="bs-section-head" style={{ alignItems: 'flex-start' }}>
        <span className="bs-eyebrow acid">STACK TÉCNICO</span>
        <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Seis capas de aislamiento.</h2>
        <p style={{ marginTop: 12, color: 'var(--fg-2)', fontSize: 14, maxWidth: 580 }}>
          Cada perfil de Anty se ejecuta como si fuera un dispositivo distinto. La detección
          requeriría que Vinted te detectara en seis sitios a la vez.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {[
          {
            k: '01', t: 'TLS Impersonation',
            d: 'JA3/JA4 Safari iOS real, no Chrome. Vinted ve un iPhone en el handshake. Curve order, cipher suites y extensiones idénticas al stack de Apple.',
            tag: 'bogdanfinn/tls-client',
          },
          {
            k: '02', t: 'Fingerprint patcher',
            d: 'Canvas/Audio/ClientRects con ruido determinista por perfil. WebGL Apple GPU. hardwareConcurrency y deviceMemory coherentes con el modelo de iPhone elegido.',
            tag: 'Per-profile seed',
          },
          {
            k: '03', t: 'WebRTC guard',
            d: 'Extensión MV3 en MAIN world: iceServers vacíos, candidates srflx/prflx filtrados, SDP saneado. Cero fugas de IP residencial.',
            tag: '0 leaks',
          },
          {
            k: '04', t: 'Proxy fail-closed',
            d: 'Si la proxy ISP se cae, el perfil no abre. Sin caída silenciosa a IP real. Validación geo previa: si el proxy sale en otro país que el perfil, aborta.',
            tag: 'ES / FR / IT / DE',
          },
          {
            k: '05', t: 'iOS Deep Profile',
            d: 'ApplePaySession, GestureEvent, PublicKeyCredential. Elimina APIs Chromium-only. Touch sintético desde mouse. Pantalla y DPR del iPhone elegido.',
            tag: 'iPhone 7..15',
          },
          {
            k: '06', t: 'Vault local cifrado',
            d: 'AES-GCM + PBKDF2. Auto-unlock vía Keychain macOS (safeStorage). Cero secretos en disco plano. Cero servidores en la trayectoria de tus perfiles.',
            tag: 'macOS Keychain',
          },
        ].map((it, i) => (
          <div key={i} style={{
            padding: 24, border: '1px solid var(--line)', borderRadius: 14,
            background: 'var(--bg-2)', display: 'flex', flexDirection: 'column', gap: 10,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--acid)',
                letterSpacing: '0.1em',
              }}>{it.k}</span>
              <span className="bs-pill" style={{ height: 20, fontSize: 9 }}>{it.tag}</span>
            </div>
            <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{it.t}</h3>
            <p style={{ margin: 0, fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── Cómo funciona ─────────────────────────────────────────────────────── */
const AntyComoFunciona = () => (
  <section className="bs-section" 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">CÓMO FUNCIONA</span>
        <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Abres Anty, eliges perfil, lanzas.</h2>
        <p style={{ marginTop: 12, color: 'var(--fg-2)', fontSize: 14, maxWidth: 540 }}>
          Tres pasos. Lo demás lo hace el motor por debajo.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 32 }}>
        {[
          {
            n: '01', t: 'Inicias sesión Blackstock',
            d: 'Anty valida tu licencia de Automatización contra api.blackstock.es. Sin sesión válida, no se lanza nada.',
          },
          {
            n: '02', t: 'Eliges un perfil',
            d: 'Cada perfil tiene fingerprint, proxy y vault propios. "Cuenta nueva" → iPhone preset. "Cuenta calentada" → macOS preset.',
          },
          {
            n: '03', t: 'Pulsas Lanzar',
            d: 'Arranca un Chromium aislado con TLS Safari iOS, extensiones cargadas y proxy validado. Cero contaminación con otros perfiles.',
          },
        ].map((it, i) => (
          <div key={i} style={{ padding: 28, border: '1px solid var(--line)', borderRadius: 14, background: 'var(--bg-2)' }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--acid)',
              fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 18,
            }}>{it.n}</div>
            <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{it.t}</h3>
            <p style={{ margin: '12px 0 0', fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── Dentro de Anty: feature grid ──────────────────────────────────────── */
const AntyDentro = () => (
  <section className="bs-section" id="anty-dentro">
    <div className="bs-container">
      <div className="bs-section-head" style={{ alignItems: 'flex-start' }}>
        <span className="bs-eyebrow acid">DENTRO DE ANTY</span>
        <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Lo que hay debajo del icono.</h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {[
          {
            tag: 'PERFILES ILIMITADOS',
            t: 'Identidades por encargo',
            d: 'Cada perfil es un universo. Fingerprint propio, proxy propio, cookies propias. Tu Mac corre tantos como necesites — el límite es la RAM, no Anty.',
          },
          {
            tag: 'PRESETS VINTED',
            t: 'iPhone y macOS prearmados',
            d: 'Presets vinted-iphone (cuenta nueva, registro desde cero) y vinted-mac (cuenta calentada en iPhone físico real, transición a PC). Aplican fingerprint coherente automáticamente.',
          },
          {
            tag: 'CONTROL DE LICENCIA',
            t: 'Heartbeat cada 30 min',
            d: 'Anty revalida tu licencia contra el servidor cada media hora. Si caduca, el perfil se cierra. Si hay error de red, modo gracia infinito (no te corta por un timeout).',
          },
          {
            tag: 'AUTO-UNLOCK',
            t: 'Cero password fatigue',
            d: 'Tras el primer login, Keychain macOS guarda la clave del vault. Próximos arranques: splash → dashboard. Sin pedir password de vault otra vez.',
          },
          {
            tag: 'TEST DE PROXY',
            t: 'IP · país · colisiones',
            d: 'Comprueba conexión y geo del proxy antes de lanzar. Detecta automáticamente si la IP coincide con otro perfil (exacta o /24). Cero linkages accidentales.',
          },
          {
            tag: 'COOKIES EDITABLES',
            t: 'Import / Export bulk',
            d: 'Editor completo de cookies por perfil. Importa JSON con tu sesión, exporta para backup. Útil para mover una cuenta entre dispositivos sin volver a loguear.',
          },
        ].map((it, i) => (
          <div key={i} style={{
            padding: 26, border: '1px solid var(--line)', borderRadius: 14,
            background: 'var(--bg-2)',
            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)'; }}
          >
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--acid)',
              letterSpacing: '0.1em',
            }}>{it.tag}</span>
            <h3 style={{ margin: '10px 0 8px', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>
              {it.t}
            </h3>
            <p style={{ margin: 0, fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.6 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── Comparativa ───────────────────────────────────────────────────────── */
const AntyComparativa = () => {
  const rows = [
    { label: 'TLS spoofing (JA3 Safari iOS real)',          anty: true,  generic: 'parcial', chrome: false },
    { label: 'WebRTC guard MV3 (cero fugas STUN)',          anty: true,  generic: 'flag',    chrome: false },
    { label: 'iOS Deep Profile (ApplePaySession, Touch)',   anty: true,  generic: false,     chrome: false },
    { label: 'Proxy fail-closed con validación geo',        anty: true,  generic: false,     chrome: false },
    { label: 'Vault local cifrado AES-GCM',                 anty: true,  generic: 'cloud',   chrome: false },
    { label: 'Bypass Arkose Labs / DataDome',               anty: true,  generic: 'no',      chrome: false },
    { label: 'Integrado con Blackstock (licencia única)',   anty: true,  generic: false,     chrome: false },
    { label: 'Coste mensual extra',                          anty: '0€',  generic: '30-99€',  chrome: '—' },
  ];

  const Cell = ({ v }) => {
    if (v === true) return (
      <span style={{ color: 'var(--acid)' }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
    );
    if (v === false) return (
      <span style={{ color: 'var(--fg-3)' }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
        </svg>
      </span>
    );
    return (
      <span style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-2)' }}>{v}</span>
    );
  };

  return (
    <section className="bs-section" 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">COMPARATIVA</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Frente a alternativas.</h2>
        </div>

        <div style={{
          border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
          background: 'var(--bg-2)',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.7fr 1fr 1fr 1fr',
            padding: '16px 22px', borderBottom: '1px solid var(--line)',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
            color: 'var(--fg-3)', textTransform: 'uppercase',
          }}>
            <span></span>
            <span style={{ textAlign: 'center', color: 'var(--acid)' }}>BLACKSTOCK ANTY</span>
            <span style={{ textAlign: 'center' }}>ANTIDETECT GENÉRICO</span>
            <span style={{ textAlign: 'center' }}>CHROME NORMAL</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.7fr 1fr 1fr 1fr',
              padding: '14px 22px',
              borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
              alignItems: 'center', fontSize: 13.5,
            }}>
              <span style={{ color: 'var(--fg)' }}>{r.label}</span>
              <span style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.anty} /></span>
              <span style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.generic} /></span>
              <span style={{ display: 'flex', justifyContent: 'center' }}><Cell v={r.chrome} /></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── Incluido en BASIC ─────────────────────────────────────────────────── */
const AntyIncluido = ({ onCTA }) => (
  <section className="bs-section">
    <div className="bs-container">
      <div style={{
        border: '1px solid var(--line-acid)', borderRadius: 18, padding: 48,
        background: 'linear-gradient(180deg, rgba(214,255,77,0.05), var(--bg-2))',
        boxShadow: '0 40px 100px -40px rgba(214,255,77,0.18)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
      }}>
        <div>
          <span className="bs-eyebrow acid" style={{ marginBottom: 14 }}>INCLUIDO EN EL PLAN BASIC</span>
          <h2 className="bs-display bs-h2" style={{ margin: '12px 0 18px', letterSpacing: '-0.02em' }}>
            Anty viene con tu suscripción.
          </h2>
          <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 520 }}>
            22,90€/mes. Sin extras. Sin upsell. Tu licencia de Automatización Blackstock desbloquea
            Anty en cualquier Mac asociada a tu cuenta — descarga, autenticación y updates servidos
            por la propia infra Blackstock.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            <button className="bs-btn bs-btn-acid" onClick={() => onCTA && onCTA('basic')}>
              Empezar con BASIC →
            </button>
            <button className="bs-btn bs-btn-ghost" onClick={() => onCTA && onCTA('pro')}>
              O ver PRO con Bazooka
            </button>
          </div>
        </div>
        <div style={{
          background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 28,
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.1em', marginBottom: 14 }}>
            QUÉ INCLUYE TU LICENCIA
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Descargas firmadas para todos tus Macs',
              'Updates automáticos por canal Blackstock',
              'Heartbeat 30 min · revalidación silenciosa',
              'Cero límite de perfiles por dispositivo',
              'Soporte por email con el equipo Blackstock',
            ].map((it, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ marginTop: 3, flexShrink: 0 }}>
                  <path d="M5 12l5 5L20 7" stroke="var(--acid)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span style={{ color: 'var(--fg-2)' }}>{it}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

/* ── Descargas · Premium download experience ──────────────────────────────
 *
 * Config global: el host puede setear window.BS_ANTY_DOWNLOADS antes de que
 * la página monte para override de URLs/tamaños/versión. Si no, usamos los
 * defaults relativos `/downloads/blackstock-anty/{mac,windows}` que el
 * backend Blackstock debe interceptar y redirigir al CDN tras validar
 * licencia.
 *
 * window.BS_ANTY_DOWNLOADS = {
 *   version: "0.3.0",
 *   mac:     { url: "https://cdn.blackstock.es/anty/Blackstock-Anty-0.3.0-arm64.dmg", size: "107 MB", build: "Signed" },
 *   windows: { url: "https://cdn.blackstock.es/anty/Blackstock-Anty-Setup-0.3.0.exe", size: "92 MB",  build: "Signed" },
 * }
 */
const ANTY_DEFAULT_DOWNLOADS = {
  version: "0.3.0",
  mac: {
    url: "/downloads/blackstock-anty/Blackstock-Anty-0.3.0.dmg",
    size: "194 MB",
    arch: "Universal · Apple Silicon + Intel",
    requirement: "macOS 11 Big Sur o superior",
    format: "DMG · Ad-hoc signed",
  },
  windows: {
    url: "/downloads/blackstock-anty/Blackstock-Anty-Setup-0.3.0.exe",
    size: "92 MB",
    arch: "x64",
    requirement: "Windows 10 / 11",
    format: "EXE · NSIS installer",
  },
};

function getAntyDownloads() {
  if (typeof window === 'undefined') return ANTY_DEFAULT_DOWNLOADS;
  const override = window.BS_ANTY_DOWNLOADS;
  if (!override) return ANTY_DEFAULT_DOWNLOADS;
  return {
    version: override.version || ANTY_DEFAULT_DOWNLOADS.version,
    mac: { ...ANTY_DEFAULT_DOWNLOADS.mac, ...(override.mac || {}) },
    windows: { ...ANTY_DEFAULT_DOWNLOADS.windows, ...(override.windows || {}) },
  };
}

function detectPlatform() {
  if (typeof navigator === 'undefined') return null;
  const ua = navigator.userAgent || '';
  if (/Mac|iPad|iPhone|iPod/i.test(ua)) return 'mac';
  if (/Win/i.test(ua)) return 'windows';
  return null;
}

const AppleGlyph = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.05 12.04c-.03-2.85 2.32-4.22 2.43-4.29-1.32-1.93-3.38-2.2-4.12-2.23-1.76-.18-3.43 1.03-4.32 1.03-.91 0-2.27-1.01-3.74-.98-1.92.03-3.69 1.12-4.68 2.83-2 3.47-.51 8.6 1.43 11.41.95 1.38 2.08 2.92 3.56 2.87 1.43-.06 1.97-.93 3.7-.93s2.22.93 3.74.9c1.55-.03 2.52-1.4 3.46-2.79 1.09-1.6 1.54-3.16 1.56-3.24-.04-.02-2.99-1.15-3.02-4.58zM14.4 4.21c.79-.96 1.32-2.29 1.17-3.61-1.14.05-2.51.76-3.33 1.72-.73.85-1.37 2.21-1.2 3.51 1.27.1 2.57-.65 3.36-1.62z"/>
  </svg>
);

const WindowsGlyph = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M3 5.4L10.4 4v7.4H3V5.4zM11.3 3.9L21 2.5v8.9H11.3V3.9zM3 12.3h7.4v7.4L3 18.4v-6.1zM11.3 12.4H21V21l-9.7-1.4v-7.2z"/>
  </svg>
);

/* DownloadCard · card grande clicable. El click dispara descarga real
 * y feedback visual ("Iniciando descarga…" 1.2s). */
const DownloadCard = ({ os, glyph, glyphSize, title, format, arch, requirement, size, version, href, recommended, onClick, mobile }) => {
  const [hover, setHover] = React.useState(false);
  const [downloading, setDownloading] = React.useState(false);

  const handleClick = (e) => {
    setDownloading(true);
    window.setTimeout(() => setDownloading(false), 1800);
    if (onClick) onClick(e);
    // El anchor download dispara la descarga real.
  };

  const accent = recommended || hover;
  return (
    <a
      href={href}
      download
      onClick={handleClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        display: 'flex', flexDirection: 'column', gap: 18,
        padding: mobile ? 22 : 28,
        borderRadius: 18,
        background: accent
          ? 'linear-gradient(180deg, rgba(214,255,77,0.07), rgba(255,255,255,0.02) 60%, rgba(214,255,77,0.02))'
          : 'linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015) 70%, rgba(255,255,255,0.005))',
        border: `1px solid ${accent ? 'rgba(214,255,77,0.4)' : 'var(--line)'}`,
        boxShadow: accent
          ? '0 40px 100px -30px rgba(214,255,77,0.22), 0 0 0 1px rgba(214,255,77,0.08) inset'
          : '0 30px 80px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset',
        color: 'var(--fg)', textDecoration: 'none',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'transform .28s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s ease, box-shadow .25s ease, background .25s ease',
        overflow: 'hidden',
      }}
    >
      {/* Glow lima sutil que pulsa al hover */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: -100, right: -80, width: 260, height: 260,
        background: 'radial-gradient(circle, rgba(214,255,77,0.18), transparent 65%)',
        opacity: accent ? 1 : 0.35, pointerEvents: 'none',
        transition: 'opacity .25s ease',
      }} />

      {/* Recommended badge */}
      {recommended && (
        <span style={{
          position: 'absolute', top: 16, right: 16, zIndex: 1,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '5px 10px', borderRadius: 999,
          background: 'var(--acid)', color: '#0A0B07',
          fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', whiteSpace: 'nowrap',
        }}>
          ● Recomendado para ti
        </span>
      )}

      {/* Header: logo + OS name */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, position: 'relative', zIndex: 1 }}>
        <span style={{
          width: 64, height: 64, borderRadius: 16,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          background: accent
            ? 'linear-gradient(135deg, rgba(214,255,77,0.18), rgba(214,255,77,0.04))'
            : 'rgba(255,255,255,0.04)',
          border: `1px solid ${accent ? 'rgba(214,255,77,0.35)' : 'var(--line)'}`,
          color: accent ? 'var(--acid)' : 'var(--fg)',
          transition: 'all .25s ease',
        }}>
          {React.cloneElement(glyph, { size: glyphSize || 30 })}
        </span>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.1em',
            color: 'var(--fg-3)', textTransform: 'uppercase', marginBottom: 4,
          }}>
            {os}
          </div>
          <div style={{
            fontSize: mobile ? 20 : 22, fontWeight: 700, letterSpacing: '-0.02em',
            color: 'var(--fg)', lineHeight: 1.15,
          }}>
            {title}
          </div>
        </div>
      </div>

      {/* Metadata table */}
      <div style={{
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px',
        padding: '14px 0',
        borderTop: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)',
      }}>
        <Meta label="Formato" value={format} />
        <Meta label="Tamaño" value={size} />
        <Meta label="Arquitectura" value={arch} />
        <Meta label="Requiere" value={requirement} />
      </div>

      {/* Pills */}
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        <Pill icon="✓">Signed build</Pill>
        <Pill icon="●" tone="acid">Licencia BASIC</Pill>
        <Pill icon="v">{version}</Pill>
      </div>

      {/* CTA bar */}
      <div style={{
        position: 'relative', zIndex: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12, marginTop: 4,
      }}>
        <span style={{
          fontSize: 15, fontWeight: 600, color: accent ? 'var(--acid)' : 'var(--fg)',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          transition: 'color .25s ease',
        }}>
          {downloading ? (
            <>
              <DownloadSpinner /> Iniciando descarga…
            </>
          ) : (
            <>
              <DownloadGlyph /> Descargar instalador
            </>
          )}
        </span>
        <span aria-hidden="true" style={{
          width: 36, height: 36, borderRadius: '50%',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          background: accent ? 'var(--acid)' : 'rgba(255,255,255,0.05)',
          color: accent ? '#0A0B07' : 'var(--fg-2)',
          fontSize: 16,
          transform: hover ? 'translateY(2px)' : 'translateY(0)',
          transition: 'transform .25s cubic-bezier(0.16, 1, 0.3, 1), background .25s ease, color .25s ease',
        }}>
          ↓
        </span>
      </div>
    </a>
  );
};

const Meta = ({ label, value }) => (
  <div style={{ minWidth: 0 }}>
    <div style={{
      fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--fg-3)',
      letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3,
    }}>{label}</div>
    <div style={{ fontSize: 12.5, color: 'var(--fg)', fontWeight: 500 }}>{value}</div>
  </div>
);

const Pill = ({ icon, tone, children }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: '4px 9px', borderRadius: 999, border: '1px solid var(--line)',
    background: tone === 'acid' ? 'rgba(214,255,77,0.08)' : 'rgba(255,255,255,0.02)',
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.04em',
    color: tone === 'acid' ? 'var(--acid)' : 'var(--fg-2)',
  }}>
    <span aria-hidden="true">{icon}</span>{children}
  </span>
);

const DownloadGlyph = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 4v12m0 0l-5-5m5 5l5-5M5 20h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const DownloadSpinner = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ animation: 'bsFloat 1.4s ease-in-out infinite' }}>
    <path d="M12 4v8m0 0l-3-3m3 3l3-3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M5 18h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" opacity="0.4"/>
  </svg>
);

const AntyDownload = () => {
  const dls = getAntyDownloads();
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const platform = detectPlatform();   // 'mac' | 'windows' | null

  return (
    <section
      className="bs-section"
      id="anty-descarga"
      style={{
        position: 'relative',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
        background: 'linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 40%, var(--bg-1) 100%)',
        overflow: 'hidden',
      }}
    >
      {/* Glow ambient en background */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background:
          'radial-gradient(60% 50% at 50% 0%, rgba(214,255,77,0.06), transparent 70%),' +
          'radial-gradient(40% 60% at 100% 80%, rgba(214,255,77,0.03), transparent 70%)',
      }} />

      <div className="bs-container" style={{ position: 'relative' }}>
        <div className="bs-section-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <span style={{ filter: 'drop-shadow(0 0 14px rgba(214,255,77,0.4))' }}>
              <LogoMark size={28} />
            </span>
            <span className="bs-eyebrow acid">DESCARGAR ANTY · v{dls.version}</span>
          </div>
          <h2 className="bs-display bs-h2" style={{ margin: 0, letterSpacing: '-0.025em' }}>
            Instala el navegador<br />
            privado <span style={{ color: 'var(--acid)' }}>Blackstock</span>.
          </h2>
          <p style={{
            marginTop: 18, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6,
            maxWidth: 540, marginLeft: 'auto', marginRight: 'auto',
          }}>
            Build firmado y notarizado para macOS y Windows. La descarga se desbloquea
            con tu licencia BASIC activa.
          </p>
        </div>

        {/* Cards */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 14 : 20,
          marginTop: 40, marginBottom: 32,
          maxWidth: 920, marginLeft: 'auto', marginRight: 'auto',
        }}>
          <DownloadCard
            os="macOS"
            glyph={<AppleGlyph />}
            glyphSize={32}
            title="Descargar para macOS"
            format={dls.mac.format}
            arch={dls.mac.arch}
            requirement={dls.mac.requirement}
            size={dls.mac.size}
            version={`v${dls.version}`}
            href={dls.mac.url}
            recommended={platform === 'mac'}
            mobile={isMobile}
          />
          <DownloadCard
            os="Windows"
            glyph={<WindowsGlyph />}
            glyphSize={28}
            title="Descargar para Windows"
            format={dls.windows.format}
            arch={dls.windows.arch}
            requirement={dls.windows.requirement}
            size={dls.windows.size}
            version={`v${dls.version}`}
            href={dls.windows.url}
            recommended={platform === 'windows'}
            mobile={isMobile}
          />
        </div>

        {/* Steps row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: 12,
          maxWidth: 920, marginLeft: 'auto', marginRight: 'auto',
        }}>
          {[
            { n: '01', t: 'Descarga', d: 'Elige el instalador para tu sistema.' },
            { n: '02', t: 'Instala', d: 'Arrastra a Apps (mac) o ejecuta el .exe (win).' },
            { n: '03', t: 'Inicia sesión', d: 'Email + password de tu cuenta Blackstock.' },
            { n: '04', t: 'Empieza', d: 'Tu licencia desbloquea Anty al instante.' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: 16,
              border: '1px solid var(--line)', borderRadius: 12,
              background: 'rgba(255,255,255,0.015)',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--acid)',
                letterSpacing: '0.1em',
              }}>{s.n}</span>
              <h4 style={{ margin: '6px 0 3px', fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.005em' }}>{s.t}</h4>
              <p style={{ margin: 0, fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.5 }}>{s.d}</p>
            </div>
          ))}
        </div>

        {/* Footer trust */}
        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'center',
          gap: isMobile ? 12 : 22, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-3)',
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>
          <span>● Build firmado</span>
          <span>● HTTPS · CDN Blackstock</span>
          <span>● Actualizaciones automáticas</span>
        </div>
      </div>
    </section>
  );
};

/* ── Compatibilidad / requisitos ───────────────────────────────────────── */
const AntyCompat = () => (
  <section className="bs-section" 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">COMPATIBILIDAD</span>
        <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Pensado para macOS.</h2>
        <p style={{ marginTop: 12, color: 'var(--fg-2)', fontSize: 14, maxWidth: 580 }}>
          Anty es nativo de macOS por decisión técnica: Keychain, code signing, notarization
          y trust del Root CA están integrados en el flujo del sistema.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {[
          { k: 'SISTEMA',      v: 'macOS 13 Ventura o superior · Apple Silicon (M1/M2/M3) recomendado · Intel funciona' },
          { k: 'CHROMIUM',     v: 'Anty descarga e instala Chromium for Testing aislado · 600 MB · no toca tu Chrome' },
          { k: 'RAM',          v: '8 GB mínimo · 16 GB recomendado para >5 perfiles concurrentes' },
          { k: 'PROXIES',      v: 'HTTP / HTTPS / SOCKS5 · residenciales ISP recomendados (no datacenter)' },
          { k: 'ROOT CA',      v: 'Se instala automáticamente en Keychain con tu permiso (necesario para TLS spoof)' },
          { k: 'TLS BINARY',   v: 'bogdanfinn/tls-client v1.14+ · gestionado por Anty · sin instalación manual' },
        ].map((it, i) => (
          <div key={i} style={{ padding: 20, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg-2)' }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)',
              letterSpacing: '0.1em', marginBottom: 8,
            }}>{it.k}</div>
            <div style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>{it.v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── FAQ específico ────────────────────────────────────────────────────── */
const AntyFAQ = () => {
  const items = [
    {
      q: '¿Por qué macOS only?',
      a: 'Aprovechamos Keychain, code signing y notarization de Apple para mantener el flujo seguro y sin fricción. Una versión Windows técnicamente es posible pero diluye la coherencia con el preset iPhone que es el corazón de Anty. Si lo necesitas, escríbenos.',
    },
    {
      q: '¿Vinted me banea por usar Anty?',
      a: 'Anty está diseñado para que Vinted NO te detecte por capa técnica. Pero el ban depende también de cómo operes: cadencia humana, IP residencial limpia, identidad coherente, payout único por cuenta. Anty cubre la infraestructura — la operativa la decides tú.',
    },
    {
      q: '¿Qué pasa si caduca mi licencia con perfiles abiertos?',
      a: 'En 30 min como máximo, Anty detecta la caducidad por heartbeat y cierra los perfiles abiertos. No vas a operar a oscuras con licencia expirada. Si tu licencia vuelve a estar activa, simplemente reabres y sigues.',
    },
    {
      q: '¿Puedo usar Anty en varios Macs?',
      a: 'Sí. Tu licencia te identifica como persona, no como dispositivo. Cada Mac que abre Anty se autentica con tu email Blackstock y se cuenta como una instalación. Sin límite arbitrario.',
    },
    {
      q: '¿Dónde se guardan mis perfiles?',
      a: 'Localmente en tu Mac, cifrados con AES-GCM. La clave deriva de la contraseña de tu vault con PBKDF2 y se cachea en Keychain (safeStorage). Blackstock no tiene acceso a tus perfiles — ni siquiera al contenido del vault.',
    },
    {
      q: '¿Anty funciona sin internet?',
      a: 'Si pierdes conexión, Anty entra en modo gracia infinito: confía en la última revalidación OK de tu licencia y te deja seguir trabajando. Solo cuando el servidor responde EXPLÍCITAMENTE que tu licencia ya no vale, cierra los perfiles.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="bs-section">
      <div className="bs-container">
        <div className="bs-section-head" style={{ alignItems: 'flex-start' }}>
          <span className="bs-eyebrow acid">FAQ</span>
          <h2 className="bs-display bs-h2" style={{ margin: 0 }}>Preguntas frecuentes sobre Anty.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 820, margin: '0 auto' }}>
          {items.map((it, i) => {
            const isOpen = i === open;
            return (
              <div key={i} style={{
                border: '1px solid var(--line)', borderRadius: 12,
                background: 'var(--bg-2)', overflow: 'hidden',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
                    padding: '20px 22px', cursor: 'pointer', color: 'var(--fg)',
                    fontSize: 15, fontWeight: 500, display: 'flex', justifyContent: 'space-between',
                    alignItems: 'center', gap: 12,
                  }}
                >
                  <span>{it.q}</span>
                  <span style={{
                    transition: 'transform .2s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    color: isOpen ? 'var(--acid)' : 'var(--fg-3)', fontSize: 20,
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 22px 22px', color: 'var(--fg-2)', fontSize: 14, lineHeight: 1.65 }}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ── CTA final ─────────────────────────────────────────────────────────── */
const AntyCtaFinal = ({ onCTA }) => (
  <section className="bs-section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
    <div className="bs-container" style={{ textAlign: 'center' }}>
      <div style={{ display: 'inline-block', filter: 'drop-shadow(0 0 28px rgba(214,255,77,0.35))' }}>
        <LogoMark size={64} />
      </div>
      <h2 className="bs-display bs-h1" style={{ margin: '24px auto 18px', maxWidth: 720, letterSpacing: '-0.03em' }}>
        Tu navegador privado<br />
        para operar Vinted.
      </h2>
      <p style={{ color: 'var(--fg-2)', fontSize: 16, maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.6 }}>
        Empieza con BASIC. Anty se descarga desde tu panel cliente en cuanto activas la licencia.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button className="bs-btn bs-btn-acid" onClick={() => onCTA && onCTA('basic')}>
          Empezar con BASIC · 22,90€/mes →
        </button>
        <button className="bs-btn bs-btn-ghost" onClick={() => window.bsOpenDemo && window.bsOpenDemo()}>
          Ver demo
        </button>
      </div>
      <p style={{
        marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        letterSpacing: '0.08em',
      }}>
        ● SIN PERMANENCIA · CANCELAS CUANDO QUIERAS · ACCESO BAJO LLAMADA
      </p>
    </div>
  </section>
);

/* ── Página completa ───────────────────────────────────────────────────── */
const AntyPage = ({ onNavigate, onCTA }) => {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <div className="bs-shell">
      <Nav activePage="anty" onNavigate={onNavigate} />
      <AntyHero onCTA={onCTA} onScrollTo={scrollTo} />
      <AntyContexto />
      <AntyStack />
      <AntyComoFunciona />
      <AntyDentro />
      <AntyComparativa />
      <AntyIncluido onCTA={onCTA} />
      <AntyDownload />
      <AntyCompat />
      <AntyFAQ />
      <AntyCtaFinal onCTA={onCTA} />
      <Footer />
    </div>
  );
};

window.AntyPage = AntyPage;