// rank-and-leader.jsx — Phase/Tier/Subtier rank system + Clan Leader dashboard preview
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

/* ─────────────── Sistema de rangos: Phase · Tier · Subtier ─────────────── */

const PHASE_GRAD = {
  0: 'linear-gradient(135deg, #4A4F5C 0%, #1F2229 100%)',
  1: 'linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%)',
  2: 'linear-gradient(135deg, #06B6D4 0%, #0E7490 100%)',
  3: 'linear-gradient(135deg, #8B5CF6 0%, #5B21B6 100%)',
  4: 'linear-gradient(135deg, #EC4899 0%, #BE185D 100%)',
  5: 'linear-gradient(135deg, #F59E0B 0%, #DC2626 100%)',
};
const TIER_COLOR = { H: '#F59E0B', M: '#94A3B8', L: '#64748B' };
const SUBTIER_COLOR = { S: 'var(--live)', T: 'var(--accent-2)', W: 'var(--text-muted)' };
const TIER_NAME = { H: 'High', M: 'Mid', L: 'Low' };
const SUB_NAME = { S: 'Strong', T: 'Stable', W: 'Weak' };

function RankBadge({ phase, tier, subtier, large = false }) {
  const phaseGrad = PHASE_GRAD[phase];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'stretch',
      background: 'var(--surface-2)',
      border: '1px solid var(--border)',
      borderRadius: large ? 14 : 10,
      overflow: 'hidden',
      fontFamily: 'Geist Mono',
      boxShadow: large ? '0 12px 30px -10px rgba(0,0,0,0.25)' : 'none',
    }}>
      {/* Phase */}
      <div style={{
        background: phaseGrad,
        padding: large ? '14px 20px' : '8px 14px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        color: 'white',
        minWidth: large ? 64 : 42,
      }}>
        <div style={{ fontSize: large ? 10 : 8, letterSpacing: '0.12em', opacity: 0.8, fontWeight: 500 }}>PHASE</div>
        <div style={{ fontSize: large ? 26 : 16, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>{phase}</div>
      </div>
      {/* Tier */}
      <div style={{
        padding: large ? '14px 18px' : '8px 12px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        borderLeft: '1px solid var(--border)',
        background: `color-mix(in srgb, ${TIER_COLOR[tier]} 10%, transparent)`,
        minWidth: large ? 70 : 50,
      }}>
        <div style={{ fontSize: large ? 9 : 8, letterSpacing: '0.12em', color: 'var(--text-muted)' }}>TIER</div>
        <div style={{ fontSize: large ? 14 : 11, fontWeight: 600, color: TIER_COLOR[tier], marginTop: 2 }}>
          {TIER_NAME[tier]}
        </div>
      </div>
      {/* Subtier */}
      <div style={{
        padding: large ? '14px 18px' : '8px 12px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        borderLeft: '1px solid var(--border)',
        background: `color-mix(in srgb, ${SUBTIER_COLOR[subtier]} 10%, transparent)`,
        minWidth: large ? 76 : 54,
      }}>
        <div style={{ fontSize: large ? 9 : 8, letterSpacing: '0.12em', color: 'var(--text-muted)' }}>SUBTIER</div>
        <div style={{ fontSize: large ? 14 : 11, fontWeight: 600, color: SUBTIER_COLOR[subtier], marginTop: 2 }}>
          {SUB_NAME[subtier]}
        </div>
      </div>
    </div>
  );
}

function RankSystem() {
  const ref = useReveal();
  const [phase, setPhase] = useStateL(3);
  const [tier, setTier] = useStateL('H');
  const [subtier, setSubtier] = useStateL('S');

  return (
    <section id="rangos">
      <div className="container">
        <SectionHeader
          eyebrow="06 · Sistema de rangos"
          title={<>Tres capas, <span className="emph">una identidad.</span></>}
          subtitle="No es solo un número. Cada jugador tiene Phase (rama de progresión 0–5), Tier (calidad técnica H/M/L) y Subtier (consistencia S/T/W). El bot calcula y asigna los rangos vía .phase."
        />

        <div ref={ref} className="reveal" style={{
          marginTop: 48,
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32,
        }} id="rangos-grid">
          {/* Interactive badge preview */}
          <div style={{
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 20,
            padding: 36,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            position: 'relative',
            overflow: 'hidden',
            minHeight: 420,
          }}>
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.06,
              background: PHASE_GRAD[phase],
              transition: 'background .4s ease',
            }}/>
            <div style={{ position: 'relative', textAlign: 'center' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 28 }}>
                Tu rango se ve así
              </div>

              <RankBadge phase={phase} tier={tier} subtier={subtier} large/>

              <div className="mono" style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 24, letterSpacing: '0.04em' }}>
                .phase <span style={{ color: 'var(--accent)' }}>{phase}</span> <span style={{ color: TIER_COLOR[tier] }}>{TIER_NAME[tier].toLowerCase()}</span> <span style={{ color: SUBTIER_COLOR[subtier] }}>{SUB_NAME[subtier].toLowerCase()}</span> @user
              </div>

              {/* Controls */}
              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
                <RangeRow label="Phase" options={[0,1,2,3,4,5]} value={phase} onChange={setPhase} mono/>
                <RangeRow label="Tier"  options={['H','M','L']} value={tier} onChange={setTier} renderLabel={v => TIER_NAME[v]}/>
                <RangeRow label="Subtier" options={['S','T','W']} value={subtier} onChange={setSubtier} renderLabel={v => SUB_NAME[v]}/>
              </div>
            </div>
          </div>

          {/* Explanation columns */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <RankLevel
              num="01" name="Phase" range="5 → 0"
              desc="Rama de progresión competitiva. Phase 5 es el ingreso al clan; Phase 0 y Phase 1 son la élite. Se asciende (a número menor) ganando torneos y por revisión del staff."
              color="var(--accent)"
            />
            <RankLevel
              num="02" name="Tier" range="High · Mid · Low"
              desc="Calidad técnica dentro del phase. Un jugador Phase 2 High supera técnicamente a un Phase 2 Low aunque compartan rama."
              color={TIER_COLOR.H}
            />
            <RankLevel
              num="03" name="Subtier" range="Strong · Stable · Weak"
              desc="Consistencia. Mide qué tan seguido el jugador rinde a la altura de su tier. Cambia más rápido que phase o tier."
              color={SUBTIER_COLOR.S}
            />
            <div style={{
              padding: '14px 18px',
              background: 'var(--surface-2)',
              border: '1px solid var(--border)',
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <Icon.Sparkle size={16} style={{ color: 'var(--accent)' }}/>
              <span style={{ fontSize: 13, color: 'var(--text-dim)' }}>
                <strong style={{ color: 'var(--text)' }}>Phase 1 Applicant</strong> es un rol aparte para aspirantes en proceso de admisión.
              </span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { #rangos-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function RangeRow({ label, options, value, onChange, renderLabel, mono }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <span className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)', minWidth: 56, textAlign: 'right' }}>{label}</span>
      <div style={{ display: 'flex', gap: 4, background: 'var(--surface-2)', padding: 4, borderRadius: 9, border: '1px solid var(--border)' }}>
        {options.map(o => {
          const active = o === value;
          return (
            <button key={o} onClick={() => onChange(o)} style={{
              padding: '5px 11px', borderRadius: 6,
              background: active ? 'var(--surface-3)' : 'transparent',
              border: 'none', cursor: 'pointer',
              color: active ? 'var(--text)' : 'var(--text-dim)',
              fontSize: 11, fontWeight: 500,
              fontFamily: mono ? 'Geist Mono' : 'inherit',
              transition: 'all .15s', minWidth: 30,
            }}>{renderLabel ? renderLabel(o) : o}</button>
          );
        })}
      </div>
    </div>
  );
}

function RankLevel({ num, name, range, desc, color }) {
  return (
    <div style={{
      padding: '20px 22px',
      background: 'var(--surface)',
      border: '1px solid var(--border)',
      borderRadius: 14,
      position: 'relative',
    }}>
      <div style={{ position: 'absolute', left: 0, top: 16, bottom: 16, width: 2, background: color, borderRadius: 2 }}/>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.08em' }}>{num}</span>
        <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span>
        <span className="mono" style={{ fontSize: 11, color }}>{range}</span>
      </div>
      <p style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 8, lineHeight: 1.55 }}>{desc}</p>
    </div>
  );
}

/* ─────────────── Clan Leader dashboard preview ─────────────── */

function ClanLeaderPreview() {
  const ref = useReveal();
  const [tab, setTab] = useStateL('roster');

  return (
    <section id="lider" style={{ background: 'var(--surface)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="04 · Para líderes de clan"
          title={<>Tu clan, <span className="emph">en un solo lugar.</span></>}
          subtitle="Iniciá sesión con Discord y administrá roster, applicants, alianzas, sanciones y torneos. Sin abrir 8 servers ni recordar 30 comandos."
          action={
            <a href="/admins" className="btn btn-discord" style={{ fontSize: 13 }}>
              <Icon.Discord size={15}/>
              Administrar mi clan
            </a>
          }
        />

        <div ref={ref} className="reveal card" style={{
          marginTop: 48, padding: 0, overflow: 'hidden',
          boxShadow: 'var(--shadow-lg)',
        }}>
          {/* Browser-style chrome */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '12px 16px',
            background: 'var(--surface-2)',
            borderBottom: '1px solid var(--border)',
          }}>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }}/>
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }}/>
              <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }}/>
            </div>
            <div style={{
              flex: 1, padding: '5px 12px',
              background: 'var(--surface-3)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              fontSize: 12, color: 'var(--text-muted)',
              fontFamily: 'Geist Mono',
              textAlign: 'center', maxWidth: 380,
              margin: '0 auto',
            }}>
              oneway.lat/dashboard/clan/<span style={{ color: 'var(--text-dim)' }}>ONW</span>
            </div>
            <div style={{ width: 60 }}/>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr' }} id="dash-grid">
            {/* Sidebar */}
            <div style={{ background: 'var(--surface-2)', borderRight: '1px solid var(--border)', padding: '20px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', marginBottom: 18 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: 'linear-gradient(135deg, #0B1330 0%, #5B8CFF 100%)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, color: 'white', fontSize: 11,
                  fontFamily: 'Geist Mono',
                }}>ONW</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Zero Hex</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.06em' }}>TSBL · 291 mbr</div>
                </div>
              </div>
              {[
                { id: 'roster',    label: 'Roster',     icon: Icon.Users, count: '291' },
                { id: 'applicants', label: 'Applicants', icon: Icon.Bolt,  count: '7' },
                { id: 'tiers',     label: 'Asignar rangos', icon: Icon.Trophy, count: null },
                { id: 'alliances', label: 'Alianzas',   icon: Icon.Shield, count: '4' },
                { id: 'torneos',   label: 'Torneos',    icon: Icon.Calendar, count: '2' },
                { id: 'sancion',   label: 'Sanciones',  icon: Icon.Warn, count: null },
              ].map(t => (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  width: '100%', display: 'grid', gridTemplateColumns: '16px 1fr auto', gap: 10, alignItems: 'center',
                  padding: '8px 10px',
                  background: tab === t.id ? 'var(--surface-3)' : 'transparent',
                  border: 'none', borderRadius: 7, cursor: 'pointer',
                  color: tab === t.id ? 'var(--text)' : 'var(--text-dim)',
                  fontSize: 12, fontWeight: 500, fontFamily: 'inherit', textAlign: 'left',
                  marginBottom: 2,
                  transition: 'all .15s',
                }}>
                  <t.icon size={14}/>
                  {t.label}
                  {t.count && <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>{t.count}</span>}
                </button>
              ))}
            </div>

            {/* Content */}
            <div style={{ padding: 28, minHeight: 460 }}>
              <DashboardTab tab={tab}/>
            </div>
          </div>
        </div>

        {/* Feature row */}
        <div style={{
          marginTop: 36,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }} id="lider-features">
          {[
            { icon: Icon.Bolt, title: 'Applicants en 1 click', desc: 'Aceptá o rechazá postulantes sin tipear comandos.' },
            { icon: Icon.Trophy, title: 'Asignar Phase + Tier', desc: 'Sliders visuales con preview del badge resultante.' },
            { icon: Icon.Shield, title: 'Alianzas y guerras', desc: 'Coordinar con otros clanes, scrims y declaraciones.' },
            { icon: Icon.Send, title: 'Announce al clan', desc: 'Mandá un anuncio que llega a Discord y al feed web.' },
          ].map(f => (
            <div key={f.title} style={{ padding: '20px 4px 0', borderTop: '1px solid var(--border)' }}>
              <f.icon size={18} style={{ color: 'var(--accent)', marginBottom: 12 }}/>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4, letterSpacing: '-0.01em' }}>{f.title}</div>
              <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5 }}>{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { #dash-grid { grid-template-columns: 1fr !important; } #lider-features { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) { #lider-features { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function DashboardTab({ tab }) {
  if (tab === 'roster') {
    // FAKE-DATA-REMOVED (2026-05-14): roster real desde /api/clan/:guildId/members
    const members = [];
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Roster · 291 miembros</div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Filtrar por phase, tier o búsqueda libre.</div>
          </div>
          <button className="btn btn-ghost" style={{ fontSize: 12, padding: '7px 12px' }}>
            <Icon.Search size={13}/> Buscar
          </button>
        </div>
        <div style={{
          background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden',
          padding: members.length === 0 ? '40px 20px' : 0,
        }}>
          {members.length === 0 ? (
            <div style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
              Conectá tu clan vía Discord para ver tu roster real.
            </div>
          ) : members.map((m, i) => (
            <div key={m.n} style={{
              display: 'grid', gridTemplateColumns: '32px 1fr auto auto', gap: 14, alignItems: 'center',
              padding: '11px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--border)',
            }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--surface-3)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 11, color: 'var(--text-dim)' }}>{m.n[0].toUpperCase()}</div>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{m.n}</span>
              <RankBadge phase={m.p} tier={m.t} subtier={m.s}/>
              <Icon.ChevronDown size={14} style={{ color: 'var(--text-muted)' }}/>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (tab === 'applicants') {
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Postulaciones · 7 pendientes</div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>.p1applicant accept / reject — o usar los botones.</div>
          </div>
        </div>
        {/* FAKE-DATA-REMOVED: postulaciones reales vienen de /api/dashboard/clans/:id/applicants */}
        {[].map((a, i) => (
          <div key={a.n} style={{
            display: 'grid', gridTemplateColumns: '36px 1fr auto auto', gap: 14, alignItems: 'center',
            padding: '14px 16px',
            background: 'var(--surface-2)',
            border: '1px solid var(--border)',
            borderRadius: 10, marginBottom: 10,
          }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 12 }}>{a.n[0].toUpperCase()}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{a.n} <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', marginLeft: 6 }}>{a.hub}</span></div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{a.exp}</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>hace {a.when}</span>
            <div style={{ display: 'flex', gap: 6 }}>
              <button style={{ padding: '6px 10px', background: 'var(--live)', border: 'none', borderRadius: 6, color: 'white', fontSize: 11, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                <Icon.Check size={12}/> Aceptar
              </button>
              <button style={{ padding: '6px 10px', background: 'transparent', border: '1px solid var(--border-strong)', borderRadius: 6, color: 'var(--text-dim)', fontSize: 11, fontWeight: 500, cursor: 'pointer' }}>
                Rechazar
              </button>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (tab === 'tiers') {
    return (
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Asignar rango · @&lt;miembro&gt;</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4, marginBottom: 24 }}>
          Equivalente a <span className="mono" style={{ color: 'var(--text-dim)' }}>.phase 4 mid strong @miembro</span>
        </div>
        <div style={{
          padding: 28, background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 14,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22,
        }}>
          <RankBadge phase={4} tier="M" subtier="S" large/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 380 }}>
            <RangeRow label="Phase" options={[0,1,2,3,4,5]} value={4} onChange={() => {}} mono/>
            <RangeRow label="Tier"  options={['H','M','L']} value="M" onChange={() => {}} renderLabel={v => TIER_NAME[v]}/>
            <RangeRow label="Subtier" options={['S','T','W']} value="S" onChange={() => {}} renderLabel={v => SUB_NAME[v]}/>
          </div>
          <button style={{ padding: '10px 18px', background: 'var(--text)', color: 'var(--bg)', border: 'none', borderRadius: 8, fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
            Aplicar y notificar
          </button>
        </div>
      </div>
    );
  }
  if (tab === 'alliances') {
    return (
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 16 }}>Alianzas</div>
        <div style={{ padding: '40px 20px', textAlign: 'center', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, color: 'var(--text-muted)', fontSize: 13 }}>
          Sin alianzas registradas. Coordinar pactos con otros clanes desde Discord.
        </div>
      </div>
    );
  }
  if (tab === 'torneos') {
    return (
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 4 }}>Torneos del clan</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 18 }}>Lista en vivo desde el bot</div>
        <div style={{ padding: '40px 20px', textAlign: 'center', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, color: 'var(--text-muted)', fontSize: 13 }}>
          Sin torneos próximos. Cuando se abra inscripción, aparecerá acá.
        </div>
      </div>
    );
  }
  if (tab === 'sancion') {
    return (
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 18 }}>Sanciones del clan</div>
        <div style={{ padding: 28, textAlign: 'center', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12 }}>
          <Icon.Shield size={26} style={{ color: 'var(--live)', margin: '0 auto 12px' }}/>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Estado del clan</div>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 6, maxWidth: 320, margin: '6px auto 0' }}>
            Las sanciones reales se sincronizan desde el bot. Conectá tu clan via Discord.
          </div>
        </div>
      </div>
    );
  }
  return null;
}

Object.assign(window, { RankBadge, RankSystem, ClanLeaderPreview });