// landing.jsx — Landing page sections
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

// ============================================================
// HERO
// ============================================================
function Hero({ go }) {
  return (
    <Section id="hero" className="relative overflow-hidden" style={{ minHeight: '100vh', paddingTop: 80 }}>
      {/* Background layers */}
      <div className="absolute inset-0 tech-grid opacity-[0.5]"></div>
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(ellipse 1100px 700px at 50% 10%, rgba(0,112,255,0.18), transparent 60%), radial-gradient(ellipse 900px 600px at 80% 70%, rgba(0,212,255,0.10), transparent 55%)'
      }}></div>
      <Particles />
      {/* Scanline accent */}
      <div className="absolute left-0 right-0 top-1/3 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent)' }}></div>

      <Container className="relative z-10 pt-14 md:pt-20 pb-20">
        <div className="grid lg:grid-cols-[1.05fr_0.95fr] gap-12 lg:gap-10 items-center">
          {/* Left */}
          <div>
            <div className="reveal flex flex-wrap items-center gap-3 mb-7">
              <LiveBadge />
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase glass" style={{ color: '#7fe5ff' }}>
                <Icon name="zap" size={12} />
                ECOSISTEMA PREMIUM
              </div>
            </div>

            <h1 className="reveal font-display font-bold tracking-tight text-[44px] sm:text-[58px] md:text-[72px] lg:text-[78px] leading-[0.98]" style={{ '--delay': '80ms' }}>
              Especialistas en<br />
              <span className="grad-text">Índices Sintéticos</span>
            </h1>

            <p className="reveal mt-7 max-w-xl text-[16px] md:text-[17.5px] leading-relaxed dot-sep flex flex-wrap" style={{ color: 'var(--text-dim)', '--delay': '180ms' }}>
              <span>CopyTrading</span>
              <span>Señales Premium</span>
              <span>TradingView</span>
              <span>Academia</span>
              <span>Fondeo</span>
            </p>

            <p className="reveal mt-5 max-w-xl text-[15px] leading-relaxed" style={{ color: 'var(--text-mute)', '--delay': '230ms' }}>
              Educación profesional, señales en tiempo real y acompañamiento para que tu trading deje de ser un hobby y se convierta en un sistema.
            </p>

            <div className="reveal mt-9 flex flex-wrap gap-3" style={{ '--delay': '320ms' }}>
              <button className="btn btn-primary" onClick={() => go && go('empezar')}>
                Empezar Ahora <Icon name="arrow-right" size={16} />
              </button>
              <button className="btn btn-outline-cyan" onClick={() => go && go('signals')}>
                Ver Premium <Icon name="sparkles" size={16} />
              </button>
              <button className="btn btn-outline-amber" onClick={() => go && go('copytrading')}>
                CopyTrading <Icon name="copy" size={16} />
              </button>
            </div>

            {/* trust row */}
            <div className="reveal mt-10 flex flex-wrap items-center gap-x-7 gap-y-3" style={{ '--delay': '420ms' }}>
              <div className="flex items-center gap-2">
                <div className="flex -space-x-2">
                  {['#0070ff','#00d4ff','#d4a017','#10b981'].map((c, i) => (
                    <div key={i} className="w-7 h-7 rounded-full ring-2" style={{ background: c, ringColor: 'var(--bg-0)' }}></div>
                  ))}
                </div>
                <span className="text-sm" style={{ color: 'var(--text-dim)' }}>
                  <span className="font-mono text-white">+1,200</span> traders en la comunidad
                </span>
              </div>
              <div className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-dim)' }}>
                <div className="flex gap-0.5">
                  {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14} className="text-amber-400" style={{ color: '#f0c040' }} />)}
                </div>
                <span><span className="font-mono text-white">4.9</span> satisfacción</span>
              </div>
            </div>
          </div>

          {/* Right — chart panel */}
          <div className="reveal relative" style={{ '--delay': '300ms' }}>
            <div className="relative glass-strong rounded-2xl p-5 md:p-6 anim-float" style={{ boxShadow: '0 30px 80px -20px rgba(0,112,255,0.4)' }}>
              {/* panel header */}
              <div className="flex items-center justify-between mb-4">
                <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" style={{ color: 'var(--text-dim)' }}>damcovision · live feed</span>
                </div>
                <span className="font-mono text-[10.5px] px-2 py-0.5 rounded" style={{ background: 'rgba(16,185,129,0.12)', color: '#34d399', border: '1px solid rgba(16,185,129,0.3)' }}>● LIVE</span>
              </div>

              {/* asset header */}
              <div className="flex items-end justify-between mb-3">
                <div>
                  <div className="font-mono text-[11px] tracking-[0.16em]" style={{ color: 'var(--text-dim)' }}>BOOM 1000 / USD</div>
                  <div className="font-display text-[34px] font-bold leading-none mt-1">8,432.<span style={{ color: '#10b981' }}>51</span></div>
                </div>
                <div className="text-right">
                  <div className="font-mono text-sm" style={{ color: '#10b981' }}>+104.32 <span className="text-xs">(+1.24%)</span></div>
                  <div className="font-mono text-[10.5px]" style={{ color: 'var(--text-dim)' }}>24h</div>
                </div>
              </div>

              {/* chart */}
              <div className="rounded-xl overflow-hidden relative" style={{ background: 'rgba(6,6,14,0.6)', border: '1px solid var(--border)', height: 240 }}>
                <CandlesArt className="w-full h-full" />
                {/* tag */}
                <div className="absolute top-3 right-3 px-2 py-1 rounded font-mono text-[10px]" style={{ background: 'rgba(0,212,255,0.12)', border: '1px solid rgba(0,212,255,0.35)', color: '#7fe5ff' }}>
                  SPIKE DETECTED
                </div>
                <div className="absolute bottom-3 left-3 font-mono text-[10px] flex gap-3" style={{ color: 'var(--text-dim)' }}>
                  <span>1M</span><span className="text-white">5M</span><span>15M</span><span>1H</span><span>4H</span><span>1D</span>
                </div>
              </div>

              {/* mini stats */}
              <div className="grid grid-cols-3 gap-2.5 mt-4">
                {[
                  { label: 'Win Rate', val: '78%', col: '#10b981' },
                  { label: 'Señales hoy', val: '24', col: '#00d4ff' },
                  { label: 'Activas', val: '6', col: '#d4a017' },
                ].map((s, i) => (
                  <div key={i} className="rounded-lg px-3 py-2.5" style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid var(--border)' }}>
                    <div className="font-mono text-[10px] tracking-wider" style={{ color: 'var(--text-dim)' }}>{s.label.toUpperCase()}</div>
                    <div className="font-display text-xl font-bold" style={{ color: s.col }}>{s.val}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* floating signal card */}
            <div className="absolute -left-3 md:-left-6 -bottom-6 md:-bottom-8 glass rounded-xl p-3.5 max-w-[240px] anim-float" style={{ animationDelay: '-3s', boxShadow: '0 20px 50px -15px rgba(16,185,129,0.4)' }}>
              <div className="flex items-center gap-2 mb-1.5">
                <div className="w-7 h-7 rounded-md flex items-center justify-center" style={{ background: 'rgba(16,185,129,0.15)', color: '#10b981' }}>
                  <Icon name="trending-up" size={14} />
                </div>
                <div>
                  <div className="font-mono text-[10px] tracking-wider" style={{ color: 'var(--text-dim)' }}>SEÑAL PREMIUM</div>
                  <div className="text-[13px] font-semibold">VOL 75 · LONG</div>
                </div>
              </div>
              <div className="font-mono text-[11px] flex justify-between" style={{ color: 'var(--text-dim)' }}>
                <span>Entry: 401,802</span>
                <span style={{ color: '#10b981' }}>+1.8R</span>
              </div>
            </div>
          </div>
        </div>
      </Container>

      {/* Scroll indicator */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 anim-blink" style={{ color: 'var(--text-mute)' }}>
        <span className="font-mono text-[10px] tracking-[0.2em]">SCROLL</span>
        <Icon name="chevron-down" size={16} />
      </div>
    </Section>
  );
}

// ============================================================
// QUE OPERAMOS
// ============================================================
function QueOperamos() {
  const items = [
    { name: 'Boom 1000', src: 'Deriv', icon: 'trending-up', desc: 'Spike alcista cada ~1000 ticks', accent: '#10b981', tag: 'SPIKE' },
    { name: 'Crash 1000', src: 'Deriv', icon: 'trending-down', desc: 'Spike bajista cada ~1000 ticks', accent: '#ef4444', tag: 'SPIKE' },
    { name: 'GainX 1000', src: 'Weltrade', icon: 'arrow-up-right', desc: 'Tendencia alcista controlada', accent: '#22d3ee', tag: 'GAIN' },
    { name: 'PainX 1000', src: 'Weltrade', icon: 'arrow-down-right', desc: 'Tendencia bajista controlada', accent: '#f97316', tag: 'PAIN' },
    { name: 'BullX 1000', src: 'Bridge Markets', icon: 'rocket', desc: 'Variante alcista de alta volatilidad', accent: '#0070ff', tag: 'BULL' },
    { name: 'BearX 1000', src: 'Bridge Markets', icon: 'mouse-pointer-2', desc: 'Variante bajista de alta volatilidad', accent: '#a855f7', tag: 'BEAR' },
    { name: 'Volatility 75 / 100', src: 'Deriv', icon: 'activity', desc: 'Movimiento continuo 24/7', accent: '#00d4ff', tag: 'VOL' },
    { name: 'Jump · Step Index', src: 'Deriv', icon: 'zap', desc: 'Saltos y pasos predecibles', accent: '#d4a017', tag: 'JUMP' },
  ];
  return (
    <Section id="operamos" className="py-16 md:py-20 relative">
      <Container>
        <SectionHeader
          eyebrow="MERCADOS"
          title={<>¿Qué <span className="grad-text-cyan">operamos</span>?</>}
          subtitle="Especialización absoluta en sintéticos. Mercados 24/7, sin gaps, sin manipulación institucional, con comportamiento estadísticamente analizable."
        />
        <div className="mt-12 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3.5">
          {items.map((it, i) => (
            <div key={it.name} className="reveal glass rounded-2xl p-5 group" style={{ '--delay': `${i * 60}ms` }}>
              <div className="flex items-start justify-between mb-4">
                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
                  background: `linear-gradient(135deg, ${it.accent}25, ${it.accent}08)`,
                  border: `1px solid ${it.accent}40`,
                  color: it.accent,
                }}>
                  <Icon name={it.icon} size={18} />
                </div>
                <span className="font-mono text-[9.5px] tracking-[0.18em] px-2 py-1 rounded" style={{ background: 'rgba(255,255,255,0.03)', color: 'var(--text-dim)', border: '1px solid var(--border)' }}>
                  {it.tag}
                </span>
              </div>
              <div className="font-display font-bold text-[15.5px] leading-tight">{it.name}</div>
              <div className="font-mono text-[10px] mt-1 tracking-wider" style={{ color: it.accent, opacity: 0.85 }}>{it.src.toUpperCase()}</div>
              <div className="text-[12.5px] mt-2" style={{ color: 'var(--text-dim)' }}>{it.desc}</div>
              <div className="mt-3 -mx-1">
                <Sparkline color={it.accent} trend={i % 2 === 0 ? 'up' : 'down'} height={28} points={20} />
              </div>
            </div>
          ))}
        </div>
        <div className="reveal mt-8 flex items-center justify-center gap-3 text-[13px]" style={{ color: 'var(--text-dim)', '--delay': '500ms' }}>
          <span className="font-mono text-[11px] tracking-[0.18em] uppercase" style={{ color: '#7fe5ff' }}>+ muchos más</span>
          <span className="w-12 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.4))' }}></span>
          <span>VIX, Range Break, Forex en cuentas de fondeo</span>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// SOBRE
// ============================================================
function Sobre() {
  return (
    <Section id="sobre" className="py-16 md:py-20 relative overflow-hidden">
      <div className="absolute inset-0 opacity-30 tech-grid-fine pointer-events-none"></div>
      <Container className="relative">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          {/* left text */}
          <div>
            <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.25)', color: '#7fe5ff' }}>
              <span className="w-1.5 h-1.5 rounded-full" style={{ background: '#00d4ff', boxShadow: '0 0 8px #00d4ff' }}></span>
              EL ECOSISTEMA
            </div>
            <h2 className="reveal font-display text-[36px] md:text-[52px] font-bold leading-[1.02] tracking-tight">
              Empezamos como comunidad.<br />
              <span className="grad-text-cyan">Crecimos como ecosistema.</span>
            </h2>
            <p className="reveal mt-6 text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
              Nacimos en 2022 reuniendo traders enfocados <em className="not-italic text-white">exclusivamente</em> en índices sintéticos. Tres años después somos la red hispanohablante más grande del nicho: educación, señales, copy y acceso a capital fondeado.
            </p>
            <div className="reveal mt-8 grid sm:grid-cols-2 gap-3.5">
              {[
                { icon: 'graduation-cap', t: 'Educación', d: 'De cero a profesional' },
                { icon: 'signal', t: 'Señales', d: 'En tiempo real, ejecutables' },
                { icon: 'copy', t: 'CopyTrading', d: 'Capital trabajando solo' },
                { icon: 'wallet', t: 'Fondeo', d: 'Capital prop firm' },
              ].map((it, i) => (
                <div key={i} className="flex items-start gap-3 p-3.5 rounded-xl" style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid var(--border)' }}>
                  <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style={{ background: 'rgba(0,212,255,0.08)', color: '#00d4ff', border: '1px solid rgba(0,212,255,0.25)' }}>
                    <Icon name={it.icon} size={16} />
                  </div>
                  <div>
                    <div className="font-display font-semibold text-[14.5px]">{it.t}</div>
                    <div className="text-[12.5px]" style={{ color: 'var(--text-dim)' }}>{it.d}</div>
                  </div>
                </div>
              ))}
            </div>
            <p className="reveal mt-7 text-[12.5px] font-mono tracking-wider" style={{ color: 'var(--text-mute)' }}>
              * No gestionamos cuentas de terceros.
            </p>
          </div>

          {/* right dashboard mockup */}
          <div className="reveal" style={{ '--delay': '160ms' }}>
            <div className="glass-strong rounded-2xl p-5 md:p-6" style={{ boxShadow: '0 30px 80px -20px rgba(0,112,255,0.3)' }}>
              <div className="flex items-center justify-between mb-5">
                <div>
                  <div className="font-mono text-[11px] tracking-[0.18em]" style={{ color: 'var(--text-dim)' }}>COMUNIDAD · ABRIL</div>
                  <div className="font-display text-[42px] font-bold leading-none mt-1 grad-text-cyan">+1,247</div>
                  <div className="text-[12.5px] mt-1" style={{ color: 'var(--text-dim)' }}>traders activos esta semana</div>
                </div>
                <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'rgba(0,212,255,0.1)', border: '1px solid rgba(0,212,255,0.3)' }}>
                  <Icon name="users" size={22} className="text-cyan-300" style={{ color: '#00d4ff' }} />
                </div>
              </div>

              {/* bar chart */}
              <div className="mb-5">
                <div className="flex items-end gap-1.5 h-32">
                  {[42, 58, 64, 51, 72, 81, 76, 88, 95, 84, 92, 102].map((h, i) => (
                    <div key={i} className="flex-1 rounded-t" style={{
                      height: `${h}%`,
                      background: `linear-gradient(180deg, ${i > 7 ? '#00d4ff' : '#0070ff'}, ${i > 7 ? '#0070ff' : '#003a8c'})`,
                      opacity: 0.85,
                    }}></div>
                  ))}
                </div>
                <div className="flex justify-between mt-2 font-mono text-[10px]" style={{ color: 'var(--text-mute)' }}>
                  <span>MAY</span><span>JUN</span><span>JUL</span><span>AGO</span><span>SEP</span><span>OCT</span><span>NOV</span><span>DIC</span><span>ENE</span><span>FEB</span><span>MAR</span><span>ABR</span>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-2.5">
                {[
                  { v: '94%', l: 'Retención', c: '#10b981' },
                  { v: '+312', l: 'Nuevos /mes', c: '#00d4ff' },
                  { v: '38', l: 'Países', c: '#d4a017' },
                ].map((s, i) => (
                  <div key={i} className="rounded-lg p-3" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)' }}>
                    <div className="font-display font-bold text-xl" style={{ color: s.c }}>{s.v}</div>
                    <div className="font-mono text-[10px] tracking-wider mt-0.5" style={{ color: 'var(--text-dim)' }}>{s.l.toUpperCase()}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* decorative orb */}
            <div className="absolute -z-10 w-72 h-72 rounded-full blur-3xl opacity-30" style={{ background: 'radial-gradient(circle, #00d4ff, transparent 70%)', right: -40, top: -40 }}></div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// SERVICIOS
// ============================================================
function Servicios({ go }) {
  const items = [
    { id: 'copytrading', icon: 'copy', title: 'CopyTrading', desc: 'Tu capital trabaja automáticamente copiando operaciones profesionales.', tag: 'AUTOMÁTICO', accent: '#0070ff', stat: '78% win rate' },
    { id: 'signals', icon: 'bell', title: 'Señales Premium', desc: 'Entradas precisas para Boom, Crash y Volatility con análisis en tiempo real.', tag: 'TIEMPO REAL', accent: '#00d4ff', stat: '+24 señales / día' },
    { id: 'tradingview', icon: 'line-chart', title: 'Análisis TradingView', desc: 'Análisis técnico profesional, zonas clave y tendencias del mercado.', tag: 'ANÁLISIS', accent: '#7c5cff', stat: 'Daily setups' },
    { id: 'fondeadas', icon: 'wallet', title: 'Cuentas de Fondeo', desc: 'Accedé a capital de Bridge Markets desde $5K hasta $100K. Sintéticos y Forex.', tag: 'CAPITAL', accent: '#d4a017', stat: 'Hasta $100K' },
    { id: 'academia', icon: 'graduation-cap', title: 'Academia', desc: 'Curso básico a avanzado en índices sintéticos, clases grabadas y herramientas de gestión.', tag: 'FORMACIÓN', accent: '#10b981', stat: 'Básico → avanzado' },
  ];
  return (
    <Section id="servicios" className="py-16 md:py-20 relative">
      <Container>
        <SectionHeader
          eyebrow="ECOSISTEMA"
          title={<>Nuestro <span className="grad-text-cyan">Ecosistema</span></>}
          subtitle="Cinco servicios que se complementan. Empezá por uno, escalá al resto cuando estés listo."
        />
        <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {items.map((it, i) => (
            <button
              key={it.id}
              onClick={() => go && go(it.id)}
              className="reveal text-left glass rounded-2xl p-6 group cursor-pointer relative overflow-hidden"
              style={{ '--delay': `${i * 80}ms`, minHeight: 268 }}
            >
              {/* corner accent */}
              <div className="absolute -top-12 -right-12 w-32 h-32 rounded-full blur-2xl opacity-0 group-hover:opacity-50 transition-opacity duration-500" style={{ background: it.accent }}></div>

              <div className="relative flex items-start justify-between mb-5">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{
                  background: `linear-gradient(135deg, ${it.accent}30, ${it.accent}08)`,
                  border: `1px solid ${it.accent}50`,
                  color: it.accent,
                }}>
                  <Icon name={it.icon} size={22} />
                </div>
                <span className="font-mono text-[10px] tracking-[0.18em] px-2 py-1 rounded" style={{ background: 'rgba(255,255,255,0.03)', color: 'var(--text-dim)', border: '1px solid var(--border)' }}>
                  {it.tag}
                </span>
              </div>

              <div className="font-display font-bold text-[22px] leading-tight">{it.title}</div>
              <p className="mt-2.5 text-[14px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
                {it.desc}
              </p>

              <div className="mt-6 pt-5 flex items-center justify-between border-t" style={{ borderColor: 'var(--border)' }}>
                <span className="font-mono text-[11.5px]" style={{ color: it.accent }}>{it.stat}</span>
                <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold group-hover:gap-2.5 transition-all" style={{ color: 'white' }}>
                  Explorar <Icon name="arrow-right" size={14} />
                </span>
              </div>
            </button>
          ))}

          {/* Last cell: ecosystem callout */}
          <div className="reveal glass rounded-2xl p-6 relative overflow-hidden" style={{ '--delay': '440ms', background: 'linear-gradient(135deg, rgba(0,112,255,0.15), rgba(0,212,255,0.05))', borderColor: 'rgba(0,212,255,0.3)' }}>
            <div className="absolute inset-0 tech-grid-fine opacity-50"></div>
            <div className="relative h-full flex flex-col">
              <Icon name="layers" size={28} className="text-cyan-300" style={{ color: '#00d4ff' }} />
              <div className="font-display font-bold text-[22px] mt-4 leading-tight">
                Acceso completo al ecosistema
              </div>
              <p className="text-[13.5px] mt-2 leading-relaxed flex-1" style={{ color: 'var(--text-dim)' }}>
                Combiná servicios. Un solo equipo, una sola comunidad, una sola visión.
              </p>
              <a href="https://t.me/barbieshark" target="_blank" rel="noopener noreferrer" className="btn btn-primary mt-5 self-start">
                Hablar con soporte <Icon name="send" size={15} />
              </a>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// ACADEMIA BLOCK
// ============================================================
function AcademiaBlock({ go }) {
  const tiles = [
    { icon: 'video', t: 'Clases grabadas', d: 'Básico a avanzado' },
    { icon: 'target', t: 'Estrategias', d: 'Probadas y documentadas' },
    { icon: 'sliders-horizontal', t: 'Herramientas PD', d: 'Gestión y position sizing' },
    { icon: 'library', t: 'Biblioteca', d: 'Recursos descargables' },
  ];
  return (
    <Section id="academia-block" className="py-16 md:py-20 relative overflow-hidden">
      {/* dramatic bg */}
      <div className="absolute inset-0" style={{
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,40,120,0.25) 30%, rgba(0,20,60,0.35) 70%, transparent 100%)'
      }}></div>
      <div className="absolute inset-x-0 top-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.6), transparent)' }}></div>
      <div className="absolute inset-x-0 bottom-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent)' }}></div>
      <div className="absolute inset-0 tech-grid opacity-30"></div>

      <Container className="relative">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16 items-start">
          <div className="lg:w-1/2">
            <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.1)', border: '1px solid rgba(0,212,255,0.3)', color: '#7fe5ff' }}>
              <Icon name="graduation-cap" size={12} />
              PLATAFORMA EDUCATIVA
            </div>
            <h2 className="reveal font-display text-[40px] md:text-[64px] font-bold leading-[0.98] tracking-tight">
              DAMCOVISION<br />
              <span className="grad-text">Academy</span>
            </h2>
            <p className="reveal mt-6 max-w-lg text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
              Curso de índices sintéticos paso a paso, con clases grabadas y herramientas de gestión con PD. Aprendés a tu ritmo, en una plataforma educativa dedicada.
            </p>
            <button onClick={() => go && go('academia')} className="reveal btn btn-primary mt-8 text-base px-6 py-3.5">
              Entrar a la Academia <Icon name="arrow-right" size={17} />
            </button>
          </div>

          <div className="lg:w-1/2 grid grid-cols-2 gap-4 w-full">
            {tiles.map((t, i) => (
              <div key={i} className="reveal glass rounded-2xl p-5" style={{ '--delay': `${i * 90}ms` }}>
                <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: 'rgba(0,212,255,0.08)', border: '1px solid rgba(0,212,255,0.25)', color: '#00d4ff' }}>
                  <Icon name={t.icon} size={20} />
                </div>
                <div className="font-display font-bold text-[17px] mt-4">{t.t}</div>
                <div className="text-[13px] mt-1" style={{ color: 'var(--text-dim)' }}>{t.d}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// RESULTADOS
// ============================================================
function Resultados() {
  return (
    <Section id="resultados" className="py-16 md:py-20 relative">
      <Container>
        <SectionHeader
          eyebrow="MÉTRICAS"
          title={<>Resultados que <span className="grad-text-cyan">hablan</span></>}
          subtitle="Tres años construyendo. Números reales de comunidad y servicio. Las rentabilidades individuales dependen de cada trader."
        />

        {/* counters */}
        <div className="mt-14 grid grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { val: 500, suffix: '+', label: 'Miembros activos', icon: 'users', accent: '#00d4ff' },
            { val: 10000, suffix: '+', label: 'Señales enviadas', icon: 'signal', accent: '#0070ff' },
            { val: 3, suffix: '+', label: 'Años de experiencia', icon: 'calendar', accent: '#d4a017' },
            { val: 95, suffix: '%', label: 'Satisfacción', icon: 'star', accent: '#10b981' },
          ].map((s, i) => (
            <div key={i} className="reveal glass rounded-2xl p-6" style={{ '--delay': `${i * 90}ms` }}>
              <div className="flex items-start justify-between mb-3">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: `${s.accent}18`, color: s.accent, border: `1px solid ${s.accent}40` }}>
                  <Icon name={s.icon} size={18} />
                </div>
              </div>
              <div className="font-display font-bold text-[44px] md:text-[52px] leading-none" style={{ color: s.accent }}>
                <Counter to={s.val} suffix={s.suffix} />
              </div>
              <div className="font-mono text-[11px] tracking-[0.18em] uppercase mt-2.5" style={{ color: 'var(--text-dim)' }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* dashboard mockup */}
        <div className="reveal mt-12 glass-strong rounded-2xl p-5 md:p-7" style={{ '--delay': '320ms' }}>
          <div className="flex flex-wrap items-center justify-between mb-6 gap-3">
            <div>
              <div className="font-mono text-[11px] tracking-[0.18em]" style={{ color: 'var(--text-dim)' }}>PANEL · ABRIL 2026</div>
              <div className="font-display text-[22px] font-bold mt-1">Rendimiento mensual de la comunidad</div>
            </div>
            <div className="flex gap-2 font-mono text-[11px]">
              {['7D', '30D', '90D', 'YTD'].map((t, i) => (
                <span key={i} className="px-3 py-1.5 rounded-md" style={{
                  background: i === 1 ? 'rgba(0,112,255,0.18)' : 'rgba(255,255,255,0.03)',
                  border: '1px solid ' + (i === 1 ? 'rgba(0,212,255,0.4)' : 'var(--border)'),
                  color: i === 1 ? '#7fe5ff' : 'var(--text-dim)',
                }}>{t}</span>
              ))}
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-4">
            {/* main perf chart */}
            <div className="lg:col-span-2 rounded-xl p-4 relative" style={{ background: 'rgba(6,6,14,0.5)', border: '1px solid var(--border)', height: 280 }}>
              <div className="flex items-end justify-between mb-2">
                <div>
                  <div className="font-mono text-[10px] tracking-wider" style={{ color: 'var(--text-dim)' }}>EQUITY CURVE</div>
                  <div className="font-display text-3xl font-bold mt-1" style={{ color: '#10b981' }}>+24.8%</div>
                </div>
                <span className="font-mono text-[11px]" style={{ color: '#10b981' }}>▲ Sharpe 2.1</span>
              </div>
              <svg viewBox="0 0 600 180" className="w-full" style={{ height: 180 }}>
                <defs>
                  <linearGradient id="perfGrad" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#10b981" stopOpacity="0.4" />
                    <stop offset="100%" stopColor="#10b981" stopOpacity="0" />
                  </linearGradient>
                </defs>
                {[0.25,0.5,0.75].map(p => <line key={p} x1="0" x2="600" y1={180*p} y2={180*p} stroke="rgba(255,255,255,0.04)" strokeDasharray="3 5" />)}
                <path d="M 0 150 L 50 142 L 100 128 L 150 132 L 200 110 L 250 95 L 300 105 L 350 78 L 400 82 L 450 55 L 500 48 L 550 32 L 600 22 L 600 180 L 0 180 Z" fill="url(#perfGrad)" />
                <path d="M 0 150 L 50 142 L 100 128 L 150 132 L 200 110 L 250 95 L 300 105 L 350 78 L 400 82 L 450 55 L 500 48 L 550 32 L 600 22" stroke="#10b981" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                <circle cx="600" cy="22" r="4" fill="#10b981" />
                <circle cx="600" cy="22" r="9" fill="#10b981" opacity="0.25" />
              </svg>
            </div>

            {/* breakdown bars */}
            <div className="rounded-xl p-5" style={{ background: 'rgba(6,6,14,0.5)', border: '1px solid var(--border)' }}>
              <div className="font-mono text-[10px] tracking-wider mb-4" style={{ color: 'var(--text-dim)' }}>POR INSTRUMENTO</div>
              <div className="space-y-4">
                {[
                  { sym: 'BOOM 1000', val: '+8.4%', w: 84, c: '#10b981' },
                  { sym: 'VOL 75', val: '+6.2%', w: 62, c: '#00d4ff' },
                  { sym: 'CRASH 500', val: '+5.1%', w: 51, c: '#0070ff' },
                  { sym: 'VOL 100', val: '+3.8%', w: 38, c: '#d4a017' },
                  { sym: 'STEP IDX', val: '+1.3%', w: 13, c: '#7c5cff' },
                ].map((r, i) => (
                  <div key={i}>
                    <div className="flex items-center justify-between mb-1.5 font-mono text-[11.5px]">
                      <span style={{ color: 'var(--text-dim)' }}>{r.sym}</span>
                      <span style={{ color: r.c }}>{r.val}</span>
                    </div>
                    <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.05)' }}>
                      <div className="h-full rounded-full" style={{ width: `${r.w}%`, background: `linear-gradient(90deg, ${r.c}80, ${r.c})` }}></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// FONDEADAS / BRIDGE MARKETS
// ============================================================
function Fondeadas({ go }) {
  const programs = [
    { name: 'Elite Sintético', phases: '1 FASE', range: '$5K — $100K', payout: 'Retiro a 10 días', split: 'Profit Split 80—90%', icon: 'gem', accent: '#00d4ff', popular: false },
    { name: 'Ultra Sintético', phases: '2 FASES', range: '$5K — $100K', payout: 'Retiro a 14 días', split: 'Profit Split 80—90%', icon: 'crown', accent: '#0070ff', popular: true },
    { name: 'Obsidian Forex', phases: '1 FASE', range: '$5K — $100K', payout: 'Retiro a 10 días', split: 'Profit Split 80—90%', icon: 'circle-dot', accent: '#7c5cff', popular: false },
    { name: 'Basalt Forex', phases: '2 FASES', range: '$5K — $100K', payout: 'Retiro a 14 días', split: 'Profit Split 80—90%', icon: 'mountain', accent: '#d4a017', popular: false },
  ];
  return (
    <Section id="fondeadas" className="py-16 md:py-20 relative overflow-hidden">
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(ellipse 1100px 600px at 50% 50%, rgba(0,60,160,0.30), transparent 65%), linear-gradient(180deg, transparent, rgba(212,160,23,0.04) 50%, transparent)'
      }}></div>
      <div className="absolute inset-x-0 top-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(212,160,23,0.5), rgba(0,212,255,0.5), transparent)' }}></div>
      <div className="absolute inset-x-0 bottom-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent)' }}></div>

      <Container className="relative">
        <div className="text-center mb-14">
          <div className="reveal inline-flex items-center gap-3 px-4 py-2 rounded-full font-mono text-[11px] tracking-[0.18em] uppercase mb-6" style={{ background: 'rgba(212,160,23,0.1)', border: '1px solid rgba(212,160,23,0.35)', color: '#f0d68a' }}>
            <Icon name="trophy" size={12} />
            <span>PARTNER OFICIAL</span>
            <span className="w-px h-3" style={{ background: 'rgba(212,160,23,0.35)' }}></span>
            <img src="img/bridgemarkets.svg" alt="Bridge Markets" className="logo-white" style={{ height: 18, width: 'auto', opacity: 0.92 }} />
          </div>
          <h2 className="reveal font-display text-[40px] md:text-[64px] font-bold leading-[0.98] tracking-tight">
            Cuentas <span className="grad-text-amber">de Fondeo</span>
          </h2>
          <p className="reveal mt-5 max-w-2xl mx-auto text-[16px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
            Accedé a capital de hasta <span className="font-mono text-white">$100K</span> con Bridge Markets. Acompañamiento completo desde el challenge hasta el primer payout.
          </p>
        </div>

        {/* Coupon */}
        <div className="reveal flex justify-center mb-12 px-2">
          <div className="ticket rounded-xl px-5 sm:px-6 py-4 anim-pulse-amber flex flex-col sm:flex-row items-center gap-3 sm:gap-5 max-w-full">
            <div>
              <div className="font-mono text-[10px] tracking-[0.22em] mb-1" style={{ color: '#f0d68a' }}>CUPÓN EXCLUSIVO</div>
              <div className="font-display font-bold text-[22px] sm:text-[28px] grad-text-amber leading-none" style={{ fontVariationSettings: '"wdth" 100, "wght" 800' }}>DamcoFondea</div>
              <div className="font-mono text-[11px] mt-1" style={{ color: '#f0d68a' }}>aplicable a todos los programas</div>
            </div>
            <div className="h-px w-14 sm:h-14 sm:w-px" style={{ background: 'rgba(212,160,23,0.4)' }}></div>
            <div className="text-center">
              <div className="font-display font-bold text-[44px] leading-none" style={{ color: '#f7d56b' }}>15%</div>
              <div className="font-mono text-[10px] tracking-[0.2em] mt-1" style={{ color: '#f0d68a' }}>OFF</div>
            </div>
          </div>
        </div>

        {/* Programs grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {programs.map((p, i) => (
            <div key={p.name} className="reveal glass rounded-2xl p-5 relative" style={{ '--delay': `${i * 90}ms`, borderColor: p.popular ? 'rgba(0,212,255,0.4)' : undefined }}>
              {p.popular && (
                <div className="absolute -top-3 left-5 px-2.5 py-1 rounded-md font-mono text-[10px] tracking-[0.18em]" style={{ background: 'linear-gradient(180deg, #0a86ff, #0058d6)', color: 'white', boxShadow: '0 8px 24px -4px rgba(0,112,255,0.6)' }}>
                  POPULAR
                </div>
              )}
              <div className="w-12 h-12 rounded-xl 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,
              }}>
                <Icon name={p.icon} size={22} />
              </div>
              <div className="flex items-center gap-2">
                <div className="font-display font-bold text-[17px] leading-tight">{p.name}</div>
              </div>
              <div className="font-mono text-[10px] tracking-[0.18em] mt-1" style={{ color: p.accent }}>{p.phases}</div>
              <ul className="mt-4 space-y-2">
                <li className="flex items-start gap-2 text-[12.5px]" style={{ color: 'var(--text)' }}>
                  <Icon name="check" size={13} style={{ color: p.accent, marginTop: 3 }} />
                  <span>{p.range}</span>
                </li>
                <li className="flex items-start gap-2 text-[12.5px]" style={{ color: 'var(--text-dim)' }}>
                  <Icon name="check" size={13} style={{ color: p.accent, marginTop: 3 }} />
                  <span>{p.payout}</span>
                </li>
                <li className="flex items-start gap-2 text-[12.5px]" style={{ color: 'var(--text-dim)' }}>
                  <Icon name="check" size={13} style={{ color: p.accent, marginTop: 3 }} />
                  <span>{p.split}</span>
                </li>
              </ul>
            </div>
          ))}
        </div>

        <div className="reveal mt-10 flex flex-wrap justify-center gap-3">
          <button className="btn btn-primary text-base px-6 py-3.5" onClick={() => go && go('fondeadas')}>
            Ver Programas <Icon name="arrow-right" size={16} />
          </button>
          <a href="https://t.me/barbieshark" target="_blank" rel="noopener noreferrer" className="btn btn-outline-amber text-base px-6 py-3.5">
            <Icon name="send" size={16} /> Contactar por Telegram
          </a>
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// TESTIMONIOS
// ============================================================
function Testimonios() {
  const t = [
    { name: 'Carlos M.', country: '🇲🇽', role: 'Miembro Premium', text: 'Desde que entré a DamcoVision mi operativa cambió completamente. Las señales son precisas y el acompañamiento es de otro nivel.' },
    { name: 'Ana L.', country: '🇨🇴', role: 'Copy Trader', text: 'El copy trading me permite generar ingresos mientras aprendo. Lo mejor que encontré en el mercado de sintéticos.' },
    { name: 'Diego R.', country: '🇦🇷', role: 'Trader Fondeado', text: 'La academia es brutal. Fui de no saber nada a operar con cuenta fondeada en 4 meses.' },
    { name: 'María F.', country: '🇪🇸', role: 'Club Premium', text: 'Las sesiones de MarketLive son oro puro. Entrar al Club Premium fue la mejor decisión.' },
  ];
  return (
    <Section id="testimonios" className="py-16 md:py-20 relative">
      <Container>
        <SectionHeader
          eyebrow="COMUNIDAD"
          title={<>Lo que dicen nuestros <span className="grad-text-cyan">traders</span></>}
        />
        <div className="mt-14 grid md:grid-cols-2 gap-4">
          {t.map((it, i) => (
            <div key={i} className="reveal glass rounded-2xl p-6 md:p-7 relative" style={{ '--delay': `${i * 100}ms` }}>
              <Icon name="quote" size={28} className="absolute top-5 right-5 opacity-15" />
              <div className="flex gap-0.5 mb-4">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={14} style={{ color: '#f0c040' }} />)}
              </div>
              <p className="text-[15px] leading-relaxed" style={{ color: 'var(--text)' }}>
                "{it.text}"
              </p>
              <div className="mt-6 pt-5 flex items-center gap-3 border-t" style={{ borderColor: 'var(--border)' }}>
                <div className="w-11 h-11 rounded-full flex items-center justify-center font-display font-bold text-lg" style={{
                  background: 'linear-gradient(135deg, #0070ff, #00d4ff)',
                  boxShadow: '0 8px 24px -8px rgba(0,212,255,0.5)',
                }}>
                  {it.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div>
                  <div className="font-display font-semibold text-[14.5px]">{it.name} <span className="ml-1">{it.country}</span></div>
                  <div className="font-mono text-[10.5px] tracking-wider" style={{ color: 'var(--text-dim)' }}>{it.role.toUpperCase()}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function CTAFinal({ go }) {
  return (
    <Section id="cta" className="py-20 md:py-24 relative overflow-hidden">
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(ellipse 1000px 600px at 50% 100%, rgba(0,112,255,0.4), transparent 60%), linear-gradient(180deg, transparent, rgba(0,40,120,0.3))'
      }}></div>
      <div className="absolute inset-0 tech-grid opacity-40"></div>
      {/* Decorative side lines */}
      <div className="absolute left-0 right-0 top-1/2 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent)' }}></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-7" style={{ background: 'rgba(0,212,255,0.1)', 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>
          UNITE AL ECOSISTEMA
        </div>
        <h2 className="reveal font-display font-bold text-[40px] sm:text-[56px] md:text-[72px] lg:text-[84px] leading-[0.98] tracking-tight max-w-4xl mx-auto">
          Tu próximo nivel<br />en trading <span className="grad-text">empieza hoy</span>
        </h2>
        <p className="reveal mt-7 max-w-2xl mx-auto text-[16px] md:text-[18px] leading-relaxed" style={{ color: 'var(--text-dim)' }}>
          Únete a la comunidad de traders más especializada en índices sintéticos. Educación, señales, copy y fondeo en un solo ecosistema.
        </p>
        <div className="reveal mt-10 flex flex-wrap justify-center gap-3">
          <button className="btn btn-primary text-base px-7 py-4" onClick={() => go && go('empezar')}>
            Empezar Ahora <Icon name="arrow-right" size={17} />
          </button>
          <a href="https://t.me/barbieshark" target="_blank" rel="noopener noreferrer" className="btn btn-outline-cyan text-base px-7 py-4">
            <Icon name="send" size={17} /> Telegram soporte
          </a>
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, {
  Hero, QueOperamos, Sobre, Servicios, AcademiaBlock, Resultados, Fondeadas, Testimonios, CTAFinal,
});