// Pummel Tale — Ranking, Download, News, Footer
const RANK_DATA = {
  level: [
    { name: "Mordregar", cls: "Knight", lvl: 187, kills: 2418, clan: "Ashen Crown" },
    { name: "Vesperia",  cls: "Mechanician", lvl: 184, kills: 1902, clan: "Ashen Crown" },
    { name: "Korvath",   cls: "Pikeman", lvl: 182, kills: 2104, clan: "Black Sigil" },
    { name: "Sylanna",   cls: "Atalanta", lvl: 178, kills: 1322, clan: "Moonveil" },
    { name: "Drakhul",   cls: "Magician", lvl: 176, kills: 1810, clan: "Black Sigil" },
    { name: "Iremara",   cls: "Priestess", lvl: 174, kills:  984, clan: "Moonveil" },
    { name: "Bastion",   cls: "Knight", lvl: 172, kills: 1633, clan: "Ironhold" },
    { name: "Nyxara",    cls: "Assassin", lvl: 170, kills: 2890, clan: "Black Sigil" },
    { name: "Velgrum",   cls: "Fighter", lvl: 169, kills: 1419, clan: "Ironhold" },
    { name: "Throndir",  cls: "Pikeman", lvl: 167, kills: 1101, clan: "Ashen Crown" },
  ],
};

function Ranking() {
  const [tab, setTab] = React.useState("level");
  const data = RANK_DATA.level; // shared for all in this demo, different sort makes them "different"
  const sorted = tab === "level" ? data : tab === "pvp"
    ? [...data].sort((a,b) => b.kills - a.kills)
    : [...data].sort((a,b) => a.clan.localeCompare(b.clan));
  const podium = sorted.slice(0, 3);
  const list = sorted.slice(3);

  return (
    <section id="ranking" className="section">
      <div className="section-head">
        <div className="eyebrow">season iii · awaken</div>
        <h2>Ranking</h2>
        <div className="ornament">
          <span className="line"></span>
          <Icons.Crown size={12}/>
          <span className="line"></span>
        </div>
        <p>Os campeões da temporada. Atualizado a cada 10 minutos.</p>
      </div>

      <div className="rank-tabs">
        <button className={`rank-tab ${tab === "level" ? "active" : ""}`} onClick={() => setTab("level")}>Top Level</button>
        <button className={`rank-tab ${tab === "pvp" ? "active" : ""}`} onClick={() => setTab("pvp")}>Top PvP</button>
        <button className={`rank-tab ${tab === "clan" ? "active" : ""}`} onClick={() => setTab("clan")}>Top Clãs</button>
      </div>

      <div className="rank-table">
        <div className="rank-podium">
          {podium.map((p, i) => (
            <div key={p.name} className={`podium-card ${["gold","silver","bronze"][i]}`}>
              <div className="podium-rank">{i + 1}</div>
              <div className="podium-avatar">{p.name[0]}</div>
              <div className="podium-name">{p.name}</div>
              <div className="podium-class">{p.cls} · {p.clan}</div>
              <div className="podium-meta">
                <div>Lv. <b>{p.lvl}</b></div>
                <div>K <b>{p.kills.toLocaleString("pt-BR")}</b></div>
              </div>
            </div>
          ))}
        </div>

        <div className="rank-head">
          <div>#</div>
          <div>Personagem</div>
          <div>Classe</div>
          <div>Nível</div>
          <div className="col-pvp">PvP</div>
          <div className="col-clan">Clã</div>
        </div>
        <div className="rank-list">
          {list.map((p, i) => (
            <div key={p.name} className="rank-row">
              <div className="pos">{String(i + 4).padStart(2, "0")}</div>
              <div className="who">
                <div className="avatar">{p.name[0]}</div>
                <div className="name">{p.name}</div>
              </div>
              <div className="class">{p.cls}</div>
              <div className="num">{p.lvl}</div>
              <div className="num muted col-pvp">{p.kills.toLocaleString("pt-BR")}</div>
              <div className="num muted col-clan">{p.clan}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Download() {
  return (
    <section id="download" className="section">
      <div className="section-head">
        <div className="eyebrow">cliente oficial</div>
        <h2>Download &amp; Instalação</h2>
        <div className="ornament">
          <span className="line"></span>
          <Icons.Download size={12}/>
          <span className="line"></span>
        </div>
      </div>

      <div className="download-grid">
        <div className="download-main">
          <h3>Cliente Completo</h3>
          <p>Tudo em um único instalador. Patches automáticos via launcher, sem necessidade de configuração manual. Compatível com Windows 10 e 11.</p>
          <div className="download-options">
            <button className="btn btn-primary">
              <span className="glint"></span>
              <Icons.Download size={14}/>
              Download Completo · 4.2 GB
            </button>
            <button className="btn btn-ghost">
              <Icons.Bolt size={14}/>
              Apenas Patch · 280 MB
            </button>
          </div>
          <div className="download-version">
            <div>
              <div className="v-label">Versão Atual</div>
              <div className="v-version">3.4.1 · AWAKEN</div>
            </div>
            <div className="v-size">Atualizado 22.05.2026</div>
          </div>
          <div className="download-version">
            <div>
              <div className="v-label">Mirror</div>
              <div className="v-version">Mega · Mediafire · Torrent</div>
            </div>
            <div className="v-size">Servers BR + EU</div>
          </div>
        </div>

        <div className="download-side">
          <div className="download-card">
            <h4>Requisitos Mínimos</h4>
            <ul className="req-list">
              <li><span>OS</span><span>Windows 10 / 11 (64-bit)</span></li>
              <li><span>CPU</span><span>Intel i3-6100 ou equivalente</span></li>
              <li><span>RAM</span><span>4 GB</span></li>
              <li><span>GPU</span><span>GTX 750 / Radeon RX 460</span></li>
              <li><span>Disco</span><span>8 GB livres</span></li>
              <li><span>Net</span><span>Conexão estável 5 Mbps</span></li>
            </ul>
          </div>

          <div className="download-card">
            <h4>Tutorial Rápido</h4>
            <div className="tutorial-steps">
              <div className="tutorial-step"><span className="num">1</span><span>Baixe o cliente completo e extraia em uma pasta sem caracteres especiais.</span></div>
              <div className="tutorial-step"><span className="num">2</span><span>Execute o <b>Launcher.exe</b> como administrador na primeira inicialização.</span></div>
              <div className="tutorial-step"><span className="num">3</span><span>Crie sua conta no <b>Cadastro</b> ou faça login no Painel.</span></div>
              <div className="tutorial-step"><span className="num">4</span><span>Aceite as atualizações automáticas e clique em <b>Iniciar Jogo</b>.</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const NEWS = [
  { cat: "Update", catCls: "update", date: "22.05.2026", title: "Season III · Awaken começou", body: "Nova temporada com 4 receitas inéditas de Mix, balanceamento de classes e o retorno do boss Karuk após dois anos de ausência.", featured: true, alt: "Hero key art · Season III" },
  { cat: "Evento", catCls: "event", date: "18.05.2026", title: "Pearl Raid · Sábado 22h", body: "Recompensas em dobro durante o fim de semana para todos os clãs aliados.", alt: "Event banner · Pearl Raid" },
  { cat: "Patch", catCls: "patch", date: "15.05.2026", title: "Patch 3.4.1 · Ajustes finais", body: "Correção de bugs no aging +10, ajuste de drop de Bellatra e novos retratos.", alt: "Patch notes art" },
  { cat: "Update", catCls: "update", date: "10.05.2026", title: "Clãs ganham base instanciada", body: "Cada clã agora possui um salão privado com baú compartilhado e bônus de farm coletivo.", alt: "Clan hall preview" },
  { cat: "Evento", catCls: "event", date: "05.05.2026", title: "Torneio de Arena 3v3", body: "Inscrições abertas. Premiação total: 2.500 Pummel Coins distribuídos entre os top 8.", alt: "Arena art" },
];

function News() {
  return (
    <section id="news" className="section">
      <div className="section-head">
        <div className="eyebrow">notícias &amp; eventos</div>
        <h2>Últimas do Reino</h2>
        <div className="ornament">
          <span className="line"></span>
          <Icons.Banner size={12}/>
          <span className="line"></span>
        </div>
      </div>

      <div className="news-grid">
        {NEWS.map((n, i) => (
          <article key={n.title} className={`news-card ${i === 0 ? "featured" : ""}`}>
            <div className="news-img">
              <span className={`news-cat ${n.catCls}`}>{n.cat}</span>
              <div className="news-img-placeholder">
                <strong>// {n.cat.toUpperCase()}</strong>
                {n.alt}
              </div>
            </div>
            <div className="news-body">
              <div className="news-date">{n.date}</div>
              <h4>{n.title}</h4>
              <p>{n.body}</p>
              <a className="news-more" href="#"  onClick={(e)=>e.preventDefault()}>
                Ler Mais <Icons.Arrow size={12}/>
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand">
              <BrandMark size={42}/>
              <div>
                <div className="brand-name">Pummel Tale</div>
                <span className="brand-tag">Season III · Awaken</span>
              </div>
            </div>
            <p>Servidor privado de Priston Tale focado em economia balanceada, endgame competitivo e uma comunidade ativa. Fundado em 2023, mantido pela própria comunidade.</p>
            <div className="socials">
              <a className="social-link" href="#" onClick={(e)=>e.preventDefault()} aria-label="Discord"><Icons.Discord/></a>
              <a className="social-link" href="#" onClick={(e)=>e.preventDefault()} aria-label="Youtube"><Icons.Youtube/></a>
              <a className="social-link" href="#" onClick={(e)=>e.preventDefault()} aria-label="Twitch"><Icons.Twitch/></a>
              <a className="social-link" href="#" onClick={(e)=>e.preventDefault()} aria-label="X"><Icons.Twitter/></a>
            </div>
          </div>
          <div>
            <h5>Servidor</h5>
            <ul className="footer-links">
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Cadastro</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Painel do Jogador</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Status Online</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Lojinha</a></li>
            </ul>
          </div>
          <div>
            <h5>Comunidade</h5>
            <ul className="footer-links">
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Discord Oficial</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Fórum</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Wiki Pummel</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Tier List</a></li>
            </ul>
          </div>
          <div>
            <h5>Suporte</h5>
            <ul className="footer-links">
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Regras</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>FAQ</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Recuperar Conta</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>Contato Staff</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Pummel Tale · Fan project. Not affiliated with the original IP.</div>
          <div>Forged for the persistent · v3.4.1</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Ranking, Download, News, Footer });