// site-jogador/js/gz-botao.jsx
//
// PADRAO DE BOTAO DO PROJECT GEN Z — a diretriz de hover do site.
//
// Antes disto o site tinha 84 clicaveis e no maximo metade reagia ao mouse; o
// melhor hover que existia era um brilho de sombra sem movimento nenhum, e o
// resto trocava de cor no susto, sem transicao. Cada botao reimplementava (ou
// esquecia) o proprio hover com onMouseEnter/onMouseLeave.
//
// ─────────────────────────────────────────────────────────────────────────
// COMO USAR
//
//   1) BOTAO NOVO -> use o componente, que ja vem com pele e comportamento:
//        <GZBotao variante="primario" onClick={...}>ADQUIRIR</GZBotao>
//        <GZBotao variante="discord" href="https://discord.gg/..." novaAba>
//          ENTRAR NO DISCORD
//        </GZBotao>
//
//   2) BOTAO QUE JA EXISTE e voce NAO quer mexer no visual -> so a classe de
//      comportamento, que nao pinta nada:
//        <button className="gzb" style={{ ...o estilo que ja estava la }}>
//
// ─────────────────────────────────────────────────────────────────────────
// POR QUE SAO DUAS CLASSES SEPARADAS
//
//   `.gzb`          = COMPORTAMENTO. Erguer, varredura de luz, afundar ao
//                        clicar, anel de foco, estado desabilitado. NAO define
//                        cor, fonte nem display — entao pode ser jogada em
//                        qualquer clicavel existente sem mudar como ele parece.
//   `.gzb--<pele>`  = APARENCIA. Cor de fundo, texto, borda, canto chanfrado.
//
//   Essa divisao e o que torna possivel padronizar 84 clicaveis sem redesenhar
//   84 botoes. O estilo inline de cada um continua mandando na aparencia; a
//   classe so acrescenta a reacao ao mouse.
//
// ─────────────────────────────────────────────────────────────────────────
// A COR DO BRILHO segue o botao, via a variavel `--gz-glow`. O padrao e o lima
// da marca; um botao de outra cor declara a sua:
//        style={{ '--gz-glow': 'rgba(88,101,242,.45)' }}
//
// ACESSIBILIDADE: o mesmo realce vale pra `:focus-visible`, entao quem navega
// por teclado ve exatamente o que quem usa mouse ve. E `prefers-reduced-motion`
// desliga movimento e varredura num lugar so, mantendo a mudanca de cor.

const GZ_BTN_CSS = `
.gzb{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* a cor do brilho pode ser trocada por botao */
  --gz-glow: rgba(168,255,0,.42);
  --gz-glow-forte: rgba(168,255,0,.60);
  transition:
    transform .18s cubic-bezier(.2,.7,.3,1),
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease;
}

/* a lamina de luz que atravessa uma vez. Fica no ::after pra nao precisar de
   nenhum no extra no JSX — assim a classe entra em botao que ja existe. */
.gzb::after{
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.gzb:hover::after,
.gzb:focus-visible::after{ animation: gzbVarredura .55s ease-out; }
@keyframes gzbVarredura{
  from{ left: -70%; opacity: 1; }
  to  { left: 125%; opacity: 0; }
}

.gzb:hover,
.gzb:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 26px var(--gz-glow), 0 0 0 1px var(--gz-glow-forte);
}
/* afunda ao clicar — o toque que faz o botao parecer fisico */
.gzb:active{
  transform: translateY(0) scale(.985);
  transition-duration: .06s;
}

/* teclado: alem do realce, um anel que aparece SO pra quem navega sem mouse */
.gzb:focus-visible{
  outline: 2px solid var(--gz-glow-forte);
  outline-offset: 3px;
}

.gzb:disabled,
.gzb[aria-disabled="true"],
.gzb[data-desabilitado="true"]{
  cursor: not-allowed;
  opacity: .45;
  transform: none !important;
  box-shadow: none !important;
}
.gzb:disabled::after,
.gzb[aria-disabled="true"]::after,
.gzb[data-desabilitado="true"]::after{ animation: none !important; }

/* ── PELES ───────────────────────────────────────────────────────────── */
.gzb--base{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  /* o canto chanfrado que o site ja usava nos CTAs */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.gzb--p{ font-size: 12px; padding: 8px 16px; }
.gzb--m{ font-size: 15px; padding: 14px 32px; }
.gzb--g{ font-size: 17px; padding: 17px 40px; }

.gzb--primario{ background: #a8ff00; color: #111; border-color: #a8ff00; }
.gzb--primario:hover{ background: #b8ff2b; }

.gzb--secundario{
  background: transparent; color: #fff; border-color: rgba(255,255,255,.18);
}
.gzb--secundario:hover{ color: #a8ff00; border-color: #a8ff00; }

.gzb--sutil{
  background: transparent; color: rgba(255,255,255,.6); border-color: transparent;
  --gz-glow: rgba(168,255,0,.16); --gz-glow-forte: rgba(168,255,0,.28);
}
.gzb--sutil:hover{ color: #a8ff00; background: rgba(168,255,0,.07); }

.gzb--discord{
  background: #5865f2; color: #fff; border-color: #5865f2;
  --gz-glow: rgba(88,101,242,.45); --gz-glow-forte: rgba(88,101,242,.65);
}
.gzb--discord:hover{ background: #6b76f5; }

.gzb--perigo{
  background: transparent; color: #ef4444; border-color: rgba(239,68,68,.4);
  --gz-glow: rgba(239,68,68,.32); --gz-glow-forte: rgba(239,68,68,.5);
}
.gzb--perigo:hover{ color: #ff6b6b; border-color: #ef4444; }

/* Quem pediu menos movimento recebe menos movimento — num lugar so, valendo
   pros 84 clicaveis de uma vez. A mudanca de cor FICA: tirar todo o feedback
   deixaria o botao morto pra quem depende dessa preferencia. */
@media (prefers-reduced-motion: reduce){
  .gzb{ transition: box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
  .gzb:hover, .gzb:focus-visible, .gzb:active{ transform: none; }
  .gzb::after{ display: none; }
}
`;

// injeta UMA vez, mesmo que varios componentes montem (o site nao tem build step)
(function gzbInstalarCSS() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('gzb-css')) return;
  const el = document.createElement('style');
  el.id = 'gzb-css';
  el.textContent = GZ_BTN_CSS;
  document.head.appendChild(el);
})();

function GZBotao({
  variante = 'primario',
  tamanho = 'm',
  href,
  novaAba = false,
  como,
  className = '',
  style,
  desabilitado = false,
  children,
  ...resto
}) {
  const Tag = como || (href ? 'a' : 'button');
  const classes = ['gzb', 'gzb--base', `gzb--${tamanho}`, `gzb--${variante}`, className]
    .filter(Boolean).join(' ');

  const props = { className: classes, style, ...resto };
  if (Tag === 'a') {
    props.href = desabilitado ? undefined : href;
    if (novaAba) { props.target = '_blank'; props.rel = 'noopener noreferrer'; }
    // <a> nao tem `disabled`: sem isso um link desabilitado continua clicavel
    if (desabilitado) props['aria-disabled'] = 'true';
  } else {
    props.type = resto.type || 'button';
    props.disabled = desabilitado;
  }
  return React.createElement(Tag, props, children);
}

Object.assign(window, { GZBotao, GZ_BTN_CSS });