// ecosystem.jsx — Módulos del bot + Ecosistema de plataformas
const MODULES = [
  { id: 'moderation', name: 'Moderation', cmds: 33, desc: 'Ban, mute, antiraid, lockdown, sanciones, audit.' },
  { id: 'utility', name: 'Utility', cmds: 64, desc: 'Reminders, profile, calc, dictionary, help, todo.' },
  { id: 'tsb-game', name: 'TSB Game', cmds: 40, desc: 'Clanes, alianzas, phases, glads, scouting, leaderboards.' },
  { id: 'moderation-extra', name: 'Tournaments', cmds: 4, desc: 'Brackets, schedule, eventos.' },
  { id: 'verify', name: 'Verify', cmds: 4, desc: 'Verificación cross-server con bot detection.' },
  { id: 'tickets', name: 'Tickets', cmds: 1, desc: 'Soporte con asignaciones y close-force.' },
  { id: 'premium', name: 'Premium', cmds: 11, desc: 'Custom roles, JARVIS, devspace, manual, cowork relay.' },
  { id: 'economy', name: 'Economy', cmds: 4, desc: 'Market, budget, donor, slots.' },
  { id: 'analytics', name: 'Analytics', cmds: 6, desc: 'Webaccess, webstats, webusers, webprofile.' },
  { id: 'social', name: 'Social', cmds: 6, desc: 'Mentions, post, publish, webchat.' },
  { id: 'music', name: 'Music', cmds: 6, desc: 'Música en VC, radio, vcperms, vcrecord.' },
  { id: 'fun', name: 'Fun', cmds: 7, desc: '8ball, slots, coinflip, voice-troll, buscaminas.' },
  { id: 'dev', name: 'Dev', cmds: 19, desc: 'Backup, terminal, debug, snapshot, dbsync.' },
  { id: 'setup', name: 'Setup', cmds: 10, desc: 'Setup wizard, modules, themes, registry.' },
];

// PLATFORMS-PUBLIC (2026-05-15): solo paginas publicas del ecosistema OneWay.
// Quitamos /labfisica y /trader (privados) y /devs (autorizados). El resto son
// las paginas que tambien aparecen en la topbar.
const PLATFORMS = [
  { id: 'bot',       name: 'OneWay Bot',  url: 'oneway.lat',          tag: 'Discord · pieza central',  desc: 'Multi-guild, multi-juego, 220+ comandos. JARVIS IA integrado y verificación cross-server.',                  icon: Icon.Discord, accent: 'var(--accent)' },
  { id: 'usage',     name: 'Comandos',    url: 'oneway.lat/usage',    tag: 'Documentación',            desc: 'Referencia interactiva de los 220+ comandos del bot con búsqueda, ejemplos y permisos.',                       icon: Icon.Hash,    accent: 'var(--accent-2)' },
  { id: 'hubs',      name: 'Hubs',        url: 'oneway.lat/hubs',     tag: 'Sedes oficiales',          desc: 'Sedes oficiales de OneWay por región. Cada hub coordina sus clanes y torneos locales.',                       icon: Icon.Hubs,    accent: '#5B8CFF' },
  { id: 'clans',     name: 'Clanes',      url: 'oneway.lat/clans',    tag: 'Comunidades',              desc: 'Directorio de clanes y comunidades verificadas. Rosters, alianzas y ranking de clanes.',                       icon: Icon.Users,   accent: '#22C55E' },
  { id: 'trainers',  name: 'Trainers',    url: 'oneway.lat/trainers', tag: 'Coaching · 1-on-1',        desc: 'Coaches verificados por OneWay. Sesiones 1-on-1, vouchers, reviews y soporte por Discord.',                    icon: Icon.Trainer, accent: '#FF7AC6' },
  { id: 'directory', name: 'Directorio',  url: 'oneway.lat/directory',tag: 'Búsqueda global',          desc: 'Buscador transversal de jugadores, clanes, servers y comandos. Una sola caja de búsqueda.',                    icon: Icon.Search,  accent: 'var(--warn)' },
  { id: 'warnings',  name: 'Sanciones',   url: 'oneway.lat/warnings', tag: 'Transparencia',            desc: 'Portal público de sanciones, strikes y blacklist. Lo que el bot registra, queda visible.',                     icon: Icon.Warn,    accent: '#F59E0B' },
];

function Modules() {
  const ref = useReveal();
  return (
    <section id="modulos">
      <div className="container">
        <SectionHeader
          eyebrow="07 · Módulos"
          title={<>14 módulos, <span className="emph">220+ comandos.</span></>}
          subtitle="Cada servidor activa solo los módulos que necesita. La UI y los comandos se adaptan automáticamente — sin clutter, sin features que no usás."
          action={
            <a href="/usage" className="btn btn-ghost" style={{ fontSize: 13 }}>
              Ver todos los comandos
              <Icon.Arrow size={14}/>
            </a>
          }
        />
        <div ref={ref} className="reveal" style={{
          marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
        }} id="mod-grid">
          {MODULES.map(m => (
            <div key={m.id} style={{
              padding: '18px 18px 16px',
              background: 'var(--surface-2)',
              border: '1px solid var(--border)',
              borderRadius: 12,
              display: 'flex', flexDirection: 'column', gap: 6,
              transition: 'border-color .2s, transform .2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>{m.name}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', padding: '2px 6px', background: 'var(--surface-3)', borderRadius: 5, letterSpacing: '0.06em' }}>{m.cmds} cmds</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.45 }}>{m.desc}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { #mod-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { #mod-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function Ecosystem() {
  const ref = useReveal();
  return (
    <section id="ecosistema" style={{ background: 'var(--surface)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="08 · Ecosistema"
          title={<>Una plataforma, <span className="emph">muchas puertas.</span></>}
          subtitle="OneWay no es solo un bot. Es un ecosistema público de páginas y portales, todo bajo el dominio oneway.lat. Sin login para mirar — todo lo público vive acá."
        />
        <div ref={ref} className="reveal" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} id="eco-grid">
          {PLATFORMS.map(p => (
            <a key={p.id} href={`https://${p.url}`} target="_blank" rel="noopener" style={{
              display: 'flex', flexDirection: 'column',
              padding: '22px 20px',
              background: 'var(--surface-2)',
              border: '1px solid var(--border)',
              borderRadius: 14, textDecoration: 'none', color: 'inherit',
              minHeight: 200,
              transition: 'border-color .2s, transform .2s, box-shadow .2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
              <div style={{
                width: 36, height: 36, borderRadius: 9,
                background: `color-mix(in srgb, ${p.accent} 14%, transparent)`,
                color: p.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                <p.icon size={17}/>
              </div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{p.tag}</div>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>{p.name}</div>
              <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5, marginTop: 8, flex: 1 }}>{p.desc}</div>
              <div className="mono" style={{ fontSize: 11, color: p.accent, marginTop: 14, display: 'flex', alignItems: 'center', gap: 4 }}>
                {p.url} <Icon.ArrowUpRight size={11}/>
              </div>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1180px) { #eco-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 800px)  { #eco-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 460px)  { #eco-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Modules, Ecosystem });