// pages.jsx — Internal pages as placeholders.
// Full content will be added in follow-up prompts (one page at a time).

// Shared page hero
function PageHero({ eyebrow, title, accent, subtitle, badge, accentColor = '#00d4ff' }) {
  return (
    <div className="relative overflow-hidden" style={{ paddingTop: 120, paddingBottom: 64 }}>
      <div className="absolute inset-0 tech-grid opacity-40 pointer-events-none"></div>
      <div className="absolute inset-0 pointer-events-none" style={{
        background: `radial-gradient(ellipse 900px 500px at 50% 0%, ${accentColor}30, transparent 60%)`
      }}></div>
      <Container className="relative text-center">
        {badge && (
          <div className="reveal inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-6" style={{
            background: `${accentColor}15`, border: `1px solid ${accentColor}50`, color: accentColor,
          }}>
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: accentColor, boxShadow: `0 0 8px ${accentColor}` }}></span>
            {badge}
          </div>
        )}
        {eyebrow && <div className="reveal font-mono text-[12px] tracking-[0.2em] uppercase mb-3" style={{ color: 'var(--text-dim)' }}>{eyebrow}</div>}
        <h1 className="reveal font-display font-bold tracking-tight text-[32px] sm:text-[48px] md:text-[68px] lg:text-[78px] leading-[1] break-words" style={{ fontVariationSettings: '"wdth" 100, "wght" 800' }}>
          {title} {accent && <span className="grad-text" style={{ fontVariationSettings: '"wdth" 100, "wght" 800' }}>{accent}</span>}
        </h1>
        {subtitle && (
          <p className="reveal mt-6 max-w-2xl mx-auto text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
            {subtitle}
          </p>
        )}
      </Container>
    </div>
  );
}

function InternalCTA({ title, subtitle, cta, icon = 'arrow-right', accent = '#0070ff', href }) {
  return (
    <Section className="py-20 relative overflow-hidden">
      <div className="absolute inset-0" style={{
        background: `radial-gradient(ellipse 900px 500px at 50% 100%, ${accent}40, transparent 60%)`
      }}></div>
      <div className="absolute inset-0 tech-grid opacity-30"></div>
      <Container className="relative text-center">
        <h2 className="reveal font-display font-bold text-[36px] md:text-[54px] leading-[1.02] tracking-tight max-w-3xl mx-auto">
          {title}
        </h2>
        {subtitle && (
          <p className="reveal mt-5 max-w-xl mx-auto text-[16px]" style={{ color: 'var(--text-dim)' }}>
            {subtitle}
          </p>
        )}
        <div className="reveal mt-8 flex flex-wrap justify-center gap-3">
          <a href={href || 'https://t.me/barbieshark'} target="_blank" rel="noopener noreferrer" className="btn btn-primary text-base px-6 py-3.5">
            <Icon name={icon} size={16} /> {cta}
          </a>
        </div>
      </Container>
    </Section>
  );
}

function PagePlaceholder({ title, accent, accentColor, description, back, icon = 'sparkles' }) {
  return (
    <div className="relative overflow-hidden" style={{ minHeight: 'calc(100vh - 68px - 400px)' }}>
      {/* Background */}
      <div className="absolute inset-0 tech-grid opacity-40 pointer-events-none"></div>
      <div className="absolute inset-0 pointer-events-none" style={{
        background: `radial-gradient(ellipse 900px 500px at 50% 0%, ${accentColor}30, transparent 60%)`
      }}></div>
      <div className="absolute left-0 right-0 top-[200px] h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent)' }}></div>

      <Container className="relative pt-32 md:pt-40 pb-20">
        <div className="text-center max-w-3xl mx-auto">
          <div className="reveal inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-7" style={{
            background: `${accentColor}15`, border: `1px solid ${accentColor}50`, color: accentColor,
          }}>
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: accentColor, boxShadow: `0 0 8px ${accentColor}` }}></span>
            PRÓXIMAMENTE
          </div>

          {/* Decorative icon */}
          <div className="reveal flex justify-center mb-7" style={{ '--delay': '80ms' }}>
            <div className="w-20 h-20 rounded-2xl flex items-center justify-center relative" style={{
              background: `linear-gradient(135deg, ${accentColor}25, ${accentColor}05)`,
              border: `1px solid ${accentColor}40`,
              color: accentColor,
              boxShadow: `0 20px 60px -10px ${accentColor}50`,
            }}>
              <Icon name={icon} size={36} />
              <div className="absolute inset-0 rounded-2xl anim-spin-slow opacity-40" style={{
                background: `conic-gradient(from 0deg, transparent, ${accentColor}40, transparent 30%)`,
                WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
                WebkitMaskComposite: 'xor', maskComposite: 'exclude',
                padding: 1,
              }}></div>
            </div>
          </div>

          <h1 className="reveal font-display font-bold tracking-tight text-[44px] sm:text-[58px] md:text-[78px] leading-[0.98]" style={{ '--delay': '140ms' }}>
            {title} {accent && <span className="grad-text">{accent}</span>}
          </h1>

          {description && (
            <p className="reveal mt-6 text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)', '--delay': '220ms' }}>
              {description}
            </p>
          )}

          {/* Status panel */}
          <div className="reveal mt-10 glass rounded-2xl p-6 md:p-7 inline-flex flex-col items-center gap-4 max-w-md mx-auto" style={{ '--delay': '320ms' }}>
            <div className="flex items-center gap-2.5">
              <div className="relative">
                <div className="w-2.5 h-2.5 rounded-full" style={{ background: accentColor }}></div>
                <div className="absolute inset-0 rounded-full anim-blink" style={{ background: accentColor, opacity: 0.6 }}></div>
              </div>
              <span className="font-mono text-[12px] tracking-[0.18em]" style={{ color: 'var(--text-dim)' }}>
                EN CONSTRUCCIÓN
              </span>
            </div>
            <p className="text-[14px] leading-relaxed text-center" style={{ color: 'var(--text-dim)' }}>
              Estamos diseñando esta página. Volvé al inicio para ver el resto del ecosistema.
            </p>
          </div>

          <div className="reveal mt-8" style={{ '--delay': '420ms' }}>
            <button onClick={back} className="btn btn-outline-cyan">
              <Icon name="arrow-left" size={15} /> Volver al inicio
            </button>
          </div>
        </div>
      </Container>
    </div>
  );
}

// ============================================================
// COPYTRADING — Automatic copy of Damco's signals via MT5
// ============================================================
const BRIDGE_CT_REGISTER = 'https://trading.bridgemarkets.global/register?ref=e030a07c-a782-49e5-a&branchUuid=759c4fa8-df5b-4cdc-97ae-7';
const CT_SUPPORT = 'https://t.me/barbieshark';
const CT_ANUNCIOS = 'https://chat.whatsapp.com/I6Iblc8inKX9sZtaIXH2NU';

function PageCopyTrading({ go }) {
  const [activeFaq, setActiveFaq] = React.useState(0);

  // Plans
  const plans = [
    {
      key: 'basico',
      name: 'Básico',
      tag: 'ENTRADA',
      accent: '#00d4ff',
      capitalTotal: 250,
      capitalOp: 200,
      capitalAct: 50,
      entry: null,
      splitUser: 50,
      splitOp: 50,
      tagline: 'El primer paso al copy automático',
      broker: 'Bridge Markets',
      highlights: [
        'Capital operativo: $200 USD',
        'Activación del sistema: $50 USD',
        'Operación 100% automática vía MT5',
        'Conexión 24/7 a las señales de Damco',
        'Soporte directo por Telegram',
        'Reparto semanal de ganancias',
      ],
      excluded: [
        'Acceso a la comunidad Premium',
        'Cuenta madre adicional',
      ],
      featured: false,
    },
    {
      key: 'premium',
      name: 'Premium',
      tag: 'RECOMENDADO',
      accent: '#d4a017',
      capitalTotal: null,
      capitalOp: 250,
      capitalAct: 125,
      entry: 125,
      splitUser: 75,
      splitOp: 25,
      tagline: 'La mejor relación riesgo / recompensa',
      broker: 'Bridge Markets · DAMCO Premium Elite',
      highlights: [
        'Acceso al sistema: $125 USD',
        'Capital mínimo recomendado: $250 USD',
        'Operación 100% automática vía MT5',
        'Conexión 24/7 a las señales de Damco',
        'Mejor condición de reparto (75% para vos)',
        'Acceso completo al plan PREMIUM incluido',
        'Señales, Discord y educación premium',
        'Acompañamiento prioritario en soporte',
      ],
      excluded: [
        'Cuenta madre adicional para grandes capitales',
      ],
      featured: true,
    },
    {
      key: 'grandes',
      name: 'Grandes Inversores',
      tag: 'CAPITAL ALTO',
      accent: '#7c5cff',
      capitalTotal: 3000,
      capitalOp: 3000,
      capitalAct: 500,
      entry: 500,
      splitUser: 80,
      splitOp: 20,
      tagline: 'Para capitales de $3K+ con cuenta madre',
      broker: 'Bridge Markets',
      highlights: [
        'Reparto premium 80% para vos',
        'Segunda cuenta madre asignada',
        'Gestión optimizada para capitales grandes',
        'Operación 100% automática vía MT5',
        'Todo lo del nivel Premium incluido',
        'Atención VIP directa con el equipo',
      ],
      excluded: [],
      featured: false,
    },
  ];

  // Setup steps
  const setupSteps = [
    {
      n: '01',
      title: 'Creá tu cuenta en Bridge Markets',
      accent: '#00d4ff',
      d: 'Registrate con nuestro link de afiliado para activar el bono del 100% que duplica todos tus depósitos. Si no se aplica automáticamente, escribí a soporte.',
      cta: { href: BRIDGE_CT_REGISTER, label: 'Registrarme en Bridge Markets', icon: 'external-link' },
      perks: ['Bono 100% en depósitos', 'Sintéticos Deriv + Weltrade dentro', 'Link de afiliado DAMCOVISION'],
    },
    {
      n: '02',
      title: 'Creá la cuenta MT5 "100% All Synthetic"',
      accent: '#0070ff',
      d: 'Una vez verificada tu cuenta Bridge, generá una cuenta MetaTrader 5 del tipo "100% All Synthetic". Es la única compatible con el sistema de copy.',
      tip: 'En el panel de Bridge: "Cuentas" → "Crear MT5" → tipo "100% All Synthetic"',
    },
    {
      n: '03',
      title: 'Fondeá con el capital mínimo de tu plan',
      accent: '#d4a017',
      d: 'Depositá al menos el mínimo requerido según el plan elegido. Recordá que tu cuenta no puede bajar de ese mínimo al inicio de la semana.',
      tip: 'Básico: $250 total ($200 operativo + $50 activación) · Premium: $125 acceso + $250 capital recomendado · Grandes Inversores: $3.000',
    },
    {
      n: '04',
      title: 'Enviá tus credenciales a soporte',
      accent: '#10b981',
      d: 'Mandá a soporte el ID PRINCIPAL y la contraseña de tu cuenta MT5. El equipo conecta tu cuenta al sistema y empezás a copiar inmediatamente.',
      cta: { href: CT_SUPPORT, label: 'Hablar con soporte', icon: 'send' },
      perks: ['Conexión en menos de 24h', 'Te avisamos cuando esté activa'],
    },
  ];

  // Important rules
  const rules = [
    {
      icon: 'calendar-check',
      t: 'Retiros sólo los fines de semana',
      d: 'Después del reparto semanal de ganancias. Durante la semana el capital permanece operativo.',
      col: '#00d4ff',
    },
    {
      icon: 'shield-alert',
      t: 'No bajar del mínimo al inicio de semana',
      d: 'Si tu cuenta queda por debajo del mínimo después del reparto, no podrá tomar operaciones esa semana.',
      col: '#f97316',
    },
    {
      icon: 'sliders-horizontal',
      t: 'Podés operar manualmente en paralelo',
      d: 'El copy convive con tu trading manual en la misma cuenta. Muchos usuarios prefieren separar cuentas para mejor control de riesgo.',
      col: '#10b981',
    },
    {
      icon: 'plug-zap',
      t: 'Cargo de reconexión si desconectás',
      d: 'Si decidís desconectar tu cuenta del sistema, tené en cuenta que existe un cargo si querés volver a conectarte más adelante.',
      col: '#ef4444',
    },
    {
      icon: 'clock',
      t: 'Premium dura 1 mes',
      d: 'El servicio Premium se renueva mensualmente para mantener activa la copiadora.',
      col: '#d4a017',
    },
    {
      icon: 'alert-triangle',
      t: 'No garantizamos ganancias',
      d: 'El trading conlleva riesgo. Trabajamos con consistencia, gestión de riesgo y rendimiento sostenido en el tiempo.',
      col: '#c5b6ff',
    },
  ];

  // FAQ
  const faqs = [
    {
      q: '¿Conviene más usar CopyTrading siendo Premium o Básico?',
      a: 'Ser usuario Premium es considerablemente más conveniente. La principal diferencia está en la distribución de ganancias: en Premium recibís un porcentaje mayor a tu favor (75% vs 50%), lo que permite escalar resultados de forma más eficiente en el tiempo. Además, los usuarios Premium acceden a mejores condiciones operativas y a todo el plan Premium dentro del sistema.',
    },
    {
      q: '¿Puedo operar manualmente mientras uso CopyTrading?',
      a: 'Sí, es totalmente posible. Podés operar manualmente en la misma cuenta mientras el CopyTrading está activo. Sin embargo, muchos usuarios optan por separar cuentas: una para CopyTrading automático y otra para operaciones manuales, logrando así una mejor organización y control del riesgo.',
    },
    {
      q: '¿Cuánto dura el servicio de CopyTrading Premium?',
      a: 'El CopyTrading Premium tiene una duración equivalente al plan activo, es decir, 1 mes. Una vez finalizado el período, será necesario renovar el servicio para continuar utilizando la copiadora.',
    },
    {
      q: '¿Puedo retirar mi dinero en cualquier momento?',
      a: 'Solamente los fines de semana después del reparto de ganancias. Adicionalmente, tu cuenta no puede bajar del monto mínimo requerido al inicio de semana después del reparto, ya que no podrá tomar operaciones en caso contrario.',
    },
    {
      q: '¿El CopyTrading garantiza ganancias?',
      a: 'No. El trading conlleva riesgos y no existen garantías de ganancias. Sin embargo, el sistema está diseñado con un enfoque en consistencia, gestión de riesgo y rendimiento sostenido a lo largo del tiempo.',
    },
    {
      q: '¿Qué pasa si desconecto mi cuenta del sistema?',
      a: 'Si desconectás tu cuenta, tené en consideración que habrá un cargo de reconexión si decidís volver al sistema más adelante. Por eso recomendamos consultar con soporte antes de tomar la decisión.',
    },
    {
      q: '¿Con qué broker trabaja el CopyTrading?',
      a: 'El broker utilizado es Bridge Markets, pero dentro de este están disponibles los índices sintéticos de Deriv y Weltrade. Operás todo desde tu cuenta MT5 "100% All Synthetic" de Bridge Markets.',
    },
  ];

  return (
    <div>
      {/* HERO ============================== */}
      <div className="relative overflow-hidden" style={{ paddingTop: 120, paddingBottom: 64 }}>
        <div className="absolute inset-0 tech-grid opacity-40 pointer-events-none"></div>
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(0,112,255,0.35), transparent 60%), radial-gradient(ellipse 800px 400px at 90% 70%, rgba(212,160,23,0.12), transparent 60%)'
        }}></div>
        <Container className="relative">
          <div className="grid lg:grid-cols-[1.15fr_0.85fr] gap-10 items-center">
            {/* Left: Copy */}
            <div>
              <div className="reveal flex flex-wrap items-center gap-3 mb-6">
                <div className="inline-flex items-center gap-2.5 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase" style={{ background: 'rgba(0,212,255,0.10)', border: '1px solid rgba(0,212,255,0.35)', color: '#7fe5ff' }}>
                  <span className="w-1.5 h-1.5 rounded-full anim-blink" style={{ background: '#00d4ff', boxShadow: '0 0 8px #00d4ff' }}></span>
                  COPYTRADING AUTOMÁTICO
                </div>
                <div className="inline-flex items-center gap-2 font-mono text-[11px]" style={{ color: 'var(--text-dim)' }}>
                  <Icon name="zap" size={12} style={{ color: '#34d399' }} />
                  Operación 24/7
                </div>
              </div>
              <h1 className="reveal font-display font-bold tracking-tight text-[44px] sm:text-[58px] md:text-[72px] leading-[0.98]" style={{ '--delay': '80ms' }}>
                Tu capital opera<br /><span className="grad-text">en automático</span>
              </h1>
              <p className="reveal mt-6 max-w-xl text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)', '--delay': '180ms' }}>
                Conectás tu cuenta MT5 a nuestro sistema y copiás automáticamente las señales del trader profesional <span className="text-white font-semibold">Damco</span>. No tenés que hacer nada más: el sistema opera por vos.
              </p>
              <div className="reveal mt-8 flex flex-wrap gap-3" style={{ '--delay': '260ms' }}>
                <button onClick={() => {
                  const el = document.getElementById('ct-setup');
                  if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
                }} className="btn btn-primary text-base px-6 py-3.5">
                  Ver pasos para empezar <Icon name="arrow-down" size={16} />
                </button>
                <a href={CT_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn btn-outline-cyan text-base px-6 py-3.5">
                  <Icon name="send" size={16} /> Activar por Telegram
                </a>
              </div>
              <div className="reveal mt-7 flex flex-wrap items-center gap-x-4 gap-y-2" style={{ '--delay': '320ms' }}>
                <span className="font-mono text-[10.5px] tracking-[0.2em] uppercase" style={{ color: 'var(--text-mute)' }}>
                  Broker oficial
                </span>
                <img src="img/bridgemarkets.svg" alt="Bridge Markets" className="logo-white" style={{ height: 24, opacity: 0.95 }} />
              </div>
            </div>

            {/* Right: Flow diagram */}
            <div className="reveal" style={{ '--delay': '300ms' }}>
              <CopyFlowDiagram />
            </div>
          </div>
        </Container>
      </div>

      {/* QUE ES — quick stats strip ============================== */}
      <Section className="py-6">
        <Container>
          <div className="reveal grid grid-cols-2 md:grid-cols-4 gap-3">
            {[
              { v: '24/7', l: 'Sistema activo', c: '#00d4ff' },
              { v: '3', l: 'Planes disponibles', c: '#d4a017' },
              { v: 'MT5', l: 'Plataforma única', c: '#7c5cff' },
              { v: '100%', l: 'Automático', c: '#10b981' },
            ].map((s, i) => (
              <div key={i} className="glass-strong rounded-2xl p-5 text-center">
                <div className="font-display font-bold text-[32px] md:text-[40px] leading-none" style={{ color: s.c }}>{s.v}</div>
                <div className="font-mono text-[10px] tracking-[0.18em] uppercase mt-2" style={{ color: 'var(--text-dim)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* SETUP STEPS ============================== */}
      <Section id="ct-setup" className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.12), transparent)' }}>
        <Container>
          <SectionHeader
            eyebrow="PRIMER PASO · ANTES DE ELEGIR PLAN"
            title={<>Preparate en <span className="grad-text-cyan">4 pasos</span></>}
            subtitle="Antes de activar cualquier plan necesitás tener tu cuenta lista. Te lleva entre 15 y 30 minutos."
          />

          <div className="mt-12 grid lg:grid-cols-[80px_1fr] gap-8">
            {/* Vertical rail desktop */}
            <div className="hidden lg:block sticky top-24 self-start">
              <div className="relative w-full h-[480px]">
                <div className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-px" style={{
                  background: 'linear-gradient(180deg, #00d4ff, #0070ff, #d4a017, #10b981)',
                  opacity: 0.4,
                }}></div>
                {setupSteps.map((s, i) => (
                  <div key={i} className="absolute left-1/2 -translate-x-1/2" style={{ top: `${(i + 0.5) / setupSteps.length * 100}%`, transform: 'translate(-50%, -50%)' }}>
                    <div className="w-10 h-10 rounded-full flex items-center justify-center font-display font-bold text-[14px]" style={{
                      background: 'var(--bg-0)',
                      border: `2px solid ${s.accent}`,
                      color: s.accent,
                      boxShadow: `0 0 0 4px var(--bg-0), 0 0 16px ${s.accent}66`,
                    }}>{s.n}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="space-y-5">
              {setupSteps.map((s, i) => (
                <div key={i} className="reveal glass-strong rounded-2xl p-6 md:p-7 relative" style={{ '--delay': `${i * 80}ms` }}>
                  <div className="flex items-start gap-5">
                    <div className="lg:hidden font-display font-bold text-[36px] leading-none shrink-0" style={{ color: s.accent }}>{s.n}</div>
                    <div className="flex-1">
                      <div className="font-display font-bold text-[22px] md:text-[26px] leading-tight">{s.title}</div>
                      <p className="mt-2.5 text-[14.5px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>{s.d}</p>

                      {s.perks && (
                        <div className="mt-4 flex flex-wrap gap-2">
                          {s.perks.map((p, j) => (
                            <span key={j} className="font-mono text-[10.5px] px-2.5 py-1 rounded" style={{
                              background: `${s.accent}10`,
                              border: `1px solid ${s.accent}30`,
                              color: 'var(--text)',
                            }}>{p}</span>
                          ))}
                        </div>
                      )}

                      {s.tip && (
                        <div className="mt-4 pl-3 py-2 text-[12.5px] font-mono leading-relaxed" style={{ borderLeft: `2px solid ${s.accent}`, color: 'var(--text-dim)' }}>
                          <span style={{ color: s.accent }}>TIP · </span>{s.tip}
                        </div>
                      )}

                      {s.cta && (
                        <a href={s.cta.href} target="_blank" rel="noopener noreferrer" className="btn mt-5 text-[13.5px] py-2.5 px-4" style={{
                          background: i === 0 ? 'linear-gradient(180deg, #f7d56b, #d4a017)' : `${s.accent}10`,
                          color: i === 0 ? '#0a0a14' : s.accent,
                          fontWeight: i === 0 ? 700 : 600,
                          border: i === 0 ? '1px solid rgba(247,213,107,0.6)' : `1px solid ${s.accent}40`,
                          boxShadow: i === 0 ? '0 10px 30px -8px rgba(212,160,23,0.6)' : 'none',
                        }}>
                          {s.cta.label} <Icon name={s.cta.icon} size={14} />
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* What to send block */}
          <div className="reveal mt-10 max-w-3xl mx-auto rounded-2xl p-6" style={{
            background: 'rgba(16,185,129,0.06)',
            border: '1px solid rgba(16,185,129,0.3)',
          }}>
            <div className="flex items-start gap-3">
              <Icon name="key-round" size={20} style={{ color: '#34d399', marginTop: 2 }} />
              <div className="flex-1">
                <div className="font-display font-bold text-[16px]">¿Qué tenés que mandarle a soporte?</div>
                <div className="mt-3 grid sm:grid-cols-2 gap-3">
                  {[
                    { l: 'ID PRINCIPAL', d: 'Identificador numérico de tu cuenta MT5' },
                    { l: 'Contraseña MT5', d: 'La contraseña de inversor / principal' },
                  ].map((it, i) => (
                    <div key={i} className="rounded-lg p-3" style={{ background: 'rgba(0,0,0,0.25)', border: '1px solid var(--border)' }}>
                      <div className="font-mono text-[10px] tracking-[0.18em] uppercase" style={{ color: '#34d399' }}>{it.l}</div>
                      <div className="text-[12.5px] mt-1" style={{ color: 'var(--text-dim)' }}>{it.d}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* PLANES ============================== */}
      <Section id="ct-planes" className="py-16 md:py-24">
        <Container>
          <SectionHeader
            eyebrow="SEGUNDO PASO · ELEGÍ TU PLAN"
            title={<>3 niveles de <span className="grad-text-cyan">CopyTrading</span></>}
            subtitle="Una vez con tu cuenta MT5 fondeada, elegí el plan que mejor se ajuste a tu capital. Cuanto más alto, mejor el reparto a tu favor."
          />

          <div className="mt-12 grid lg:grid-cols-3 gap-5 items-stretch">
            {plans.map((p, i) => {
              const isFeat = p.featured;
              return (
                <div
                  key={p.key}
                  className="reveal relative rounded-2xl p-6 md:p-7 flex flex-col"
                  style={{
                    '--delay': `${i * 120}ms`,
                    background: isFeat
                      ? 'linear-gradient(180deg, rgba(212,160,23,0.10), rgba(13,13,26,0.7))'
                      : 'linear-gradient(180deg, rgba(20,20,40,0.7), rgba(13,13,26,0.5))',
                    border: isFeat ? '1px solid rgba(212,160,23,0.5)' : '1px solid var(--border)',
                    backdropFilter: 'blur(20px)',
                    boxShadow: isFeat ? '0 30px 80px -20px rgba(212,160,23,0.35)' : 'none',
                  }}
                >
                  {isFeat && (
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-md font-mono text-[10px] tracking-[0.2em] flex items-center gap-1.5" style={{
                      background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                      color: '#0a0a14',
                      boxShadow: '0 8px 24px -4px rgba(212,160,23,0.6)',
                    }}>
                      <Icon name="crown" size={11} /> MÁS ELEGIDO
                    </div>
                  )}

                  {/* Tag */}
                  <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase mb-1.5" style={{ color: p.accent }}>
                    {p.tag}
                  </div>
                  <div className="font-display font-bold text-[30px] md:text-[36px] leading-none">{p.name}</div>
                  <p className="text-[13px] mt-2 leading-relaxed" style={{ color: 'var(--text-dim)' }}>{p.tagline}</p>

                  {/* Entry cost */}
                  <div className="mt-6">
                    {p.key === 'basico' ? (
                      <>
                        <div className="flex items-baseline gap-2">
                          <span className="font-display font-bold text-[56px] md:text-[64px] leading-none" style={{ color: p.accent }}>
                            $250
                          </span>
                          <span className="font-mono text-sm" style={{ color: 'var(--text-dim)' }}>USD total</span>
                        </div>
                        <div className="mt-2 flex flex-col gap-1">
                          <div className="font-mono text-[11.5px] flex items-center gap-2" style={{ color: 'var(--text-dim)' }}>
                            <span style={{ color: p.accent }}>→</span> $200 capital operativo
                          </div>
                          <div className="font-mono text-[11.5px] flex items-center gap-2" style={{ color: 'var(--text-dim)' }}>
                            <span style={{ color: p.accent }}>→</span> $50 activación del sistema
                          </div>
                        </div>
                      </>
                    ) : p.key === 'premium' ? (
                      <>
                        <div className="flex items-baseline gap-2">
                          <span className="font-display font-bold text-[56px] md:text-[64px] leading-none" style={{ color: p.accent }}>
                            $125
                          </span>
                          <span className="font-mono text-sm" style={{ color: 'var(--text-dim)' }}>USD acceso</span>
                        </div>
                        <div className="mt-2 flex flex-col gap-1">
                          <div className="font-mono text-[11.5px] flex items-center gap-2" style={{ color: 'var(--text-dim)' }}>
                            <span style={{ color: p.accent }}>→</span> Capital mínimo recomendado: $250
                          </div>
                        </div>
                      </>
                    ) : (
                      <div className="flex items-baseline gap-2">
                        <span className="font-display font-bold text-[56px] md:text-[64px] leading-none" style={{ color: p.accent }}>
                          ${p.entry}
                        </span>
                        <span className="font-mono text-sm" style={{ color: 'var(--text-dim)' }}>USD acceso</span>
                      </div>
                    )}
                  </div>

                  {/* Broker badge */}
                  <div className="mt-3 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-mono text-[10.5px] self-start" style={{
                    background: 'rgba(255,255,255,0.025)',
                    border: '1px solid var(--border)',
                    color: 'var(--text-dim)',
                  }}>
                    <Icon name="building-2" size={11} />
                    {p.broker}
                  </div>

                  {/* Split visual */}
                  <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border)' }}>
                    <div className="font-mono text-[10px] tracking-[0.18em] uppercase mb-3" style={{ color: 'var(--text-dim)' }}>
                      Reparto de ganancias
                    </div>
                    <SplitBar splitUser={p.splitUser} splitOp={p.splitOp} accent={p.accent} />
                    <div className="flex justify-between mt-2 font-mono text-[11px]">
                      <span style={{ color: p.accent }}>Vos {p.splitUser}%</span>
                      <span style={{ color: 'var(--text-mute)' }}>Operador {p.splitOp}%</span>
                    </div>
                  </div>

                  {/* Highlights */}
                  <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border)' }}>
                    <div className="font-mono text-[10px] tracking-[0.18em] uppercase mb-3" style={{ color: 'var(--text-dim)' }}>
                      Incluye
                    </div>
                    <ul className="space-y-2.5">
                      {p.highlights.map((h, j) => (
                        <li key={j} className="flex items-start gap-2.5 text-[13.5px]">
                          <Icon name="check" size={15} style={{ color: p.accent, marginTop: 2 }} strokeWidth={2.5} />
                          <span>{h}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {p.excluded.length > 0 && (
                    <div className="mt-5 pt-5 border-t" style={{ borderColor: 'var(--border)' }}>
                      <div className="font-mono text-[10px] tracking-[0.18em] uppercase mb-3" style={{ color: 'var(--text-mute)' }}>
                        No incluye
                      </div>
                      <ul className="space-y-2">
                        {p.excluded.map((f, j) => (
                          <li key={j} className="flex items-start gap-2.5 text-[12.5px]" style={{ color: 'var(--text-mute)' }}>
                            <Icon name="minus" size={13} style={{ marginTop: 3 }} strokeWidth={2} />
                            <span>{f}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {/* CTA */}
                  <a
                    href={CT_SUPPORT}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={"btn w-full justify-center text-base py-3.5 mt-7 mt-auto " + (isFeat ? '' : 'btn-outline-cyan')}
                    style={isFeat ? {
                      background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                      color: '#0a0a14',
                      border: '1px solid rgba(247,213,107,0.6)',
                      boxShadow: '0 10px 30px -8px rgba(212,160,23,0.6), inset 0 1px 0 rgba(255,255,255,0.3)',
                      fontWeight: 700,
                    } : {
                      borderColor: `${p.accent}66`,
                      color: p.accent,
                      background: `${p.accent}10`,
                    }}
                  >
                    Activar {p.name} <Icon name="send" size={15} />
                  </a>
                  <div className="font-mono text-[10.5px] tracking-wider mt-2 text-center" style={{ color: 'var(--text-mute)' }}>
                    Vía Telegram @barbieshark
                  </div>
                </div>
              );
            })}
          </div>

          {/* Comparison row */}
          <div className="reveal mt-8 max-w-5xl mx-auto rounded-2xl overflow-hidden" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border)' }}>
            <table className="w-full text-[13px]">
              <thead>
                <tr style={{ background: 'rgba(255,255,255,0.03)' }}>
                  <th className="text-left px-4 py-3 font-mono text-[10px] tracking-[0.18em] uppercase font-semibold" style={{ color: 'var(--text-dim)' }}>Comparativa</th>
                  {plans.map(p => (
                    <th key={p.key} className="text-center px-4 py-3 font-mono text-[10px] tracking-[0.18em] uppercase font-semibold" style={{ color: p.accent }}>{p.name}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  { l: 'Mínimo en cuenta', f: p => p.key === 'basico' ? '$250 total' : p.key === 'premium' ? '$250 recomendado' : '$' + (p.capitalOp || 0).toLocaleString('en-US') },
                  { l: 'Costo de ingreso', f: p => '$' + p.entry + ' USD' },
                  { l: 'Reparto para vos', f: p => p.splitUser + '%' },
                  { l: 'Reparto operador', f: p => p.splitOp + '%' },
                  { l: 'Plan PREMIUM incluido', f: p => p.key === 'basico' ? '—' : '✓' },
                  { l: 'Cuenta madre extra', f: p => p.key === 'grandes' ? '✓' : '—' },
                ].map((row, i) => (
                  <tr key={i} className="border-t" style={{ borderColor: 'var(--border)' }}>
                    <td className="px-4 py-3 font-mono text-[12px]" style={{ color: 'var(--text-dim)' }}>{row.l}</td>
                    {plans.map(p => (
                      <td key={p.key} className="px-4 py-3 text-center font-mono text-[12.5px]" style={{
                        color: p.featured ? '#f7d56b' : 'var(--text)',
                        fontWeight: p.featured ? 700 : 500,
                      }}>{row.f(p)}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Container>
      </Section>

      {/* SPLIT EXAMPLE CALLOUT ============================== */}
      <Section className="pb-8">
        <Container>
          <div className="reveal max-w-4xl mx-auto rounded-2xl p-6 md:p-7 relative overflow-hidden" style={{
            background: 'linear-gradient(135deg, rgba(212,160,23,0.10), rgba(0,212,255,0.05))',
            border: '1px solid rgba(212,160,23,0.35)',
          }}>
            <div className="absolute -top-20 -right-20 w-56 h-56 rounded-full blur-3xl opacity-30 pointer-events-none" style={{ background: '#d4a017' }}></div>
            <div className="relative flex flex-wrap items-center gap-5">
              <div className="w-14 h-14 rounded-2xl flex items-center justify-center shrink-0" style={{
                background: 'rgba(212,160,23,0.15)',
                border: '1px solid rgba(212,160,23,0.4)',
                color: '#f0d68a',
              }}>
                <Icon name="lightbulb" size={24} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-mono text-[10px] tracking-[0.2em] uppercase mb-1.5" style={{ color: '#f0d68a' }}>
                  ¿PREMIUM O BÁSICO?
                </div>
                <div className="font-display font-bold text-[20px] md:text-[24px] leading-tight">
                  Premium es <span className="grad-text-amber">considerablemente más conveniente</span>
                </div>
                <p className="mt-2 text-[14px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                  La diferencia clave está en el reparto: con Premium te quedás con <span className="text-white font-semibold">75%</span> en vez de <span className="text-white">50%</span>. A largo plazo escalás muchísimo más rápido, y además tenés acceso al plan PREMIUM completo (señales, Discord, educación) sin pagar extra.
                </p>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* IMPORTANTE — Rules ============================== */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="IMPORTANTE SABER"
            title={<>Antes de <span className="grad-text-cyan">empezar</span></>}
            subtitle="Las reglas y condiciones del servicio. Léelas con calma para evitar sorpresas."
          />
          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {rules.map((r, i) => (
              <div key={i} className="reveal glass rounded-2xl p-6" style={{ '--delay': `${i * 70}ms` }}>
                <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{
                  background: `${r.col}15`,
                  border: `1px solid ${r.col}40`,
                  color: r.col,
                }}>
                  <Icon name={r.icon} size={20} />
                </div>
                <div className="font-display font-bold text-[16.5px] mt-4 leading-tight">{r.t}</div>
                <div className="text-[13.5px] mt-2 leading-relaxed" style={{ color: 'var(--text-dim)' }}>{r.d}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* FAQ ============================== */}
      <Section className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.10), transparent)' }}>
        <Container>
          <SectionHeader
            eyebrow="PREGUNTAS FRECUENTES"
            title={<>Lo que más nos <span className="grad-text-cyan">preguntan</span></>}
          />
          <div className="mt-12 max-w-3xl mx-auto space-y-3">
            {faqs.map((f, i) => {
              const open = activeFaq === i;
              return (
                <div key={i} className="reveal rounded-xl overflow-hidden" style={{
                  '--delay': `${i * 50}ms`,
                  background: open ? 'rgba(0,212,255,0.05)' : 'rgba(255,255,255,0.02)',
                  border: '1px solid ' + (open ? 'rgba(0,212,255,0.35)' : 'var(--border)'),
                  transition: 'all 220ms',
                }}>
                  <button
                    onClick={() => setActiveFaq(open ? -1 : i)}
                    className="w-full text-left px-5 py-4 flex items-center justify-between gap-4"
                  >
                    <span className="font-display font-semibold text-[15.5px] md:text-[16.5px] leading-tight">{f.q}</span>
                    <span className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-transform" style={{
                      background: open ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.04)',
                      border: '1px solid ' + (open ? 'rgba(0,212,255,0.4)' : 'var(--border)'),
                      color: open ? '#7fe5ff' : 'var(--text-dim)',
                      transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
                    }}>
                      <Icon name="plus" size={14} />
                    </span>
                  </button>
                  <div style={{
                    maxHeight: open ? '400px' : '0',
                    opacity: open ? 1 : 0,
                    transition: 'max-height 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms',
                    overflow: 'hidden',
                  }}>
                    <div className="px-5 pb-5 pt-1 text-[14px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                      {f.a}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Container>
      </Section>

      {/* FINAL CTA ============================== */}
      <Section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0" style={{
          background: 'radial-gradient(ellipse 1000px 500px at 50% 100%, rgba(0,112,255,0.40), transparent 60%)'
        }}></div>
        <div className="absolute inset-0 tech-grid opacity-30"></div>
        <Container className="relative">
          <div className="reveal text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-6" style={{ background: 'rgba(0,212,255,0.10)', border: '1px solid rgba(0,212,255,0.35)', color: '#7fe5ff' }}>
              <Icon name="zap" size={11} /> ACTIVACIÓN INMEDIATA
            </div>
            <h2 className="font-display font-bold text-[36px] md:text-[60px] leading-[1.02] tracking-tight">
              Empezá a copiar<br /><span className="grad-text">hoy mismo</span>
            </h2>
            <p className="mt-5 max-w-xl mx-auto text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
              Registrate en Bridge Markets con nuestro link, fondeá tu cuenta MT5 y avisanos. En menos de 24 horas estás copiando en automático.
            </p>

            <div className="mt-8 flex flex-wrap justify-center gap-3">
              <a href={BRIDGE_CT_REGISTER} target="_blank" rel="noopener noreferrer" className="btn btn-primary text-base px-6 py-4">
                <Icon name="external-link" size={16} /> Crear cuenta Bridge Markets
              </a>
              <a href={CT_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn text-base px-6 py-4" style={{
                background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                color: '#0a0a14',
                fontWeight: 700,
                boxShadow: '0 14px 40px -8px rgba(212,160,23,0.7)',
              }}>
                <Icon name="send" size={16} /> Activar Premium
              </a>
            </div>

            <div className="mt-8 inline-flex items-center gap-3 px-4 py-3 rounded-xl glass">
              <a href={CT_ANUNCIOS} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-[13px]" style={{ color: 'var(--text)' }}>
                <Icon name="message-circle" size={15} style={{ color: '#25d366' }} />
                <span>Sumate al grupo de <span className="text-white font-semibold">Anuncios CopyTrading</span></span>
                <Icon name="external-link" size={12} style={{ opacity: 0.5 }} />
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

// Helpers for CopyTrading page
function SplitBar({ splitUser, splitOp, accent }) {
  return (
    <div className="relative h-3 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid var(--border)' }}>
      <div className="absolute inset-y-0 left-0" style={{
        width: splitUser + '%',
        background: `linear-gradient(90deg, ${accent}, ${accent}cc)`,
        boxShadow: `0 0 12px ${accent}66`,
      }}></div>
      <div className="absolute inset-y-0 right-0" style={{
        width: splitOp + '%',
        background: 'linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08))',
      }}></div>
    </div>
  );
}

function CopyFlowDiagram() {
  return (
    <div className="relative rounded-2xl p-6 md:p-7 overflow-hidden" style={{
      background: 'linear-gradient(180deg, rgba(13,13,26,0.85), rgba(6,6,14,0.7))',
      border: '1px solid var(--border)',
      backdropFilter: 'blur(20px)',
      boxShadow: '0 30px 80px -20px rgba(0,112,255,0.35)',
    }}>
      <div className="absolute inset-0 tech-grid-fine opacity-30 pointer-events-none"></div>

      {/* Top: Trader Damco */}
      <div className="relative flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="relative w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{
            background: 'linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,112,255,0.10))',
            border: '1px solid rgba(0,212,255,0.5)',
            color: '#7fe5ff',
            boxShadow: '0 8px 24px -8px rgba(0,212,255,0.5)',
          }}>
            <Icon name="user-circle-2" size={22} />
            <span className="absolute -top-1 -right-1 w-3 h-3 rounded-full anim-blink" style={{ background: '#10b981', boxShadow: '0 0 8px #10b981' }}></span>
          </div>
          <div>
            <div className="font-mono text-[10px] tracking-[0.18em] uppercase" style={{ color: '#7fe5ff' }}>TRADER PROFESIONAL</div>
            <div className="font-display font-bold text-[17px] leading-tight">Damco</div>
          </div>
        </div>
        <div className="text-right">
          <div className="font-mono text-[10px]" style={{ color: 'var(--text-mute)' }}>OPERA EN VIVO</div>
          <div className="flex items-center gap-1.5 justify-end mt-0.5">
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: '#10b981' }}></span>
            <span className="font-mono text-[11px]" style={{ color: '#10b981' }}>ONLINE</span>
          </div>
        </div>
      </div>

      {/* Signal flow */}
      <div className="relative mt-5">
        <div className="rounded-lg p-3" style={{ background: 'rgba(0,212,255,0.06)', border: '1px solid rgba(0,212,255,0.25)' }}>
          <div className="flex items-center justify-between font-mono text-[10.5px]">
            <span style={{ color: '#7fe5ff' }}>SEÑAL BOOM 1000</span>
            <span style={{ color: '#10b981' }}>BUY 0.20</span>
          </div>
          <div className="mt-2 flex items-center gap-2">
            <div className="flex-1 h-1 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.05)' }}>
              <div className="h-full shimmer-bg" style={{ width: '100%', background: 'linear-gradient(90deg, #00d4ff, #0070ff)' }}></div>
            </div>
            <span className="font-mono text-[10px]" style={{ color: 'var(--text-mute)' }}>0.04s</span>
          </div>
        </div>

        {/* Down arrow */}
        <div className="flex justify-center my-4">
          <div className="flex flex-col items-center gap-1">
            <Icon name="chevrons-down" size={16} style={{ color: '#7fe5ff' }} />
            <span className="font-mono text-[9px] tracking-[0.2em]" style={{ color: '#7fe5ff' }}>COPIADO AUTO</span>
          </div>
        </div>

        {/* Bottom: User MT5 accounts */}
        <div className="rounded-lg p-4" style={{ background: 'rgba(212,160,23,0.05)', border: '1px solid rgba(212,160,23,0.25)' }}>
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <Icon name="users" size={14} style={{ color: '#f0d68a' }} />
              <span className="font-mono text-[10px] tracking-[0.18em] uppercase" style={{ color: '#f0d68a' }}>TU CUENTA MT5</span>
            </div>
            <span className="font-mono text-[10px]" style={{ color: 'var(--text-mute)' }}>BRIDGE MARKETS</span>
          </div>
          <div className="grid grid-cols-3 gap-2">
            {[
              { l: 'Balance', v: '$1.250', c: '#f7d56b' },
              { l: 'Posición', v: 'BUY 0.20', c: '#10b981' },
              { l: 'Plan', v: 'Premium', c: '#f7d56b' },
            ].map((s, i) => (
              <div key={i} className="rounded p-2" style={{ background: 'rgba(0,0,0,0.3)' }}>
                <div className="font-mono text-[8.5px] tracking-[0.15em] uppercase" style={{ color: 'var(--text-mute)' }}>{s.l}</div>
                <div className="font-mono text-[11.5px] font-bold mt-1" style={{ color: s.c }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom label */}
      <div className="relative mt-5 pt-4 border-t flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
        <span className="font-mono text-[10px] tracking-[0.18em] uppercase" style={{ color: 'var(--text-mute)' }}>FLUJO COPYTRADING</span>
        <span className="font-mono text-[10px]" style={{ color: '#10b981' }}>● SISTEMA ACTIVO</span>
      </div>
    </div>
  );
}
// ============================================================
// PREMIUM (signals)
// ============================================================
function PageSignals({ go }) {
  const SUPPORT = 'https://t.me/barbieshark';
  const tiers = [
    {
      key: 'basico',
      name: 'Premium',
      tagline: 'Señales y educación por excelencia',
      price: '89.99',
      renewLabel: 'Reconsumo mes siguiente',
      renew: '59.99',
      accent: '#00d4ff',
      headline: 'De 8 a 30 señales por día con los mejores traders de DAMCOVISION.',
      features: [
        'Señales premium en vivo y escritas',
        'Plataforma de Discord',
        'Estrategias avanzadas de trading',
        'Plataforma educativa completa',
        'Análisis de mercado profesional',
        'Acceso a comunidad privada de traders',
      ],
      excluded: [
        'Copy Trading de Bridge Markets y Weltrade',
        'Clases semanales con educador profesional',
        'Señales agresivas de alta precisión',
        'Acceso prioritario a oportunidades del mercado',
        'Acompañamiento cercano para escalar resultados',
      ],
      featured: false,
    },
    {
      key: 'elite',
      name: 'Premium Elite',
      tagline: 'El nivel definitivo del ecosistema',
      price: '125',
      renewLabel: 'Reconsumo mes siguiente',
      renew: '89.99',
      accent: '#d4a017',
      headline: 'Desbloquea CopyTrading automático con Bridge Markets + Weltrade y todo el plan Premium.',
      features: [
        'Señales premium en vivo y escritas',
        'Plataforma de Discord',
        'Estrategias avanzadas de trading',
        'Plataforma educativa completa',
        'Análisis de mercado profesional',
        'Acceso a comunidad privada de traders',
        'CopyTrading de Bridge Markets y Weltrade (sin costo)',
        'Clases semanales con educador profesional',
        'Señales agresivas de alta precisión',
        'Acceso prioritario a oportunidades del mercado',
        'Acompañamiento cercano para escalar resultados',
      ],
      excluded: [],
      featured: true,
    },
  ];

  const stats = [
    { v: '8—30', l: 'Señales por día' },
    { v: '24/7', l: 'Cobertura' },
    { v: '~78%', l: 'Win rate promedio' },
    { v: '+500', l: 'Traders en Discord' },
  ];

  return (
    <div>
      <PageHero
        badge="ACCESO LIMITADO"
        title="DAMCOVISION"
        accent="Premium"
        subtitle="Acceso exclusivo a señales en vivo, estrategias, comunidad privada y educación. Elegí el nivel que se ajusta a tu trading."
        accentColor="#d4a017"
      />

      {/* Countdown — próxima apertura */}
      <Section className="pt-2 pb-4">
        <Container>
          <PremiumCountdown target="2026-06-16T00:00:00-03:00" supportUrl="https://t.me/barbieshark" />
        </Container>
      </Section>

      {/* Stats strip */}
      <Section className="py-4">
        <Container>
          <div className="reveal glass-strong rounded-2xl px-5 md:px-7 py-5 md:py-6 grid grid-cols-2 md:grid-cols-4 gap-4">
            {stats.map((s, i) => (
              <div key={i} className={"text-center md:text-left " + (i > 0 ? 'md:border-l md:pl-5' : '')} style={{ borderColor: 'var(--border)' }}>
                <div className="font-display font-bold text-[28px] md:text-[36px] leading-none grad-text-amber">{s.v}</div>
                <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase mt-2" style={{ color: 'var(--text-dim)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Tier comparison */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="DOS NIVELES"
            title={<>Elegí tu <span className="grad-text-amber">acceso</span></>}
            subtitle="Premium para señales + comunidad. Premium Elite para CopyTrading automático y acompañamiento cercano."
          />

          <div className="mt-12 grid lg:grid-cols-2 gap-5 max-w-5xl mx-auto">
            {tiers.map((t, i) => (
              <div
                key={t.key}
                className="reveal relative rounded-2xl p-7 md:p-8 flex flex-col"
                style={{
                  '--delay': `${i * 140}ms`,
                  background: t.featured
                    ? 'linear-gradient(180deg, rgba(212,160,23,0.10), rgba(13,13,26,0.7))'
                    : 'linear-gradient(180deg, rgba(20,20,40,0.7), rgba(13,13,26,0.5))',
                  border: t.featured ? '1px solid rgba(212,160,23,0.5)' : '1px solid var(--border)',
                  backdropFilter: 'blur(20px)',
                  boxShadow: t.featured ? '0 30px 80px -20px rgba(212,160,23,0.35)' : 'none',
                }}
              >
                {t.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-md font-mono text-[10px] tracking-[0.2em] flex items-center gap-1.5" style={{
                    background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                    color: '#0a0a14',
                    boxShadow: '0 8px 24px -4px rgba(212,160,23,0.6)',
                  }}>
                    <Icon name="crown" size={11} /> NIVEL DEFINITIVO
                  </div>
                )}

                <div className="font-mono text-[11px] tracking-[0.2em] uppercase mb-1.5" style={{ color: t.accent }}>
                  NIVEL {t.name.toUpperCase()}
                </div>
                <div className="font-display font-bold text-[32px] md:text-[38px] leading-none">
                  {t.name === 'Premium Elite' ? <>Premium <span className="grad-text-amber">Elite</span></> : t.name}
                </div>
                <p className="text-[13.5px] mt-2.5" style={{ color: 'var(--text-dim)' }}>{t.tagline}</p>

                {/* Price */}
                <div className="mt-6 flex items-baseline gap-2">
                  <span className="font-display font-bold text-[64px] md:text-[72px] leading-none" style={{ color: t.accent }}>
                    ${t.price}
                  </span>
                  <span className="font-mono text-sm" style={{ color: 'var(--text-dim)' }}>/mes</span>
                </div>
                <div className="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-mono text-[11px] self-start" style={{
                  background: 'rgba(16,185,129,0.10)',
                  border: '1px solid rgba(16,185,129,0.3)',
                  color: '#34d399',
                }}>
                  <Icon name="tag" size={11} />
                  {t.renewLabel}: <span className="text-white font-bold">${t.renew}</span> · PROMO
                </div>

                <p className="mt-6 text-[14.5px] leading-relaxed" style={{ color: 'var(--text)' }}>
                  {t.headline}
                </p>

                {/* Features */}
                <div className="mt-7 pt-6 border-t" style={{ borderColor: 'var(--border)' }}>
                  <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase mb-4" style={{ color: 'var(--text-dim)' }}>
                    Incluye
                  </div>
                  <ul className="space-y-2.5">
                    {t.features.map((f, j) => {
                      const isEliteOnly = t.featured && j >= 6;
                      return (
                        <li key={j} className="flex items-start gap-2.5 text-[14px]">
                          <Icon name="check" size={16} style={{ color: isEliteOnly ? '#f0d68a' : t.accent, marginTop: 2 }} strokeWidth={2.5} />
                          <span style={{ color: isEliteOnly ? '#f0d68a' : 'var(--text)', fontWeight: isEliteOnly ? 500 : 400 }}>{f}</span>
                        </li>
                      );
                    })}
                  </ul>
                </div>

                {/* Excluded */}
                {t.excluded.length > 0 && (
                  <div className="mt-5 pt-5 border-t" style={{ borderColor: 'var(--border)' }}>
                    <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase mb-3" style={{ color: 'var(--text-mute)' }}>
                      No incluye
                    </div>
                    <ul className="space-y-2">
                      {t.excluded.map((f, j) => (
                        <li key={j} className="flex items-start gap-2.5 text-[13px]" style={{ color: 'var(--text-mute)' }}>
                          <Icon name="minus" size={14} style={{ marginTop: 3 }} strokeWidth={2} />
                          <span>{f}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* CTA */}
                <a
                  href={SUPPORT}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={"btn w-full justify-center text-base py-4 mt-7 " + (t.featured ? '' : 'btn-outline-cyan')}
                  style={t.featured ? {
                    background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                    color: '#0a0a14',
                    border: '1px solid rgba(247,213,107,0.6)',
                    boxShadow: '0 10px 30px -8px rgba(212,160,23,0.6), inset 0 1px 0 rgba(255,255,255,0.3)',
                    fontWeight: 700,
                  } : {}}
                >
                  Sumarme al {t.name} <Icon name="send" size={16} />
                </a>
                <div className="font-mono text-[10.5px] tracking-wider mt-2.5 text-center" style={{ color: 'var(--text-mute)' }}>
                  Activación por Telegram @barbieshark
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Inside the Premium */}
      <Section className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.15), transparent)' }}>
        <Container>
          <SectionHeader eyebrow="QUÉ VAS A ENCONTRAR" title={<>Dentro del <span className="grad-text-cyan">Premium</span></>} />
          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { icon: 'bell', t: 'Señales en vivo', d: 'Entradas con SL, TP y gestión. Para Boom, Crash, Volatility y los sintéticos de Bridge Markets.', accent: '#00d4ff' },
              { icon: 'message-square', t: 'Discord privado', d: 'Comunidad de traders, salas por nivel, alertas y discusión en tiempo real.', accent: '#7c5cff' },
              { icon: 'target', t: 'Estrategias documentadas', d: 'Setups, reglas y plantillas listas para implementar.', accent: '#10b981' },
              { icon: 'book-open', t: 'Plataforma educativa', d: 'Material complementario para que entiendas cada operación que copiás.', accent: '#0070ff' },
              { icon: 'line-chart', t: 'Análisis de mercado', d: 'Lectura diaria y panorámica semanal por instrumento.', accent: '#ef4444' },
              { icon: 'users-round', t: 'Comunidad privada', d: 'Acceso a la red de traders más enfocada en sintéticos del nicho hispano.', accent: '#f97316' },
            ].map((it, i) => (
              <div key={i} className="reveal glass rounded-2xl p-6" style={{ '--delay': `${i*80}ms` }}>
                <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{
                  background: `linear-gradient(135deg, ${it.accent}25, ${it.accent}08)`,
                  border: `1px solid ${it.accent}45`,
                  color: it.accent,
                }}>
                  <Icon name={it.icon} size={20} />
                </div>
                <div className="font-display font-bold text-[17px] mt-4">{it.t}</div>
                <div className="text-[13.5px] mt-2 leading-relaxed" style={{ color: 'var(--text-dim)' }}>{it.d}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Elite-only callout */}
      <Section className="py-14">
        <Container>
          <div className="reveal relative overflow-hidden rounded-2xl p-7 md:p-10" style={{
            background: 'linear-gradient(135deg, rgba(212,160,23,0.18), rgba(212,160,23,0.03))',
            border: '1px solid rgba(212,160,23,0.45)',
          }}>
            <div className="absolute inset-0 tech-grid-fine opacity-30 pointer-events-none"></div>
            <div className="relative grid md:grid-cols-[1fr_auto] gap-6 items-center">
              <div>
                <div className="font-mono text-[11px] tracking-[0.2em] uppercase mb-3" style={{ color: '#f0d68a' }}>
                  EXCLUSIVO ELITE
                </div>
                <div className="font-display font-bold text-[28px] md:text-[36px] leading-tight">
                  CopyTrading automático <span className="grad-text-amber">incluido</span>
                </div>
                <p className="mt-3 text-[15px] max-w-2xl leading-relaxed" style={{ color: '#e8d090' }}>
                  Los miembros Elite obtienen acceso al CopyTrading de Bridge Markets y Weltrade sin costo adicional. Tu capital opera mientras vos seguís aprendiendo.
                </p>
                <div className="mt-5 flex flex-wrap items-center gap-3">
                  <img src="img/bridgemarkets.svg" alt="Bridge Markets" className="logo-white" style={{ height: 24, opacity: 0.9 }} />
                  <span className="w-px h-5" style={{ background: 'rgba(212,160,23,0.4)' }}></span>
                  <img src="img/weltrade.svg" alt="Weltrade" className="logo-white" style={{ height: 22, opacity: 0.9 }} />
                </div>
              </div>
              <a href={SUPPORT} target="_blank" rel="noopener noreferrer" className="btn shrink-0" style={{
                background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                color: '#0a0a14',
                boxShadow: '0 10px 30px -8px rgba(212,160,23,0.6)',
                fontWeight: 700,
                padding: '14px 22px',
              }}>
                Quiero el Elite <Icon name="arrow-right" size={16} />
              </a>
            </div>
          </div>
        </Container>
      </Section>

      {/* Final CTA */}
      <Section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0" style={{
          background: 'radial-gradient(ellipse 900px 500px at 50% 100%, rgba(212,160,23,0.4), transparent 60%)'
        }}></div>
        <Container className="relative text-center">
          <h2 className="reveal font-display font-bold text-[36px] md:text-[56px] leading-[1.02] tracking-tight max-w-3xl mx-auto">
            Listo para entrar al<br /><span className="grad-text-amber">Premium</span>
          </h2>
          <p className="reveal mt-5 max-w-xl mx-auto text-[16px]" style={{ color: 'var(--text-dim)' }}>
            Activación inmediata por Telegram. Te asignamos canal Discord y empezás hoy.
          </p>
          <div className="reveal mt-8">
            <a href={SUPPORT} target="_blank" rel="noopener noreferrer" className="btn text-base px-7 py-4" style={{
              background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
              color: '#0a0a14',
              boxShadow: '0 14px 40px -8px rgba(212,160,23,0.7)',
              fontWeight: 700,
            }}>
              <Icon name="send" size={17} /> Activar por Telegram
            </a>
          </div>
          <div className="reveal mt-4 font-mono text-[11.5px]" style={{ color: 'var(--text-mute)' }}>
            @barbieshark · Soporte directo
          </div>
        </Container>
      </Section>
    </div>
  );
}
// ============================================================
// ANÁLISIS (TradingView) — iframes deriv + weltrade
// ============================================================
function PageTradingView({ go }) {
  const [activeBroker, setActiveBroker] = React.useState('deriv');
  const brokers = {
    deriv: {
      label: 'Deriv',
      url: 'https://charts.deriv.com/',
      logo: 'img/deriv.svg',
      pairs: ['Boom 1000', 'Crash 1000', 'V75', 'V100', 'V25', 'Step', 'Jump 25'],
    },
    weltrade: {
      label: 'Weltrade',
      url: 'https://weltradecharts.com/chart/',
      logo: 'img/weltrade.svg',
      pairs: ['GainX 1000', 'PainX 1000', 'BullX 1000', 'BearX 1000', 'Volatility', 'Range Break'],
    },
  };
  const cur = brokers[activeBroker];

  return (
    <div>
      <PageHero
        badge="ANÁLISIS TÉCNICO"
        title="Análisis"
        accent="Profesional"
        subtitle="Lectura de mercado diaria, zonas clave y setups operables. Gráficos en vivo de Deriv y Weltrade directamente embebidos."
        accentColor="#7c5cff"
      />

      {/* Broker switcher + iframe */}
      <Section className="py-8 md:py-12">
        <Container>
          <div className="reveal flex flex-wrap items-center justify-between gap-4 mb-5">
            <div className="flex items-center gap-2 p-1 rounded-xl" style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid var(--border)' }}>
              {Object.entries(brokers).map(([key, b]) => (
                <button
                  key={key}
                  onClick={() => setActiveBroker(key)}
                  className="px-4 py-2.5 rounded-lg font-display text-[13.5px] font-semibold transition-all flex items-center gap-2.5"
                  style={{
                    background: activeBroker === key ? 'rgba(124,92,255,0.18)' : 'transparent',
                    color: activeBroker === key ? '#fff' : 'var(--text-dim)',
                    border: '1px solid ' + (activeBroker === key ? 'rgba(124,92,255,0.45)' : 'transparent'),
                  }}
                >
                  <img src={b.logo} alt={b.label} className="logo-white" style={{ height: 16, opacity: activeBroker === key ? 1 : 0.55 }} />
                  <span>Gráficos {b.label}</span>
                </button>
              ))}
            </div>
            <a href={cur.url} target="_blank" rel="noopener noreferrer" className="btn btn-outline-cyan text-[12.5px] py-2 px-3.5">
              Abrir en pestaña <Icon name="external-link" size={14} />
            </a>
          </div>

          {/* iframe container */}
          <div className="reveal rounded-2xl overflow-hidden relative" style={{
            background: 'rgba(6,6,14,0.6)',
            border: '1px solid var(--border)',
            boxShadow: '0 30px 80px -20px rgba(124,92,255,0.25)',
          }}>
            {/* Chrome */}
            <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: 'var(--border)', background: 'rgba(13,13,26,0.7)' }}>
              <div className="flex items-center gap-2.5">
                <div className="flex gap-1.5">
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#ef4444' }}></span>
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#f0c040' }}></span>
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#10b981' }}></span>
                </div>
                <span className="font-mono text-[11px] tracking-wider truncate max-w-[260px] sm:max-w-none" style={{ color: 'var(--text-dim)' }}>
                  {cur.url}
                </span>
              </div>
              <div className="hidden md:flex items-center gap-2 font-mono text-[10.5px]" style={{ color: '#10b981' }}>
                <span className="w-1.5 h-1.5 rounded-full" style={{ background: '#10b981', boxShadow: '0 0 8px #10b981' }}></span>
                MARKET LIVE
              </div>
            </div>

            {/* The iframe */}
            <div className="relative" style={{ height: '70vh', minHeight: 520 }}>
              <iframe
                src={cur.url}
                title={cur.label + ' charts'}
                className="absolute inset-0 w-full h-full"
                style={{ border: 'none', background: '#0d0d1a' }}
                allow="fullscreen"
                loading="lazy"
              ></iframe>
              {/* Note overlay for artifact-only fallback */}
              <div className="absolute inset-0 flex items-end pointer-events-none" style={{
                background: 'linear-gradient(180deg, transparent 75%, rgba(6,6,14,0.85))',
              }}>
                <div className="w-full p-4 pointer-events-auto">
                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-mono text-[10.5px]" style={{
                    background: 'rgba(13,13,26,0.85)',
                    border: '1px solid var(--border)',
                    color: 'var(--text-dim)',
                    backdropFilter: 'blur(8px)',
                  }}>
                    <Icon name="info" size={11} />
                    Si el gráfico no carga: el broker bloquea iframes externos en algunos entornos. En el sitio en producción funciona perfecto.
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Pairs available */}
          <div className="reveal mt-5 flex flex-wrap items-center gap-2">
            <span className="font-mono text-[10.5px] tracking-[0.18em] uppercase mr-2" style={{ color: 'var(--text-dim)' }}>
              {cur.label} · pares
            </span>
            {cur.pairs.map((p, i) => (
              <span key={i} className="font-mono text-[11.5px] px-2.5 py-1 rounded-md" style={{
                background: 'rgba(124,92,255,0.10)',
                border: '1px solid rgba(124,92,255,0.3)',
                color: '#c5b6ff',
              }}>{p}</span>
            ))}
          </div>
        </Container>
      </Section>

      {/* What's included */}
      <Section className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.12), transparent)' }}>
        <Container>
          <SectionHeader eyebrow="QUÉ INCLUYE" title={<>El paquete de <span className="grad-text-cyan">análisis</span></>} />
          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { icon: 'sun', t: 'Análisis Diario', d: 'Reporte de apertura y cierre con bias del día.' },
              { icon: 'crosshair', t: 'Zonas Clave', d: 'Soportes, resistencias y niveles institucionales.' },
              { icon: 'trending-up', t: 'Tendencia Macro', d: 'Lectura multi-timeframe del mercado actual.' },
              { icon: 'lightbulb', t: 'Ideas de Trading', d: 'Setups concretos con entrada, SL y TP.' },
            ].map((it, i) => (
              <div key={i} className="reveal glass rounded-2xl p-6" style={{ '--delay': `${i*90}ms` }}>
                <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: 'rgba(124,92,255,0.15)', border: '1px solid rgba(124,92,255,0.4)', color: '#a692ff' }}>
                  <Icon name={it.icon} size={20} />
                </div>
                <div className="font-display font-bold text-[17px] mt-4">{it.t}</div>
                <div className="text-[13px] mt-2" style={{ color: 'var(--text-dim)' }}>{it.d}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <InternalCTA title="Acceder al Análisis" subtitle="Sumate al canal de análisis técnico diario por Telegram." cta="Telegram soporte" icon="send" accent="#7c5cff" href="https://t.me/barbieshark" />
    </div>
  );
}
// ============================================================
// CUENTAS DE FONDEO — Bridge Markets storytelling
// ============================================================
const BRIDGE_REGISTER = 'https://prop.bridgemarkets.global/registro.php?ref=2057K4215';
const TG_SUPPORT = 'https://t.me/barbieshark';
const TG_FONDEO = 'https://chat.whatsapp.com/B8MjHQVaxN4IaFkDT6HMvc';

function PageFondeadas({ go }) {
  // Storytelling progress (driven by scroll position over the article)
  const articleRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      const el = articleRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const start = window.innerHeight * 0.6;
      const end = -rect.height + window.innerHeight * 0.4;
      const total = start - end;
      const p = Math.max(0, Math.min(1, (start - rect.top) / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Plans data lifted from Bridge Markets material
  const planos = [
    { key: 'elite', mkt: 'Sintéticos', name: 'Elite', phase: '1 fase', payout: 10, split: 80,
      params: 'Pérdida diaria 5% · Drawdown 5% estático · Pérdida máxima 10%',
      rows: [
        { acc: '$5K',   price: 90,  disc: 76.50,  obj: '12%' },
        { acc: '$10K',  price: 160, disc: 136,    obj: '12%' },
        { acc: '$25K',  price: 325, disc: 276.25, obj: '8%' },
        { acc: '$50K',  price: 510, disc: 433.50, obj: '8%' },
        { acc: '$100K', price: 810, disc: 688.50, obj: '8%' },
      ] },
    { key: 'ultra', mkt: 'Sintéticos', name: 'Ultra', phase: '2 fases', payout: 14, split: 70,
      params: 'Pérdida diaria 5% · Drawdown 5% estático · Pérdida máxima 10%',
      rows: [
        { acc: '$5K',   price: 75,  disc: 63.75,  obj: '5% / 10%' },
        { acc: '$10K',  price: 120, disc: 102,    obj: '5% / 10%' },
        { acc: '$25K',  price: 230, disc: 195.50, obj: '4% / 8%' },
        { acc: '$50K',  price: 330, disc: 280.50, obj: '4% / 8%' },
        { acc: '$100K', price: 670, disc: 569.50, obj: '4% / 8%' },
      ] },
    { key: 'obsidian', mkt: 'Forex', name: 'Obsidian', phase: '1 fase', payout: 10, split: 90,
      params: 'Pérdida diaria 5% · Drawdown 5% estático · Pérdida máxima 10% · ⚠️ Noticias de Forex aplican',
      rows: [
        { acc: '$5K',   price: 70,  disc: 59.50,  obj: '10%' },
        { acc: '$10K',  price: 105, disc: 89.25,  obj: '8%' },
        { acc: '$25K',  price: 200, disc: 170,    obj: '8%' },
        { acc: '$50K',  price: 320, disc: 272,    obj: '8%' },
        { acc: '$100K', price: 510, disc: 433.50, obj: '8%' },
      ] },
    { key: 'basalt', mkt: 'Forex', name: 'Basalt', phase: '2 fases', payout: 14, split: 80, splitTopTier: 90, featured: true,
      params: 'Pérdida diaria 4% · Drawdown 4% estático · Pérdida máxima 8% · ⚠️ Noticias de Forex aplican',
      rows: [
        { acc: '$5K',   price: 59,  disc: 50.15,  obj: '8% / 4%', split: 80 },
        { acc: '$10K',  price: 99,  disc: 84.15,  obj: '8% / 4%', split: 80 },
        { acc: '$25K',  price: 189, disc: 160.65, obj: '8% / 4%', split: 90 },
        { acc: '$50K',  price: 289, disc: 245.65, obj: '8% / 4%', split: 90 },
        { acc: '$100K', price: 479, disc: 407.15, obj: '8% / 4%', split: 90 },
      ] },
  ];

  // Earnings calculator
  const [calc, setCalc] = React.useState({ size: 100000, splitPct: 80 });
  const retirable = calc.size * 0.10;
  const neto = retirable * calc.splitPct / 100;

  // Steps in storytelling
  const steps = [
    { n: '01', title: 'Registrate con nuestro link', d: 'Único modo de quedar vinculado a DAMCOVISION para sorteos, torneos y el cupón.', accent: '#00d4ff', cta: { href: BRIDGE_REGISTER, label: 'Registrarme en Bridge Markets' } },
    { n: '02', title: 'Comprá tu challenge', d: 'Elegí mercado (sintéticos o forex), fases (1 o 2) y tamaño de cuenta. Aplicá DamcoFondea al pagar.', accent: '#d4a017' },
    { n: '03', title: 'Pasá la evaluación', d: 'Solo 4 reglas durante el challenge: objetivo, pérdida diaria, drawdown y pérdida total.', accent: '#10b981' },
    { n: '04', title: 'Operás capital real', d: 'Cuenta fondeada de hasta $100K. Las 7 reglas extra aplican desde acá. Podés ver penalizaciones desde el dashboard.', accent: '#7c5cff' },
    { n: '05', title: 'Retirás cada 10 o 14 días', d: 'Hasta el 10% retirable por ciclo, según tu plan. Profit split del 70 al 90%.', accent: '#f97316' },
  ];

  // 7 rules in funded
  const rules = [
    { n: 1, t: 'Stop Loss en 2 minutos', d: 'Toda operación debe tener SL dentro de los 2 minutos posteriores a la apertura.', key: 'Si no, lo coloca el sistema' },
    { n: 2, t: 'Duración mínima 2 min', d: 'Cada operación debe permanecer abierta al menos 2 minutos para ser válida.', key: 'Sin scalping ultrarrápido' },
    { n: 3, t: 'Riesgo 2% por idea', d: 'No podés arriesgar más del 2% por idea de trading (mismo activo, misma dirección, dentro de 30 min). Si se activa, debés esperar 30 minutos en ese símbolo. Aplica el sistema de ciclos.', key: 'Riesgo acumulado por idea' },
    { n: 4, t: 'Consistencia por lotaje', d: 'Desde la 5ta operación en un símbolo, tu lote debe estar entre 0.5x y 2x del promedio habitual de ese símbolo. Cada símbolo tiene su propio promedio.', key: 'Rango: 0.5x a 2x' },
    { n: 5, t: 'Consistencia de profit', d: 'Ningún día puede representar más del 30% del beneficio total acumulado para poder retirar.', key: 'Regla del 30%' },
    { n: 6, t: 'Inactividad máxima', d: 'Si pasan 30 días sin operar, la cuenta puede ser suspendida o cerrada.', key: 'Mantené actividad mínima' },
    { n: 7, t: 'Noticias Forex', d: 'Solo para cuentas Forex (Obsidian y Basalt): no abrir operaciones 10 minutos antes ni 10 minutos después de una noticia de alto impacto (forexfactory.com).', key: 'Solo aplica a Forex' },
  ];

  // Cycles
  const cycles = [
    { n: 1, t: 'Primer aviso', time: '5 min', d: 'Se cierran todas las posiciones abiertas. Si la operación infractora tenía PnL positivo, se ajusta el balance. Cuenta suspendida 5 minutos.', col: '#f0a020' },
    { n: 2, t: 'Último aviso', time: '5 min', d: 'Mismo proceso: cierre total + ajuste si hay PnL positivo. Suspensión 5 minutos. La próxima infracción cancela la cuenta.', col: '#f97316' },
    { n: 3, t: 'Cancelada', time: '∞', d: 'Cuenta reprobada definitivamente. No hay reactivación automática. Los ciclos se reinician solo al obtener una nueva cuenta fondeada.', col: '#ef4444' },
  ];

  return (
    <div>
      {/* HERO with Bridge Markets logo */}
      <div className="relative overflow-hidden" style={{ paddingTop: 120, paddingBottom: 64 }}>
        <div className="absolute inset-0 tech-grid opacity-40 pointer-events-none"></div>
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 900px 500px at 50% 0%, rgba(212,160,23,0.35), transparent 60%), radial-gradient(ellipse 800px 400px at 80% 80%, rgba(0,112,255,0.20), transparent 60%)'
        }}></div>
        <Container className="relative">
          <div className="grid lg:grid-cols-[1.2fr_0.8fr] gap-10 items-center">
            <div>
              <div className="reveal flex flex-wrap items-center gap-3 mb-6">
                <div className="inline-flex items-center gap-2.5 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase" style={{ background: 'rgba(212,160,23,0.12)', border: '1px solid rgba(212,160,23,0.4)', color: '#f0d68a' }}>
                  <Icon name="trophy" size={12} />
                  PARTNER OFICIAL
                </div>
                <img src="img/bridgemarkets.svg" alt="Bridge Markets" className="logo-white" style={{ height: 26, opacity: 0.95 }} />
              </div>
              <h1 className="reveal font-display font-bold tracking-tight text-[44px] sm:text-[58px] md:text-[72px] leading-[0.98]" style={{ '--delay': '80ms' }}>
                Cuentas de<br /><span className="grad-text-amber">Fondeo</span>
              </h1>
              <p className="reveal mt-6 max-w-xl text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)', '--delay': '180ms' }}>
                Operá con capital real de hasta <span className="text-white font-mono">$100K</span> sin arriesgar el tuyo. Te mostramos cómo funciona paso a paso, con números reales de cada plan.
              </p>
              <div className="reveal mt-8 flex flex-wrap gap-3" style={{ '--delay': '260ms' }}>
                <a href={BRIDGE_REGISTER} target="_blank" rel="noopener noreferrer" className="btn text-base px-6 py-3.5" style={{
                  background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                  color: '#0a0a14',
                  boxShadow: '0 14px 40px -8px rgba(212,160,23,0.7)',
                  fontWeight: 700,
                }}>
                  Registrarme con DAMCOVISION <Icon name="arrow-right" size={16} />
                </a>
                <a href={TG_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn btn-outline-cyan text-base px-6 py-3.5">
                  <Icon name="send" size={16} /> Hablar con soporte
                </a>
              </div>
              <div className="reveal mt-6 grid grid-cols-3 gap-3 max-w-md" style={{ '--delay': '320ms' }}>
                {[
                  { v: 'Hasta 90%', l: 'Profit split' },
                  { v: '10%', l: 'Retirable / ciclo' },
                  { v: '10—14 d', l: 'Frecuencia' },
                ].map((s, i) => (
                  <div key={i} className="rounded-xl px-3 py-3" style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid var(--border)' }}>
                    <div className="font-display font-bold text-[18px] grad-text-amber leading-tight">{s.v}</div>
                    <div className="font-mono text-[9.5px] tracking-[0.18em] uppercase mt-1" style={{ color: 'var(--text-dim)' }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Hero side — coupon ticket */}
            <div className="reveal" style={{ '--delay': '300ms' }}>
              <div className="relative">
                <div className="ticket rounded-2xl p-5 sm:p-6 anim-pulse-amber max-w-full overflow-hidden">
                  <div className="font-mono text-[10.5px] tracking-[0.22em] mb-2" style={{ color: '#f0d68a' }}>CUPÓN EXCLUSIVO</div>
                  <div className="font-display font-bold text-[26px] sm:text-[34px] md:text-[44px] grad-text-amber leading-none break-words" style={{ fontVariationSettings: '"wdth" 100, "wght" 800' }}>DamcoFondea</div>
                  <div className="font-mono text-[11px] sm:text-[12px] mt-2" style={{ color: '#f0d68a' }}>Aplicable a todos los programas y tiers</div>
                  <div className="mt-5 flex items-baseline gap-2">
                    <span className="font-display font-bold text-[44px] sm:text-[54px] md:text-[60px] leading-none" style={{ color: '#f7d56b' }}>15%</span>
                    <span className="font-mono text-[12px] tracking-[0.2em]" style={{ color: '#f0d68a' }}>OFF</span>
                  </div>
                  <div className="mt-5 pt-5 border-t border-dashed text-[12.5px] flex items-start gap-2" style={{ borderColor: 'rgba(212,160,23,0.35)', color: '#e8d090' }}>
                    <Icon name="info" size={13} style={{ marginTop: 2, color: '#f0d68a', flexShrink: 0 }} />
                    <span>El cupón se activa al registrarte con nuestro link de afiliado. Te da acceso a sorteos, torneos y ofertas exclusivas.</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </div>

      {/* FREE SIGNALS PERK ============================== */}
      <Section className="py-8 md:py-10">
        <Container>
          <div className="reveal max-w-4xl mx-auto rounded-2xl p-6 md:p-7 relative overflow-hidden" style={{
            background: 'linear-gradient(135deg, rgba(16,185,129,0.12), rgba(0,212,255,0.06))',
            border: '1px solid rgba(16,185,129,0.35)',
          }}>
            <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full blur-3xl opacity-30 pointer-events-none" style={{ background: '#10b981' }}></div>
            <div className="relative flex flex-col md:flex-row md:items-center gap-4 md:gap-5">
              <div className="w-14 h-14 rounded-2xl flex items-center justify-center shrink-0" style={{
                background: 'rgba(16,185,129,0.15)',
                border: '1px solid rgba(16,185,129,0.4)',
                color: '#10b981',
                boxShadow: '0 10px 30px -10px rgba(16,185,129,0.5)',
              }}>
                <Icon name="gift" size={24} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1.5 flex-wrap">
                  <span className="font-mono text-[10px] tracking-[0.2em] uppercase px-2 py-0.5 rounded" style={{ background: 'rgba(16,185,129,0.15)', color: '#34d399', border: '1px solid rgba(16,185,129,0.4)' }}>
                    BONUS GRATIS
                  </span>
                  <span className="font-mono text-[10.5px] tracking-wider" style={{ color: 'var(--text-mute)' }}>
                    Solo con compra vía link DAMCOVISION
                  </span>
                </div>
                <div className="font-display font-bold text-[20px] md:text-[24px] leading-tight">
                  Acceso a nuestro grupo de <span style={{ color: '#34d399' }}>señales gratuitas</span>
                </div>
                <p className="mt-2 text-[14px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                  Si comprás tu challenge con nuestro link de afiliado, sumás acceso al canal privado de señales gratis exclusivo para fondeados DAMCOVISION. Sin costo adicional, mientras tengas tu cuenta activa.
                </p>
              </div>
              <a href={TG_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn text-[13px] py-2.5 px-4 w-full md:w-auto justify-center md:shrink-0" style={{
                border: '1px solid rgba(16,185,129,0.5)',
                color: '#34d399',
                background: 'rgba(16,185,129,0.08)',
              }}>
                <Icon name="send" size={14} /> Reclamar acceso
              </a>
            </div>
          </div>
        </Container>
      </Section>

      {/* PROGRESS RAIL + STORYTELLING ============================== */}
      <Section className="py-12 md:py-20 relative">
        <Container>
          <div className="reveal text-center max-w-3xl mx-auto mb-12">
            <div className="font-mono text-[11px] tracking-[0.2em] uppercase mb-3" style={{ color: '#7fe5ff' }}>EL CAMINO</div>
            <h2 className="font-display font-bold text-[36px] md:text-[52px] leading-tight tracking-tight">
              De cero al payout, <span className="grad-text-amber">en 5 pasos</span>
            </h2>
          </div>

          <div ref={articleRef} className="relative grid lg:grid-cols-[60px_1fr] gap-6 lg:gap-10">
            {/* Vertical rail */}
            <div className="hidden lg:block sticky top-24 self-start">
              <div className="relative w-full h-[420px]">
                <div className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-px" style={{ background: 'rgba(255,255,255,0.06)' }}></div>
                <div
                  className="absolute top-0 left-1/2 -translate-x-1/2 w-px transition-all duration-200"
                  style={{
                    height: `${progress * 100}%`,
                    background: 'linear-gradient(180deg, #00d4ff, #d4a017, #f97316)',
                    boxShadow: '0 0 12px rgba(0,212,255,0.5)',
                  }}
                ></div>
                {steps.map((s, i) => {
                  const pos = (i + 0.5) / steps.length;
                  const active = progress >= pos - 0.08;
                  return (
                    <div key={i} className="absolute left-1/2 -translate-x-1/2 flex items-center" style={{ top: `${pos * 100}%`, transform: 'translate(-50%, -50%)' }}>
                      <div className="w-3 h-3 rounded-full transition-all duration-300" style={{
                        background: active ? s.accent : '#1a1a2e',
                        boxShadow: active ? `0 0 0 4px var(--bg-0), 0 0 12px ${s.accent}` : '0 0 0 4px var(--bg-0)',
                        border: active ? 'none' : '1px solid var(--border-soft)',
                      }}></div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Steps content */}
            <div className="space-y-6">
              {steps.map((s, i) => (
                <div key={i} className="reveal glass-strong rounded-2xl p-6 md:p-7 relative" style={{ '--delay': `${i * 60}ms` }}>
                  <div className="flex items-start gap-5">
                    <div className="font-display font-bold text-[44px] md:text-[56px] leading-none shrink-0" style={{ color: s.accent, opacity: 0.95 }}>{s.n}</div>
                    <div className="flex-1">
                      <div className="font-display font-bold text-[22px] md:text-[26px] leading-tight">{s.title}</div>
                      <p className="mt-2.5 text-[14.5px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>{s.d}</p>
                      {s.cta && (
                        <a href={s.cta.href} target="_blank" rel="noopener noreferrer" className="btn mt-4 text-[13.5px] py-2.5 px-4" style={{
                          background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                          color: '#0a0a14',
                          fontWeight: 700,
                          boxShadow: '0 10px 30px -8px rgba(212,160,23,0.6)',
                        }}>
                          {s.cta.label} <Icon name="external-link" size={14} />
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      {/* EARNINGS CALCULATOR ============================== */}
      <Section className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(212,160,23,0.06), transparent)' }}>
        <Container>
          <div className="reveal text-center max-w-3xl mx-auto mb-10">
            <div className="font-mono text-[11px] tracking-[0.2em] uppercase mb-3" style={{ color: '#f0d68a' }}>CALCULADORA</div>
            <h2 className="font-display font-bold text-[36px] md:text-[52px] leading-tight tracking-tight">
              ¿Cuánto podés <span className="grad-text-amber">ganar</span>?
            </h2>
            <p className="mt-4 text-[15px]" style={{ color: 'var(--text-dim)' }}>
              Tu ganancia neta = 10% del tamaño de cuenta × tu profit split. Movilo y vélo en vivo.
            </p>
          </div>

          <div className="reveal max-w-4xl mx-auto glass-strong rounded-2xl p-6 md:p-8" style={{ borderColor: 'rgba(212,160,23,0.3)' }}>
            <div className="grid md:grid-cols-2 gap-6 mb-6">
              {/* Account size */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="font-mono text-[10.5px] tracking-[0.18em] uppercase" style={{ color: 'var(--text-dim)' }}>Tamaño de cuenta</span>
                  <span className="font-display font-bold text-xl text-white">${calc.size.toLocaleString('en-US')}</span>
                </div>
                <div className="grid grid-cols-5 gap-1.5">
                  {[5000, 10000, 25000, 50000, 100000].map(sz => {
                    const active = calc.size === sz;
                    return (
                      <button key={sz} onClick={() => setCalc(c => ({ ...c, size: sz }))} className="rounded-lg py-2.5 font-mono text-[12px] transition-all" style={{
                        background: active ? 'rgba(212,160,23,0.18)' : 'rgba(255,255,255,0.025)',
                        border: '1px solid ' + (active ? 'rgba(212,160,23,0.5)' : 'var(--border)'),
                        color: active ? '#f7d56b' : 'var(--text-dim)',
                      }}>
                        ${sz >= 100000 ? '100K' : sz >= 25000 ? sz/1000 + 'K' : sz/1000 + 'K'}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Profit split */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="font-mono text-[10.5px] tracking-[0.18em] uppercase" style={{ color: 'var(--text-dim)' }}>Profit split</span>
                  <span className="font-display font-bold text-xl text-white">{calc.splitPct}%</span>
                </div>
                <div className="grid grid-cols-3 gap-1.5">
                  {[70, 80, 90].map(sp => {
                    const active = calc.splitPct === sp;
                    return (
                      <button key={sp} onClick={() => setCalc(c => ({ ...c, splitPct: sp }))} className="rounded-lg py-2.5 font-mono text-[12px] transition-all" style={{
                        background: active ? 'rgba(212,160,23,0.18)' : 'rgba(255,255,255,0.025)',
                        border: '1px solid ' + (active ? 'rgba(212,160,23,0.5)' : 'var(--border)'),
                        color: active ? '#f7d56b' : 'var(--text-dim)',
                      }}>{sp}%</button>
                    );
                  })}
                </div>
                <div className="font-mono text-[10.5px] mt-2" style={{ color: 'var(--text-mute)' }}>
                  Ultra: 70% · Elite/Basalt: 80% · Obsidian: 90% · Basalt $25K+: 90%
                </div>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-3 pt-6 border-t" style={{ borderColor: 'var(--border)' }}>
              <div>
                <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase" style={{ color: 'var(--text-dim)' }}>10% retirable</div>
                <div className="font-display font-bold text-[28px] md:text-[34px] leading-tight mt-1">
                  ${retirable.toLocaleString('en-US')}
                </div>
                <div className="font-mono text-[10.5px]" style={{ color: 'var(--text-mute)' }}>de la cuenta</div>
              </div>
              <div className="text-center self-center">
                <Icon name="arrow-right" size={28} style={{ color: '#f0d68a', opacity: 0.6 }} />
              </div>
              <div className="text-right">
                <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase" style={{ color: '#f0d68a' }}>Tu ganancia neta</div>
                <div className="font-display font-bold text-[34px] md:text-[44px] leading-tight mt-1 grad-text-amber" style={{ textShadow: '0 0 20px rgba(212,160,23,0.3)' }}>
                  ${neto.toLocaleString('en-US')}
                </div>
                <div className="font-mono text-[10.5px]" style={{ color: '#f0d68a' }}>por retiro</div>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* PLANS ============================== */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="LOS PROGRAMAS"
            title={<>4 planes · 2 mercados · <span className="grad-text-cyan">tu elección</span></>}
            subtitle="Precios listados con el 15% OFF del cupón DamcoFondea ya aplicado."
          />

          <div className="mt-12 grid md:grid-cols-2 gap-5">
            {planos.map((p, i) => (
              <div key={p.key} className="reveal glass-strong rounded-2xl overflow-hidden" style={{
                '--delay': `${i * 100}ms`,
                borderColor: p.featured ? 'rgba(212,160,23,0.5)' : undefined,
                boxShadow: p.featured ? '0 20px 60px -20px rgba(212,160,23,0.35)' : undefined,
              }}>
                <div className="p-5 md:p-6 border-b flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
                  <div>
                    <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase" style={{ color: p.featured ? '#f0d68a' : '#7fe5ff' }}>
                      {p.mkt} {p.featured && '· RECOMENDADO'}
                    </div>
                    <div className="font-display font-bold text-[26px] mt-1">{p.name}</div>
                  </div>
                  <div className="text-right">
                    <span className="inline-flex items-center px-2.5 py-1 rounded-md font-mono text-[10.5px] tracking-[0.16em] uppercase" style={{
                      background: p.featured ? 'rgba(212,160,23,0.15)' : 'rgba(124,92,255,0.12)',
                      border: '1px solid ' + (p.featured ? 'rgba(212,160,23,0.4)' : 'rgba(124,92,255,0.3)'),
                      color: p.featured ? '#f0d68a' : '#c5b6ff',
                    }}>{p.phase}</span>
                    <div className="font-mono text-[10.5px] mt-1.5" style={{ color: 'var(--text-dim)' }}>Retiro c/ {p.payout} días</div>
                  </div>
                </div>

                {/* Pill row */}
                <div className="mx-5 my-4 px-4 py-3 rounded-xl flex items-center justify-between" style={{
                  background: 'linear-gradient(135deg, #f7d56b, #d4a017)',
                  color: '#0a0a14',
                }}>
                  <div>
                    <span className="font-display font-bold text-xl">10%</span>
                    <span className="font-mono text-[10.5px] tracking-[0.15em] ml-1.5 uppercase">retirable</span>
                  </div>
                  <span className="font-mono text-[10.5px] tracking-[0.15em] uppercase px-2 py-1 rounded" style={{ background: 'rgba(10,10,20,0.15)' }}>
                    cada {p.payout} días
                  </span>
                </div>

                {/* Table */}
                <table className="w-full text-[12.5px]">
                  <thead>
                    <tr style={{ background: 'rgba(255,255,255,0.02)' }}>
                      {['Cuenta', 'Precio', 'Objetivo', 'Split'].map((h, j) => (
                        <th key={j} className="font-mono text-[9.5px] tracking-[0.16em] uppercase font-semibold px-4 py-2.5 text-left" style={{ color: 'var(--text-dim)' }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {p.rows.map((r, j) => (
                      <tr key={j} className="border-t" style={{ borderColor: 'var(--border)' }}>
                        <td className="px-4 py-3">
                          <span className="inline-block px-2 py-0.5 rounded-md font-mono text-[11.5px] font-bold" style={{ background: 'rgba(124,92,255,0.10)', color: '#c5b6ff' }}>{r.acc}</span>
                        </td>
                        <td className="px-4 py-3">
                          <div className="font-mono text-[10.5px] line-through" style={{ color: 'var(--text-mute)' }}>${r.price}</div>
                          <div className="font-mono text-[13.5px] font-bold" style={{ color: '#f7d56b' }}>${r.disc.toFixed(2)}</div>
                        </td>
                        <td className="px-4 py-3 font-mono text-[12px]" style={{ color: '#10b981' }}>{r.obj}</td>
                        <td className="px-4 py-3 font-mono text-[12.5px]" style={{ color: r.split === 90 ? '#f7d56b' : 'var(--text)' }}>
                          {r.split || p.split}%
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                {p.params && (
                  <div className="px-5 pb-4 pt-2">
                    <div className="rounded-lg px-3 py-2.5 font-mono text-[10.5px] leading-relaxed" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border)', color: 'var(--text-dim)' }}>
                      {p.params}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Frequency dual */}
          <div className="reveal mt-10 grid md:grid-cols-2 gap-4">
            {[
              { tag: 'Planes 1 fase', num: '10', label: 'días entre retiros', sub: 'Elite Sintético · Obsidian Forex' },
              { tag: 'Planes 2 fases', num: '14', label: 'días entre retiros', sub: 'Ultra Sintético · Basalt Forex' },
            ].map((f, i) => (
              <div key={i} className="glass rounded-2xl p-6 text-center" style={{ borderColor: 'rgba(212,160,23,0.25)' }}>
                <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase" style={{ color: '#f0d68a' }}>{f.tag}</div>
                <div className="font-display font-bold text-[64px] md:text-[88px] leading-none grad-text-amber mt-3">{f.num}</div>
                <div className="font-mono text-[12px] mt-1" style={{ color: 'var(--text-dim)' }}>{f.label}</div>
                <div className="text-[13px] mt-3" style={{ color: 'var(--text)' }}>{f.sub}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* CHALLENGE vs FUNDED ============================== */}
      <Section className="py-14 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.10), transparent)' }}>
        <Container>
          <SectionHeader
            eyebrow="DIFERENCIA CLAVE"
            title={<>Challenge <span style={{ color: '#10b981' }}>vs</span> cuenta fondeada</>}
            subtitle="Durante la evaluación las reglas son mínimas. Una vez fondeado, aplican 7 reglas extra de gestión."
          />
          <div className="mt-12 grid md:grid-cols-2 gap-5 max-w-5xl mx-auto">
            <div className="reveal rounded-2xl p-7" style={{
              background: 'linear-gradient(180deg, rgba(16,185,129,0.10), rgba(13,13,26,0.6))',
              border: '1px solid rgba(16,185,129,0.35)',
            }}>
              <div className="font-mono text-[11px] tracking-[0.2em] uppercase" style={{ color: '#34d399' }}>DURANTE EL CHALLENGE</div>
              <div className="font-display font-bold text-[26px] mt-1">Solo 4 cosas</div>
              <ul className="mt-5 space-y-2.5">
                {[
                  'Llegar al objetivo de ganancia',
                  'No superar la pérdida diaria',
                  'No superar el drawdown',
                  'No superar la pérdida máxima total',
                ].map((r, i) => (
                  <li key={i} className="flex items-start gap-2.5 text-[14px]">
                    <span className="w-1.5 h-1.5 rounded-full mt-2" style={{ background: '#10b981', boxShadow: '0 0 6px #10b981' }}></span>
                    <span>{r}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="reveal rounded-2xl p-7" style={{
              '--delay': '120ms',
              background: 'linear-gradient(180deg, rgba(239,68,68,0.08), rgba(13,13,26,0.6))',
              border: '1px solid rgba(239,68,68,0.35)',
            }}>
              <div className="font-mono text-[11px] tracking-[0.2em] uppercase" style={{ color: '#f87171' }}>EN CUENTA FONDEADA</div>
              <div className="font-display font-bold text-[26px] mt-1">+ 7 reglas extra</div>
              <ul className="mt-5 space-y-2.5">
                {rules.map((r, i) => (
                  <li key={i} className="flex items-start gap-2.5 text-[14px]">
                    <span className="w-1.5 h-1.5 rounded-full mt-2" style={{ background: '#ef4444', boxShadow: '0 0 6px #ef4444' }}></span>
                    <span>{r.t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Container>
      </Section>

      {/* THE 6 RULES IN DETAIL ============================== */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="REGLAS EN DETALLE"
            title="Las 7 reglas de la cuenta fondeada"
            subtitle="Aplican solo después de pasar el challenge. Las conocés todas antes de pagar. Tu dashboard te notifica si incumplís alguna."
          />
          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {rules.map((r, i) => (
              <div key={i} className="reveal glass rounded-2xl p-6 relative" style={{ '--delay': `${i * 70}ms` }}>
                <div className="w-9 h-9 rounded-lg flex items-center justify-center font-display font-bold text-[15px]" style={{
                  background: 'rgba(212,160,23,0.15)',
                  border: '1px solid rgba(212,160,23,0.35)',
                  color: '#f0d68a',
                }}>{r.n}</div>
                <div className="font-display font-bold text-[17px] mt-4 leading-tight">{r.t}</div>
                <p className="text-[13.5px] mt-2 leading-relaxed" style={{ color: 'var(--text-dim)' }}>{r.d}</p>
                <div className="mt-4 pl-3 py-1.5 text-[11.5px] font-mono" style={{ borderLeft: '2px solid #d4a017', color: '#f0d68a' }}>
                  {r.key}
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* CYCLE SYSTEM ============================== */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="SI INCUMPLÍS"
            title="Sistema de 3 ciclos"
            subtitle="Bridge Markets no cancela en la primera infracción. Tenés dos avisos antes del cierre definitivo. Al incumplir cualquier condición, se cierran TODAS las posiciones abiertas (sin importar el símbolo) y recibís notificación por email y en tu dashboard."
          />
          <div className="mt-12 grid md:grid-cols-3 gap-4 max-w-5xl mx-auto">
            {cycles.map((c, i) => (
              <div key={i} className="reveal rounded-2xl p-6 text-center" style={{
                '--delay': `${i * 100}ms`,
                background: `linear-gradient(180deg, ${c.col}10, rgba(13,13,26,0.6))`,
                border: `1px solid ${c.col}50`,
              }}>
                <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto font-display font-bold text-[28px]" style={{
                  background: `${c.col}20`,
                  color: c.col,
                  border: `2px solid ${c.col}60`,
                }}>{c.n}</div>
                <div className="font-display font-bold text-[20px] mt-4">{c.t}</div>
                <div className="font-mono font-bold text-[32px] mt-1" style={{ color: c.col }}>{c.time}</div>
                <p className="text-[13px] mt-3 leading-relaxed" style={{ color: 'var(--text-dim)' }}>{c.d}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* FINAL CTA ============================== */}
      <Section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0" style={{
          background: 'radial-gradient(ellipse 1000px 500px at 50% 100%, rgba(212,160,23,0.35), transparent 60%)'
        }}></div>
        <div className="absolute inset-0 tech-grid opacity-30"></div>

        <Container className="relative">
          <div className="reveal text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-6" style={{ background: 'rgba(212,160,23,0.10)', border: '1px solid rgba(212,160,23,0.3)', color: '#f0d68a' }}>
              <Icon name="zap" size={11} /> EMPEZÁ HOY
            </div>
            <h2 className="font-display font-bold text-[36px] md:text-[60px] leading-[1.02] tracking-tight">
              Listo para operar con<br /><span className="grad-text-amber">capital real</span>
            </h2>
            <p className="mt-5 text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
              Registrate con nuestro link, aplicá el cupón <span className="font-mono text-white">DamcoFondea</span> al pagar y entrá a la comunidad de fondeo.
            </p>

            <div className="mt-8 flex flex-wrap justify-center gap-3">
              <a href={BRIDGE_REGISTER} target="_blank" rel="noopener noreferrer" className="btn text-base px-7 py-4" style={{
                background: 'linear-gradient(180deg, #f7d56b, #d4a017)',
                color: '#0a0a14',
                fontWeight: 700,
                boxShadow: '0 14px 40px -8px rgba(212,160,23,0.7)',
              }}>
                Registrarme en Bridge Markets <Icon name="arrow-right" size={17} />
              </a>
              <a href={TG_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn btn-outline-cyan text-base px-7 py-4">
                <Icon name="send" size={17} /> Soporte por Telegram
              </a>
            </div>

            <div className="mt-7 flex flex-wrap items-center justify-center gap-4 text-[12.5px]" style={{ color: 'var(--text-mute)' }}>
              <div className="flex items-center gap-2">
                <Icon name="shield-check" size={14} style={{ color: '#10b981' }} /> Sorteos
              </div>
              <span>·</span>
              <div className="flex items-center gap-2">
                <Icon name="trophy" size={14} style={{ color: '#f0d68a' }} /> Torneos de trading
              </div>
              <span>·</span>
              <div className="flex items-center gap-2">
                <Icon name="tag" size={14} style={{ color: '#00d4ff' }} /> Cupón 15% OFF
              </div>
            </div>

            <div className="mt-10 inline-flex items-center gap-3 px-4 py-3 rounded-xl glass">
              <a href={TG_FONDEO} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-[13px]" style={{ color: 'var(--text)' }}>
                <Icon name="message-circle" size={15} style={{ color: '#25d366' }} />
                <span>Sumate al grupo de <span className="text-white font-semibold">Noticias Cuentas de Fondeo</span></span>
                <Icon name="external-link" size={12} style={{ opacity: 0.5 }} />
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}
// ============================================================
// ACADEMIA
// ============================================================
const ACADEMY_SUPPORT = 'https://t.me/barbieshark';

function PageAcademia({ go }) {
  // Curriculum — el orden real del curso (básico → avanzado)
  const modules = [
    {
      n: '01',
      name: 'Fundamentos',
      color: '#00d4ff',
      tag: 'BÁSICO',
      d: 'Punto de partida: qué son los sintéticos y cómo construir un plan de operación antes de tocar el mercado.',
      lessons: [
        { n: 1, t: 'Índices Sintéticos · Introducción', dur: '10:18' },
        { n: 2, t: 'Plan de Trading', dur: '06:42' },
      ],
    },
    {
      n: '02',
      name: 'Acción del Precio',
      color: '#0070ff',
      tag: 'INTERMEDIO',
      d: 'Lectura limpia del gráfico: confirmaciones, figuras de mercado y patrones de vela aplicables a Boom, Crash y Volatility.',
      lessons: [
        { n: 3, t: 'Confirmaciones de Acción de Precio', dur: '10:05' },
        { n: 4, t: 'Figuras de Mercado', dur: '09:33' },
        { n: 5, t: 'Patrones de Vela y Formas de Operación', dur: '09:48' },
      ],
    },
    {
      n: '03',
      name: 'Smart Money & POIs',
      color: '#7c5cff',
      tag: 'AVANZADO',
      d: 'Cómo identifican zonas de interés los traders institucionales y cómo trasladarlo a setups concretos en sintéticos.',
      lessons: [
        { n: 6, t: 'Smart Money', dur: '08:14' },
        { n: 7, t: 'POI · Scalping', dur: '12:01' },
        { n: 8, t: 'POI ST', dur: '07:22' },
        { n: 9, t: 'POI Dos ST', dur: '07:51' },
      ],
    },
    {
      n: '04',
      name: 'Teoría Wyckoff',
      color: '#10b981',
      tag: 'AVANZADO',
      d: 'Lectura macro del comportamiento del mercado: acumulación, distribución y fases de manipulación.',
      lessons: [
        { n: 10, t: 'Teoría Wyckoff', dur: '08:40' },
      ],
    },
    {
      n: '05',
      name: 'Backtesting',
      color: '#d4a017',
      tag: 'PROFESIONAL',
      d: 'Tres sesiones dedicadas a validar tu estrategia con datos históricos antes de arriesgar capital real.',
      lessons: [
        { n: 11, t: 'Backtesting · Sesión 1', dur: '08:55' },
        { n: 13, t: 'Backtesting · Sesión 2', dur: '13:10' },
        { n: 14, t: 'Backtesting · Sesión 3', dur: '12:20' },
      ],
    },
  ];

  const totalLessons = modules.reduce((a, m) => a + m.lessons.length, 0);

  return (
    <div>
      <PageHero
        badge="ACADEMIA · DAMCOVISION"
        title="DAMCOVISION"
        accent="Academy"
        subtitle="Curso completo de índices sintéticos: clases grabadas por nuestros traders y biblioteca PDF. De cero a avanzado, a tu ritmo."
        accentColor="#00d4ff"
      />

      {/* Stat strip */}
      <Section className="pb-2">
        <Container>
          <div className="reveal grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
            {[
              { k: totalLessons, l: 'Clases grabadas', s: 'MP4 · HD', c: '#00d4ff' },
              { k: '5', l: 'Módulos', s: 'Básico → Avanzado', c: '#0070ff' },
              { k: 'PDF', l: 'Biblioteca', s: 'Material descargable', c: '#7c5cff' },
              { k: '24/7', l: 'Acceso', s: 'A tu ritmo', c: '#10b981' },
            ].map((s, i) => (
              <div key={i} className="glass rounded-2xl p-5">
                <div className="font-display font-bold text-[28px] md:text-[34px] leading-none" style={{ color: s.c }}>
                  {s.k}
                </div>
                <div className="mt-2 text-[13.5px] font-semibold">{s.l}</div>
                <div className="font-mono text-[10.5px] tracking-[0.14em] uppercase mt-1" style={{ color: 'var(--text-mute)' }}>
                  {s.s}
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Curriculum — file-explorer style */}
      <Section className="py-14 md:py-20">
        <Container>
          <SectionHeader
            eyebrow="CURRICULUM"
            title={<>Trece clases, un solo <span className="grad-text-cyan">camino</span></>}
            subtitle="Cada clase es un MP4 grabado por nuestros traders. Las verás dentro de la plataforma de la Academia, en el orden recomendado."
          />

          <div className="mt-12 space-y-10">
            {modules.map((m, mi) => (
              <div key={m.n} className="reveal" style={{ '--delay': `${mi * 80}ms` }}>
                {/* Module header */}
                <div className="flex flex-wrap items-end gap-x-5 gap-y-3 mb-5">
                  <span className="font-mono font-bold text-[64px] md:text-[88px] leading-[0.85] opacity-25" style={{ color: m.color }}>
                    {m.n}
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-wrap items-center gap-3 mb-2">
                      <span className="font-mono text-[10px] tracking-[0.2em] uppercase px-2 py-0.5 rounded" style={{ background: `${m.color}18`, color: m.color, border: `1px solid ${m.color}40` }}>
                        Módulo {m.n} · {m.tag}
                      </span>
                      <span className="font-mono text-[11px]" style={{ color: 'var(--text-mute)' }}>
                        {m.lessons.length} {m.lessons.length === 1 ? 'clase' : 'clases'}
                      </span>
                    </div>
                    <div className="font-display font-bold text-[24px] md:text-[30px] leading-tight">{m.name}</div>
                    <p className="mt-2 text-[14px] md:text-[15px] leading-relaxed max-w-2xl" style={{ color: 'var(--text-dim)' }}>{m.d}</p>
                  </div>
                </div>

                {/* Lesson rows */}
                <div className="glass-strong rounded-2xl overflow-hidden" style={{ borderColor: `${m.color}25` }}>
                  {m.lessons.map((ls, li) => (
                    <a
                      key={ls.n}
                      href={ACADEMY_SUPPORT}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group grid grid-cols-[auto_1fr_auto] sm:grid-cols-[auto_1fr_auto_auto] items-center gap-3 sm:gap-5 px-4 sm:px-5 py-4 transition-colors"
                      style={{
                        borderTop: li === 0 ? 'none' : '1px solid var(--border)',
                        background: 'transparent',
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.background = `${m.color}08`}
                      onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                    >
                      {/* number badge */}
                      <div className="flex items-center gap-3">
                        <span className="font-mono text-[11px] w-7 text-right" style={{ color: 'var(--text-mute)' }}>
                          {String(ls.n).padStart(2, '0')}
                        </span>
                        <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-all" style={{
                          background: `${m.color}12`,
                          border: `1px solid ${m.color}35`,
                          color: m.color,
                        }}>
                          <Icon name="play" size={14} strokeWidth={2.2} />
                        </div>
                      </div>

                      {/* title */}
                      <div className="min-w-0">
                        <div className="text-[14.5px] md:text-[15.5px] font-semibold truncate group-hover:text-white" style={{ color: 'var(--text)' }}>
                          {ls.t}
                        </div>
                        <div className="font-mono text-[10.5px] tracking-[0.14em] uppercase mt-0.5" style={{ color: 'var(--text-mute)' }}>
                          Archivo MP4 · Clase grabada
                        </div>
                      </div>

                      {/* duration */}
                      <div className="hidden sm:flex items-center gap-1.5 font-mono text-[12px]" style={{ color: 'var(--text-dim)' }}>
                        <Icon name="clock" size={12} />
                        <span>{ls.dur}</span>
                      </div>

                      {/* lock indicator */}
                      <div className="flex items-center gap-2 font-mono text-[10.5px] tracking-[0.16em] uppercase shrink-0" style={{ color: 'var(--text-mute)' }}>
                        <Icon name="lock" size={12} />
                        <span className="hidden md:inline">Acceso</span>
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Qué incluye */}
      <Section className="py-16 md:py-20" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,40,120,0.12), transparent)' }}>
        <Container>
          <SectionHeader eyebrow="QUÉ INCLUYE" title="Todo lo que necesitás para aprender" />
          <div className="mt-12 grid md:grid-cols-2 gap-5">
            {/* Video lessons */}
            <div className="reveal glass-strong rounded-2xl p-7 md:p-8 relative overflow-hidden">
              <div className="absolute -top-16 -right-16 w-56 h-56 rounded-full opacity-25 pointer-events-none" style={{ background: 'radial-gradient(circle, rgba(0,212,255,0.5), transparent 70%)' }}></div>
              <div className="relative">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style={{ background: 'rgba(0,212,255,0.10)', border: '1px solid rgba(0,212,255,0.35)', color: '#00d4ff' }}>
                  <Icon name="video" size={22} />
                </div>
                <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase mb-2" style={{ color: '#7fe5ff' }}>Clases grabadas</div>
                <h3 className="font-display font-bold text-[24px] md:text-[28px] leading-tight">Estrategias de nuestros traders</h3>
                <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                  {totalLessons} clases en MP4 grabadas por el equipo de DAMCOVISION. Cubren desde la introducción a los sintéticos hasta backtesting profesional. Disponibles 24/7 dentro de la plataforma.
                </p>
                <div className="mt-5 flex flex-wrap gap-2">
                  {['Acción de Precio', 'Smart Money', 'POIs', 'Wyckoff', 'Backtesting'].map((t) => (
                    <span key={t} className="font-mono text-[10.5px] px-2.5 py-1 rounded-md" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)', color: 'var(--text-dim)' }}>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* PDF library */}
            <div className="reveal glass-strong rounded-2xl p-7 md:p-8 relative overflow-hidden" style={{ '--delay': '120ms' }}>
              <div className="absolute -top-16 -right-16 w-56 h-56 rounded-full opacity-25 pointer-events-none" style={{ background: 'radial-gradient(circle, rgba(124,92,255,0.5), transparent 70%)' }}></div>
              <div className="relative">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style={{ background: 'rgba(124,92,255,0.10)', border: '1px solid rgba(124,92,255,0.35)', color: '#a690ff' }}>
                  <Icon name="library" size={22} />
                </div>
                <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase mb-2" style={{ color: '#c5b6ff' }}>Biblioteca PDF</div>
                <h3 className="font-display font-bold text-[24px] md:text-[28px] leading-tight">Material de trading descargable</h3>
                <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                  Una biblioteca de PDFs seleccionados sobre trading, acción del precio, Wyckoff y gestión de riesgo. Material complementario a las clases para que lo leas cuando quieras.
                </p>
                <div className="mt-5 inline-flex items-center gap-2 font-mono text-[11px] tracking-[0.14em] uppercase px-3 py-1.5 rounded-md" style={{ background: 'rgba(124,92,255,0.10)', border: '1px solid rgba(124,92,255,0.30)', color: '#c5b6ff' }}>
                  <Icon name="download" size={12} /> Descarga directa
                </div>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* Próximamente */}
      <Section className="py-14 md:py-18">
        <Container>
          <div className="reveal glass rounded-2xl p-6 md:p-8 relative overflow-hidden" style={{ borderColor: 'rgba(212,160,23,0.25)' }}>
            <div className="absolute inset-0 pointer-events-none opacity-50" style={{
              background: 'radial-gradient(ellipse 600px 220px at 100% 50%, rgba(212,160,23,0.15), transparent 60%)'
            }}></div>
            <div className="relative grid md:grid-cols-[auto_1fr_auto] items-center gap-6">
              <div className="w-14 h-14 rounded-2xl flex items-center justify-center shrink-0" style={{
                background: 'rgba(212,160,23,0.10)', border: '1px solid rgba(212,160,23,0.4)', color: '#f0d68a',
              }}>
                <Icon name="sparkles" size={24} />
              </div>
              <div>
                <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase mb-2" style={{ color: '#f0d68a' }}>Próximamente</div>
                <div className="font-display font-bold text-[22px] md:text-[26px] leading-tight">Más clases, herramientas y mentorías en camino</div>
                <p className="mt-2 text-[14px] leading-relaxed max-w-2xl" style={{ color: 'var(--text-dim)' }}>
                  Estamos sumando contenido nuevo de forma continua. Las nuevas clases, herramientas de gestión y material descargable van a aparecer dentro de la plataforma cuando los publiquemos.
                </p>
              </div>
              <div className="font-mono text-[10.5px] tracking-[0.16em] uppercase text-right hidden md:block" style={{ color: 'var(--text-mute)' }}>
                Actualizaciones<br/>continuas
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* Acceso / CTA */}
      <Section className="py-20 md:py-28 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 1000px 500px at 50% 100%, rgba(0,212,255,0.25), transparent 60%)'
        }}></div>
        <div className="absolute inset-0 tech-grid opacity-30 pointer-events-none"></div>
        <Container className="relative">
          <div className="reveal max-w-3xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.2em] uppercase mb-6" style={{
              background: 'rgba(0,212,255,0.10)', border: '1px solid rgba(0,212,255,0.35)', color: '#7fe5ff',
            }}>
              <span className="w-1.5 h-1.5 rounded-full anim-blink" style={{ background: '#00d4ff', boxShadow: '0 0 8px #00d4ff' }}></span>
              Acceso a la Academia
            </div>
            <h2 className="font-display font-bold text-[34px] md:text-[52px] leading-[1.04] tracking-tight">
              Para acceder al curso y la biblioteca, <span className="grad-text-cyan">contactá a soporte</span>
            </h2>
            <p className="mt-5 text-[15.5px] md:text-[17px] leading-relaxed max-w-xl mx-auto" style={{ color: 'var(--text-dim)' }}>
              Escribinos por Telegram y te activamos el acceso a la plataforma con las {totalLessons} clases grabadas y la biblioteca PDF.
            </p>

            <div className="mt-9 flex flex-wrap justify-center gap-3">
              <a href={ACADEMY_SUPPORT} target="_blank" rel="noopener noreferrer" className="btn btn-primary text-base px-7 py-4">
                <Icon name="send" size={17} /> Hablar con soporte
              </a>
              <button onClick={() => go && go('empezar')} className="btn btn-outline-cyan text-base px-7 py-4">
                <Icon name="compass" size={17} /> Ver otros servicios
              </button>
            </div>

            <div className="mt-7 font-mono text-[11.5px]" style={{ color: 'var(--text-mute)' }}>
              @barbieshark · Soporte directo
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

// ============================================================
// EMPEZAR — Segmentation hub
// ============================================================
function PageEmpezar({ go }) {
  const profiles = [
    {
      n: 1,
      icon: 'bot',
      title: 'Quiero que operen por mí',
      tag: 'AUTOMÁTICO',
      desc: 'Conectá tu cuenta y copiá operaciones de traders profesionales automáticamente. Sin experiencia necesaria.',
      accent: '#00d4ff',
      page: 'copytrading',
      perks: ['CopyTrading 24/7', 'Sin experiencia previa', 'Bridge Markets + Weltrade'],
    },
    {
      n: 2,
      icon: 'signal',
      title: 'Quiero recibir señales',
      tag: 'SEÑALES',
      desc: 'Recibí entradas precisas en tiempo real para Boom, Crash y Volatility. Vos ejecutás, nosotros analizamos.',
      accent: '#0070ff',
      page: 'signals',
      perks: ['8—30 señales por día', 'Comunidad Discord', 'Análisis en vivo'],
    },
    {
      n: 3,
      icon: 'graduation-cap',
      title: 'Quiero aprender a operar',
      tag: 'EDUCACIÓN',
      desc: 'Curso de índices sintéticos paso a paso, clases grabadas y herramientas de gestión con PD.',
      accent: '#d4a017',
      page: 'academia',
      perks: ['De cero a avanzado', 'Clases grabadas', 'Herramientas PD'],
    },
    {
      n: 4,
      icon: 'wallet',
      title: 'Quiero una cuenta fondeada',
      tag: 'CAPITAL',
      desc: 'Accedé a capital de hasta $100K con Bridge Markets. Te acompañamos durante el challenge.',
      accent: '#10b981',
      page: 'fondeadas',
      perks: ['Hasta $100K USD', 'Cupón 15% OFF', 'Acompañamiento total'],
    },
  ];

  return (
    <div>
      {/* HERO compact */}
      <div className="relative overflow-hidden" style={{ paddingTop: 120, paddingBottom: 56 }}>
        <div className="absolute inset-0 tech-grid opacity-40 pointer-events-none"></div>
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 1100px 500px at 50% 0%, rgba(0,112,255,0.22), transparent 60%), radial-gradient(ellipse 800px 400px at 80% 80%, rgba(0,212,255,0.10), transparent 60%)'
        }}></div>
        <Container className="relative text-center">
          <div className="reveal inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-6" style={{
            background: 'rgba(0,212,255,0.08)',
            border: '1px solid rgba(0,212,255,0.3)',
            color: '#7fe5ff',
          }}>
            <span className="w-1.5 h-1.5 rounded-full anim-blink" style={{ background: '#00d4ff', boxShadow: '0 0 8px #00d4ff' }}></span>
            EMPEZÁ AHORA
          </div>
          <h1 className="reveal font-display font-bold tracking-tight text-[44px] sm:text-[58px] md:text-[78px] leading-[0.98]" style={{ '--delay': '80ms' }}>
            ¿Cómo querés <span className="grad-text">empezar</span>?
          </h1>
          <p className="reveal mt-6 max-w-2xl mx-auto text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)', '--delay': '180ms' }}>
            Elegí el camino que mejor se adapte a tu perfil. Cada opción te lleva directo a lo que necesitás.
          </p>
        </Container>
      </div>

      {/* Profile cards 2x2 */}
      <Section className="pb-12 md:pb-16">
        <Container>
          <div className="grid md:grid-cols-2 gap-5 max-w-5xl mx-auto">
            {profiles.map((p, i) => (
              <button
                key={p.n}
                onClick={() => go(p.page)}
                className="reveal text-left rounded-2xl p-6 md:p-8 group relative overflow-hidden transition-all"
                style={{
                  '--delay': `${i * 110}ms`,
                  background: 'linear-gradient(180deg, rgba(20,20,40,0.6), rgba(13,13,26,0.4))',
                  border: '1px solid var(--border)',
                  backdropFilter: 'blur(14px)',
                  minHeight: 320,
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = `${p.accent}80`;
                  e.currentTarget.style.boxShadow = `0 0 0 1px ${p.accent}40, 0 24px 70px -20px ${p.accent}55, inset 0 1px 0 rgba(255,255,255,0.04)`;
                  e.currentTarget.style.transform = 'translateY(-3px)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = 'var(--border)';
                  e.currentTarget.style.boxShadow = '';
                  e.currentTarget.style.transform = '';
                }}
              >
                {/* Corner glow */}
                <div className="absolute -top-16 -right-16 w-48 h-48 rounded-full blur-3xl opacity-0 group-hover:opacity-50 transition-opacity duration-500 pointer-events-none" style={{ background: p.accent }}></div>

                {/* Number watermark */}
                <div className="absolute top-5 right-6 font-display font-bold text-[80px] leading-none opacity-[0.06] pointer-events-none select-none">
                  0{p.n}
                </div>

                <div className="relative">
                  {/* Icon */}
                  <div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-5" style={{
                    background: `linear-gradient(135deg, ${p.accent}30, ${p.accent}08)`,
                    border: `1px solid ${p.accent}50`,
                    color: p.accent,
                    boxShadow: `0 12px 32px -10px ${p.accent}60`,
                  }}>
                    <Icon name={p.icon} size={28} />
                  </div>

                  {/* Tag */}
                  <div className="font-mono text-[10.5px] tracking-[0.2em] uppercase mb-2" style={{ color: p.accent }}>
                    {p.tag}
                  </div>

                  {/* Title */}
                  <div className="font-display font-bold text-[24px] md:text-[28px] leading-tight tracking-tight">
                    {p.title}
                  </div>

                  {/* Description */}
                  <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                    {p.desc}
                  </p>

                  {/* Perks */}
                  <div className="mt-5 flex flex-wrap gap-1.5">
                    {p.perks.map((perk, j) => (
                      <span key={j} className="font-mono text-[10.5px] px-2 py-1 rounded" style={{
                        background: `${p.accent}10`,
                        border: `1px solid ${p.accent}25`,
                        color: 'var(--text)',
                      }}>
                        {perk}
                      </span>
                    ))}
                  </div>

                  {/* CTA */}
                  <div className="mt-6 pt-5 flex items-center justify-between border-t" style={{ borderColor: 'var(--border)' }}>
                    <span className="font-mono text-[11px] tracking-[0.18em] uppercase" style={{ color: 'var(--text-dim)' }}>
                      Continuar
                    </span>
                    <span className="inline-flex items-center gap-2 font-display font-semibold text-[15px] group-hover:gap-3 transition-all" style={{ color: p.accent }}>
                      Ver más <Icon name="arrow-right" size={16} />
                    </span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </Container>
      </Section>

      {/* Direct contact block */}
      <Section className="py-16 md:py-24 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 900px 400px at 50% 50%, rgba(0,112,255,0.20), transparent 60%)'
        }}></div>
        <div className="absolute left-0 right-0 top-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent)' }}></div>

        <Container className="relative">
          <div className="reveal text-center max-w-2xl mx-auto">
            <div className="font-mono text-[11px] tracking-[0.2em] uppercase mb-4" style={{ color: '#7fe5ff' }}>
              SOPORTE DIRECTO
            </div>
            <h2 className="font-display font-bold text-[32px] md:text-[44px] leading-[1.05] tracking-tight">
              ¿No sabés por dónde empezar?
            </h2>
            <p className="mt-4 text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
              Hablá con nosotros y te ayudamos a elegir el camino correcto según tu situación.
            </p>

            <div className="mt-8 flex flex-wrap justify-center gap-3">
              <a
                href="https://t.me/barbieshark"
                target="_blank"
                rel="noopener noreferrer"
                className="btn text-base px-6 py-3.5"
                style={{
                  background: 'linear-gradient(180deg, #2aa6ed, #0070ff)',
                  color: 'white',
                  boxShadow: '0 12px 40px -8px rgba(0,112,255,0.6), inset 0 1px 0 rgba(255,255,255,0.25)',
                  border: '1px solid rgba(0,180,255,0.5)',
                  fontWeight: 600,
                }}
              >
                <Icon name="send" size={16} /> Telegram
              </a>
              <a
                href="https://chat.whatsapp.com/I6Iblc8inKX9sZtaIXH2NU"
                target="_blank"
                rel="noopener noreferrer"
                className="btn text-base px-6 py-3.5"
                style={{
                  background: 'linear-gradient(180deg, #2bd366, #128c45)',
                  color: 'white',
                  boxShadow: '0 12px 40px -8px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.25)',
                  border: '1px solid rgba(37,211,102,0.5)',
                  fontWeight: 600,
                }}
              >
                <Icon name="message-circle" size={16} /> WhatsApp
              </a>
            </div>

            <div className="mt-5 font-mono text-[11.5px]" style={{ color: 'var(--text-mute)' }}>
              Respondemos en menos de 24 horas
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, {
  PagePlaceholder, PageHero, InternalCTA,
  PageCopyTrading, PageSignals, PageTradingView, PageFondeadas, PageAcademia, PageEmpezar,
});