// sections.jsx — Nav, Hero, LivePulse, Games, Hubs, Clans, Trainers, Directory, Sanciones, Stats, CTA, Footer
const { useState, useEffect, useRef, useMemo } = React;
/* ─────────────── INVITES REALES (2026-05-15) ─────────────── */
const INVITE_SERVER = 'https://discord.gg/zaPG9adRmq';
const INVITE_ZEROHEX = 'https://discord.gg/K5UP8Pa3jq';
const INVITE_BOT = 'https://discord.com/api/oauth2/authorize?client_id=1469356955108901129&permissions=8&scope=bot%20applications.commands';
// Exponer en window por si otros JSXs los usan
if (typeof window !== 'undefined') {
window.OW_INVITE_SERVER = INVITE_SERVER;
window.OW_INVITE_ZEROHEX = INVITE_ZEROHEX;
window.OW_INVITE_BOT = INVITE_BOT;
}
/* ─────────────── Reveal-on-scroll hook ─────────────── */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { e.target.classList.add('in'); io.disconnect(); }
}, { threshold: 0.12 });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return ref;
}
/* ─────────────── Logo mark ─────────────── */
const LogoMark = ({ size = 28 }) => (
);
/* ─────────────── i18n REAL (2026-05-15) ─────────────── */
const LANGS = [
{ code: 'es', label: 'ES', name: 'Español' },
{ code: 'en', label: 'EN', name: 'English' },
{ code: 'pt', label: 'PT', name: 'Português' },
];
const STRINGS = {
// Nav
'nav.inicio': { es: 'Inicio', en: 'Home', pt: 'Início' },
'nav.hubs': { es: 'Hubs', en: 'Hubs', pt: 'Hubs' },
'nav.clanes': { es: 'Clanes', en: 'Clans', pt: 'Clãs' },
'nav.comunidades': { es: 'Comunidades', en: 'Communities', pt: 'Comunidades' },
'nav.trainers': { es: 'Trainers', en: 'Trainers', pt: 'Treinadores' },
'nav.start': { es: 'Cómo empezar', en: 'Get started', pt: 'Como começar' },
'nav.usage': { es: 'Comandos', en: 'Commands', pt: 'Comandos' },
'nav.directorio': { es: 'Directorio', en: 'Directory', pt: 'Diretório' },
'nav.sanciones': { es: 'Sanciones', en: 'Sanctions', pt: 'Sanções' },
'nav.usage': { es: 'Comandos', en: 'Commands', pt: 'Comandos' },
'nav.discord': { es: 'Discord', en: 'Discord', pt: 'Discord' },
// Hero
'hero.eyebrow': { es: 'v3.0 · Plataforma competitiva', en: 'v3.0 · Competitive platform', pt: 'v3.0 · Plataforma competitiva' },
// Título completo por idioma — usa para la palabra acentuada
// (en el render se reemplaza por ). Evita armar el título
// por partes que se rompía en inglés (ej. "Where the los best compete").
'hero.title.html': { es: 'Donde compiten los mejores.',
en: 'Where the best compete.',
pt: 'Onde competem os melhores.' },
'hero.desc': { es: 'Rankings en vivo, clanes verificados, torneos coordinados por Discord y un directorio público para toda la escena hispanohablante. Un solo lugar, múltiples juegos.',
en: 'Live rankings, verified clans, Discord-coordinated tournaments and a public directory for the whole community. One place, multiple games.',
pt: 'Rankings ao vivo, clãs verificados, torneios coordenados pelo Discord e um diretório público para toda a cena. Um só lugar, múltiplos jogos.' },
'hero.cta.discord': { es: 'Unirse a Discord', en: 'Join Discord', pt: 'Entrar no Discord' },
'hero.cta.bot': { es: 'Invitar bot', en: 'Invite bot', pt: 'Convidar bot' },
'hero.stat.cmds': { es: 'Comandos · 14 módulos', en: 'Commands · 14 modules', pt: 'Comandos · 14 módulos' },
'hero.stat.games': { es: 'Juegos soportados', en: 'Games supported', pt: 'Jogos suportados' },
'hero.stat.discord':{ es: 'Multi-guild', en: 'Multi-guild', pt: 'Multi-guild' },
'hero.stat.uptime': { es: 'Bot online', en: 'Bot online', pt: 'Bot online' },
// Sections
'sec.juegos.eyebrow': { es: '01 · Juegos', en: '01 · Games', pt: '01 · Jogos' },
'sec.juegos.title.a': { es: 'Una plataforma,', en: 'One platform,', pt: 'Uma plataforma,' },
'sec.juegos.title.b': { es: 'múltiples títulos.', en: 'multiple titles.', pt: 'múltiplos títulos.' },
'sec.juegos.sub': { es: 'OneWay soporta The Strongest Battlegrounds y Jujutsu Shenanigans. La infraestructura — rankings, clanes, torneos, sanciones — es agnóstica al juego.',
en: 'OneWay supports The Strongest Battlegrounds and Jujutsu Shenanigans. The infrastructure — rankings, clans, tournaments, sanctions — is game-agnostic.',
pt: 'OneWay suporta The Strongest Battlegrounds e Jujutsu Shenanigans. A infraestrutura — rankings, clãs, torneios, sanções — é agnóstica ao jogo.' },
'sec.juegos.cta': { es: 'Ver clanes y comunidades', en: 'View clans and communities', pt: 'Ver clãs e comunidades' },
'sec.hubs.eyebrow': { es: '03 · Sedes oficiales', en: '03 · Official hubs', pt: '03 · Sedes oficiais' },
'sec.hubs.title.a': { es: 'Hubs oficiales', en: 'Official hubs', pt: 'Hubs oficiais' },
'sec.hubs.title.b': { es: 'por región.', en: 'by region.', pt: 'por região.' },
'sec.hubs.sub': { es: 'Cada hub es una comunidad activa del juego en su región. OneWay conecta y verifica la red, no las posee. Nomenclatura: TSB + código de región.',
en: 'Each hub is an active community of the game in its region. OneWay connects and verifies the network, it does not own the hubs. Naming: TSB + region code.',
pt: 'Cada hub é uma comunidade ativa do jogo em sua região. OneWay conecta e verifica a rede, não é dona dos hubs. Nomenclatura: TSB + código de região.' },
'sec.hubs.apply': { es: 'Aplicar a un hub', en: 'Apply to a hub', pt: 'Candidatar-se a um hub' },
'sec.hubs.unirse': { es: 'Unirse', en: 'Join', pt: 'Entrar' },
'sec.hubs.lead.empty': { es: 'Lead sin asignar', en: 'Lead unassigned', pt: 'Líder não atribuído' },
'sec.hubs.miembros': { es: 'Miembros', en: 'Members', pt: 'Membros' },
'sec.hubs.clanes': { es: 'Clanes', en: 'Clans', pt: 'Clãs' },
// Zero Hex (clan oficial One Way)
'sec.zerohex.eyebrow': { es: 'Clan oficial · propiedad de One Way', en: 'Official clan · owned by One Way', pt: 'Clã oficial · propriedade da One Way' },
'sec.zerohex.title.a': { es: 'Zero Hex', en: 'Zero Hex', pt: 'Zero Hex' },
'sec.zerohex.title.b': { es: 'el clan insignia.', en: 'the flagship clan.', pt: 'o clã carro-chefe.' },
'sec.zerohex.sub': { es: 'Nuestro clan principal. Los miembros más activos de la plataforma, élite competitiva y staff fundador. Actualmente top 3 LATAM en el hub TSBL. Verificación manual y proceso de entrada exigente.',
en: 'Our flagship clan. Most active platform members, competitive elite and founding staff. Currently top 3 LATAM in the TSBL hub. Manual verification and strict entry process.',
pt: 'Nosso clã principal. Membros mais ativos da plataforma, elite competitiva e staff fundador. Atualmente top 3 LATAM no hub TSBL. Verificação manual e processo de entrada exigente.' },
'sec.zerohex.join': { es: 'Unirme al clan', en: 'Join the clan', pt: 'Entrar no clã' },
'sec.zerohex.tag': { es: 'ONW', en: 'ONW', pt: 'ONW' },
'sec.clanes.eyebrow': { es: '04 · Clanes', en: '04 · Clans', pt: '04 · Clãs' },
'sec.clanes.title.a': { es: 'Élite del', en: 'Top of', pt: 'Elite do' },
'sec.clanes.title.b': { es: 'ranking.', en: 'the ranking.', pt: 'ranking.' },
'sec.clanes.sub': { es: 'Verificación manual, ranking público por puntos y miembros activos.',
en: 'Manual verification, public ranking by points and active members.',
pt: 'Verificação manual, ranking público por pontos e membros ativos.' },
'sec.clanes.register': { es: 'Registrar mi clan', en: 'Register my clan', pt: 'Registrar meu clã' },
'sec.start.eyebrow': { es: '05 · Cómo empezar', en: '05 · Get started', pt: '05 · Como começar' },
'sec.start.title.a': { es: 'Sumate en', en: 'Join in', pt: 'Entre em' },
'sec.start.title.b': { es: 'cuatro pasos.', en: 'four steps.', pt: 'quatro passos.' },
'sec.start.sub': { es: 'Sin formularios, sin esperas. Todo lo importante se gestiona desde Discord.',
en: 'No forms, no waiting. Everything important happens from Discord.',
pt: 'Sem formulários, sem esperas. Tudo o que importa acontece pelo Discord.' },
'sec.start.s1.t': { es: 'Unite al Discord', en: 'Join the Discord', pt: 'Entrar no Discord' },
'sec.start.s1.d': { es: 'Aceptá la invitación al servidor principal de OneWay. Es público, gratuito y vale como puerta de entrada a toda la red.',
en: 'Accept the invite to the main OneWay server. Public, free and the entry point to the whole network.',
pt: 'Aceite o convite para o servidor principal da OneWay. É público, gratuito e a porta de entrada para toda a rede.' },
'sec.start.s1.cta': { es: 'Abrir Discord', en: 'Open Discord', pt: 'Abrir Discord' },
'sec.start.s2.t': { es: 'Verificá tu cuenta', en: 'Verify your account', pt: 'Verifique sua conta' },
'sec.start.s2.d': { es: 'Corré .verify en cualquier canal. La verificación queda asociada a tu Discord y vale en toda la red de servidores conectados.',
en: 'Run .verify in any channel. Verification ties to your Discord and is valid across the connected network.',
pt: 'Execute .verify em qualquer canal. A verificação fica ligada ao seu Discord e vale em toda a rede conectada.' },
'sec.start.s2.cta': { es: 'Cómo verificar', en: 'How to verify', pt: 'Como verificar' },
'sec.start.s3.t': { es: 'Encontrá tu hub', en: 'Find your hub', pt: 'Encontre seu hub' },
'sec.start.s3.d': { es: 'Cada juego y región tiene un hub público (TSBL, TSBC, TSBV…). Aplicá al que coincida con tu zona y juego.',
en: 'Each game and region has a public hub (TSBL, TSBC, TSBV…). Apply to the one matching your area and game.',
pt: 'Cada jogo e região tem um hub público (TSBL, TSBC, TSBV…). Candidate-se ao que combinar com sua área e jogo.' },
'sec.start.s3.cta': { es: 'Ver hubs', en: 'See hubs', pt: 'Ver hubs' },
'sec.start.s4.t': { es: 'Registrá tu clan', en: 'Register your clan', pt: 'Registre seu clã' },
'sec.start.s4.d': { es: 'Si liderás un clan, usá .clan register para sumarlo a la red. Pasa por verificación manual antes de aparecer en el directorio público.',
en: 'If you lead a clan, use .clan register to add it to the network. Goes through manual verification before appearing in the public directory.',
pt: 'Se você lidera um clã, use .clan register para adicioná-lo. Passa por verificação manual antes de aparecer no diretório.' },
'sec.start.s4.cta': { es: 'Registrar clan', en: 'Register clan', pt: 'Registrar clã' },
'sec.cta.eyebrow': { es: 'Empezar', en: 'Get started', pt: 'Começar' },
'sec.cta.title.a': { es: 'Una plataforma,', en: 'One platform,', pt: 'Uma plataforma,' },
'sec.cta.title.b': { es: 'todo en un solo lugar.', en: 'all in one place.', pt: 'tudo num só lugar.' },
'sec.cta.sub': { es: 'Rankings, torneos, clanes, verificación cross-server y coaching. Operados por OneWay — el bot es la herramienta, la plataforma es nuestra.',
en: 'Rankings, tournaments, clans, cross-server verification and coaching. Operated by OneWay — the bot is the tool, the platform is ours.',
pt: 'Rankings, torneios, clãs, verificação cross-server e coaching. Operados pela OneWay — o bot é a ferramenta, a plataforma é nossa.' },
'sec.cta.join': { es: 'Unirse al servidor', en: 'Join the server', pt: 'Entrar no servidor' },
'sec.cta.invite': { es: 'Invitar bot a tu server', en: 'Invite bot to your server', pt: 'Convidar bot ao seu server' },
'footer.terms': { es: 'Términos', en: 'Terms', pt: 'Termos' },
'footer.rights': { es: 'Todos los derechos reservados.', en: 'All rights reserved.', pt: 'Todos os direitos reservados.' },
'lang.progress': { es: 'Traducción en progreso', en: 'Translation in progress', pt: 'Tradução em andamento' },
};
function readLang() {
try { return localStorage.getItem('ow_lang') || 'es'; } catch (_) { return 'es'; }
}
function writeLang(code) {
try { localStorage.setItem('ow_lang', code); } catch (_) {}
document.documentElement.setAttribute('lang', code);
// Disparar evento global para re-render
try { window.dispatchEvent(new CustomEvent('ow:lang', { detail: code })); } catch (_) {}
}
// Hook que re-renderiza al cambiar idioma
function useLang() {
const [lang, setLang] = useState(readLang());
useEffect(() => {
const onLang = (e) => setLang(e.detail || readLang());
window.addEventListener('ow:lang', onLang);
return () => window.removeEventListener('ow:lang', onLang);
}, []);
return lang;
}
// Helper t(key) — retorna string en el idioma activo, fallback ES
function t(key, lang) {
const e = STRINGS[key];
if (!e) return key; // fallback al key como hint si no existe
return e[lang] || e.es || key;
}
// useT() hook combinado
function useT() {
const lang = useLang();
return (key) => t(key, lang);
}
// Exponer en window para JSXs hermanos
if (typeof window !== 'undefined') {
window.OW_useT = useT;
window.OW_useLang = useLang;
window.OW_STRINGS = STRINGS;
window.OW_t = t;
}
function LangSelector() {
const [lang, setLang] = useState(readLang());
const [open, setOpen] = useState(false);
useEffect(() => { writeLang(lang); }, [lang]);
const current = LANGS.find(l => l.code === lang) || LANGS[0];
return (
Nomenclatura: <código de juego de 3 letras> + <código de región>. Hoy: TSB · JJS. Cuando sumemos un juego nuevo, su hub sigue el mismo patrón.
);
}
/* ─────────────── Clanes (LEGACY — reemplazada por de rankings-clans.jsx) ─────────────── */
// FAKE-DATA-REMOVED (2026-05-15): Novus Ordo / Kamigami / Zero Protocol eran clanes inventados.
// Esta funcion ya no se usa en la composicion (app.jsx), pero queda como empty-state por si se referencia.
function Clanes() {
const ref = useReveal();
const clans = [];
return (
Élite del ranking.}
subtitle="Cada clan pasa por verificación manual antes de aparecer en el directorio público. Sin verificación, no hay representación en torneos oficiales."
action={
Registrar mi clan
}
/>
);
}
/* Reusable avatar with graceful onError fallback. Discord CDN sometimes
404s stale avatar hashes; the old inline ``
left the parent grid column empty, which made the member's name visually
slide into the avatar slot ("rows destruidas"). This component swaps to
an initial-circle of the same dimensions, preserving the grid layout. */
function MemberAvatar({ src, name, size = 36 }) {
const [failed, setFailed] = useState(false);
const initial = (name || '?').trim().charAt(0).toUpperCase() || '?';
const dim = { width: size, height: size, borderRadius: Math.round(size / 4) };
if (failed || !src || typeof src !== 'string' || !/^https?:\/\//.test(src)) {
return (
{initial}
);
}
return (
setFailed(true)}/>
);
}
/* ─────────────── Directory + Sanctions ─────────────── */
function Directorio() {
const ref = useReveal();
const [q, setQ] = useState('');
const [tab, setTab] = useState('directorio');
const [expanded, setExpanded] = useState(false);
// DIRECTORY-WIRED: consume members del bot. Probamos varios endpoints en orden
// hasta encontrar uno que devuelva una lista no-vacia. Si todos vuelven empty,
// dejamos la lista en [] y el empty state se muestra honestamente.
const [members, setMembers] = useState([]);
const [fetched, setFetched] = useState(false); // distingue "loading" de "really empty"
useEffect(() => {
let cancelled = false;
const fetchMembers = async () => {
// Fallback chain: relative -> absolute -> /api/public/data (which contains
// `.members` array as a side-channel). The first endpoint to give us a
// non-empty array wins.
const urls = [
'/inicio/api/public/members',
'api/public/members',
'/inicio/api/public/data',
];
let list = [];
for (const u of urls) {
try {
const r = await fetch(u, { cache: 'no-store' });
if (!r.ok) continue;
const j = await r.json();
const got = Array.isArray(j) ? j
: Array.isArray(j.members) ? j.members
: Array.isArray(j.users) ? j.users
: [];
if (got.length > 0) { list = got; break; }
} catch (_) { /* try next */ }
}
if (cancelled) return;
// DIRECTORY-LENIENT: antes pedíamos un `link` HTTPS explícito y filtrábamos
// todo el resto, lo que dejaba la lista vacía cuando los miembros aún no
// habían corrido .edit. Ahora basta con que la entrada tenga algún display
// identificable (displayName / username / nickname / tag) y que no esté
// marcada como `pending`. Los con link real se priorizan en el ordenamiento.
const isShowable = (m) => {
if (!m || m.pending) return false;
return Boolean(m.displayName || m.username || m.nickname || m.tag || m.id);
};
const linkOf = (m) => {
const v = m && (m.link || m.profileUrl || m.profileLink || m.profile);
return (typeof v === 'string' && /^https?:\/\//.test(v)) ? v : null;
};
const clean = list
.filter(isShowable)
.map(m => ({ ...m, _hasLink: Boolean(linkOf(m)) }))
.sort((a, b) => {
// 1) Members with a verified profile link float to the top
if (a._hasLink !== b._hasLink) return a._hasLink ? -1 : 1;
// 2) Then real numeric rank
const ra = Number(a.rank), rb = Number(b.rank);
if (Number.isFinite(ra) && Number.isFinite(rb)) return ra - rb;
if (Number.isFinite(ra)) return -1;
if (Number.isFinite(rb)) return 1;
// 3) Then kills desc
const ka = Number(a.kills) || 0, kb = Number(b.kills) || 0;
if (ka !== kb) return kb - ka;
// 4) Finally joined-asc (oldest first)
return new Date(a.joinedAt || 0) - new Date(b.joinedAt || 0);
});
setMembers(clean);
setFetched(true);
};
fetchMembers();
const id = setInterval(fetchMembers, 60_000);
return () => { cancelled = true; clearInterval(id); };
}, []);
const ql = q.trim().toLowerCase();
const filtered = ql === ''
? members
: members.filter(m => {
const name = (m.displayName || m.nickname || m.username || '').toLowerCase();
const tag = (m.tag || m.discordTag || '').toLowerCase();
const role = (m.staffRole || '').toLowerCase();
const roleNames = Array.isArray(m.roles) ? m.roles.map(r => (r.name || '').toLowerCase()).join(' ') : '';
return name.includes(ql) || tag.includes(ql) || role.includes(ql) || roleNames.includes(ql);
});
const visible = expanded ? filtered.slice(0, 100) : filtered.slice(0, 12);
return (
Todo público, todo auditable.}
subtitle="Directorio abierto de miembros registrados y registro público de sanciones. La reputación se gana — y se pierde — a la vista de todos."
/>
);
}
/* ─────────────── Zero Hex (clan oficial One Way) ─────────────── */
function ZeroHexHighlight() {
const ref = useReveal();
const tr = useT();
return (
{/* Left: gif logo + tag — animated icon doubles as the backdrop */}
{/* Backdrop: same animated icon, scaled up + blurred + dimmed. Gives
the card a real "guild presence" instead of the flat blue. */}
{/* Top sheen + bottom fade so the foreground logo + chip pop */}
{ e.currentTarget.style.display = 'none'; }}/>
{ e.currentTarget.style.display = 'none'; }}/>
) : (
{/* Top sheen + bottom fade so the foreground logo + chip pop */}
