// Pummel Tale — Cadastro page
const { useState, useEffect, useRef, useMemo } = React;

// Tweaks defaults (persisted via host)
const CADASTRO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blood",
  "particles": true,
  "particleDensity": 50,
  "glint": true
}/*EDITMODE-END*/;

const CADASTRO_ACCENT_PALETTES = {
  blood:   { blood: "#a31d22", bloodBright: "#d63a3f" },
  arcane:  { blood: "#3a4fa3", bloodBright: "#5b8fd4" },
  emerald: { blood: "#1f6e4a", bloodBright: "#3aa07a" },
  void:    { blood: "#5a2a8a", bloodBright: "#8a4fc2" },
};

// ----- header (lightweight, links back to main) -----
function RegHeader() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [authUser, setAuthUser] = useState(null);
  const apiBaseUrl = window.location.protocol === "file:" || ["localhost", "127.0.0.1"].includes(window.location.hostname)
    ? "http://127.0.0.1:3001"
    : "";
  const nav = [
    { id: "home", label: "Início", href: "index.html" },
    { id: "download", label: "Download", href: "index.html#download" },
    { id: "ranking", label: "Ranking", href: "index.html#ranking" },
    { id: "mix", label: "Sistema Mix", href: "index.html#mix" },
    { id: "news", label: "Notícias", href: "index.html#news" },
    { id: "register", label: "Cadastro", href: "cadastro.html", active: true },
    { id: "donate", label: "Doação", href: "doacao.html" },
  ];
  useEffect(() => {
    let active = true;

    async function loadAuthUser() {
      try {
        const response = await fetch(`${apiBaseUrl}/api/auth/me`, {
          credentials: "include",
          headers: { "Accept": "application/json" },
        });
        const data = await response.json().catch(() => ({}));
        if (active && response.ok && data.ok) setAuthUser(data.user);
      } catch (_) {}
    }

    loadAuthUser();
    return () => { active = false; };
  }, [apiBaseUrl]);

  return (
    <React.Fragment>
    <header className="header">
      <a href="index.html" className="brand">
        <BrandMark/>
        <div>
          <div className="brand-name">Pummel Tale</div>
          <span className="brand-tag">Season III · Awaken</span>
        </div>
      </a>
      <nav className="nav">
        {nav.map(n => (
          <a key={n.id} href={n.href} className={n.active ? "active" : ""}>{n.label}</a>
        ))}
      </nav>
      <div className="header-spacer"></div>
      <div className="header-actions">
        <a className="discord-btn" href="#discord" onClick={(e)=>e.preventDefault()}>
          <Icons.Discord size={14}/>
          <span>Discord</span>
        </a>
        {authUser
          ? <a className="login-btn" href="painel.html">Painel</a>
          : <a className="login-btn" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("open-login")); }}>Entrar</a>}
        <button className="menu-btn" aria-label="Menu" onClick={() => setMenuOpen(o => !o)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            {menuOpen
              ? <path d="M6 6l12 12M18 6l-12 12"/>
              : <path d="M4 7h16M4 12h16M4 17h16"/>}
          </svg>
        </button>
      </div>
    </header>
    <div className={`mobile-nav ${menuOpen ? "open" : ""}`}>
      {nav.map(n => (
        <a key={n.id} href={n.href} className={n.active ? "active" : ""} onClick={() => setMenuOpen(false)}>{n.label}</a>
      ))}
      {authUser
        ? <a href="painel.html" onClick={() => setMenuOpen(false)}>Painel</a>
        : <a href="#" onClick={(e) => { e.preventDefault(); setMenuOpen(false); window.dispatchEvent(new Event("open-login")); }}>Entrar</a>}
    </div>
    </React.Fragment>
  );
}

// ----- captcha generator -----
function genCaptcha() {
  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
  let s = "";
  for (let i = 0; i < 5; i++) s += chars[Math.floor(Math.random() * chars.length)];
  return s;
}

// ----- password rules -----
function pwRules(pw) {
  return {
    len: pw.length >= 8,
    upper: /[A-Z]/.test(pw),
    num: /\d/.test(pw),
    sym: /[^A-Za-z0-9]/.test(pw) || pw.length >= 12,
  };
}
function pwScore(pw) {
  const r = pwRules(pw);
  return Object.values(r).filter(Boolean).length;
}

// ----- input field component -----
function Field({ icon, label, type = "text", value, onChange, placeholder, required, error, valid, hint, children, autoComplete }) {
  const [focused, setFocused] = useState(false);
  const IconComp = Icons[icon];
  const cls = ["field-input-wrap", focused && "focused", error && "error", valid && !error && "valid"].filter(Boolean).join(" ");
  return (
    <div className="field-group">
      <div className="field-label">
        <span>{label}</span>
        {required && <span className="req">*</span>}
      </div>
      <div className={cls}>
        <div className="field-icon"><IconComp/></div>
        <input
          className="field-input"
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          autoComplete={autoComplete}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        />
        {children}
      </div>
      {error
        ? <div className="field-msg error"><Icons.Alert/><span>{error}</span></div>
        : valid
        ? <div className="field-msg valid"><Icons.Check/><span>{valid}</span></div>
        : hint
        ? <div className="field-msg"><span>{hint}</span></div>
        : <div className="field-msg"></div>}
    </div>
  );
}

// ----- main form -----
function CadastroForm() {
  const [form, setForm] = useState({
    username: "", email: "", password: "", confirm: "", captcha: "", terms: false,
  });
  const [showPw, setShowPw] = useState(false);
  const [showPw2, setShowPw2] = useState(false);
  const [touched, setTouched] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(null);
  const [formError, setFormError] = useState("");
  const [captcha, setCaptcha] = useState(() => genCaptcha());
  const [usernameStatus, setUsernameStatus] = useState({ state: "idle", username: "" });
  const registerApiUrl = window.REGISTER_API_URL || "/api/register";
  const checkUsernameApiUrl = window.CHECK_USERNAME_API_URL || registerApiUrl.replace(/\/register$/, "/check-username");

  const set = (k, v) => {
    setFormError("");
    setForm(f => ({ ...f, [k]: v }));
  };
  const mark = (k) => setTouched(t => ({ ...t, [k]: true }));

  // validation
  const errors = useMemo(() => {
    const e = {};
    if (touched.username) {
      if (!form.username) e.username = "Nome de usuário obrigatório.";
      else if (form.username.length < 4) e.username = "Mínimo 4 caracteres.";
      else if (!/^[A-Za-z0-9_]+$/.test(form.username)) e.username = "Apenas letras, números e _.";
      else if (form.username.length > 20) e.username = "Máximo 20 caracteres.";
    }
    if (touched.email) {
      if (!form.email) e.email = "E-mail obrigatório.";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "E-mail inválido.";
    }
    if (touched.password) {
      if (!form.password) e.password = "Senha obrigatória.";
      else if (form.password.length < 8) e.password = "Mínimo 8 caracteres.";
    }
    if (touched.confirm) {
      if (!form.confirm) e.confirm = "Confirme sua senha.";
      else if (form.confirm !== form.password) e.confirm = "As senhas não coincidem.";
    }
    if (touched.captcha) {
      if (!form.captcha) e.captcha = "Digite o código de segurança.";
      else if (form.captcha.trim().toUpperCase() !== captcha) e.captcha = "Código incorreto.";
    }
    if (touched.username && !e.username && usernameStatus.username === form.username.trim()) {
      if (usernameStatus.state === "taken") e.username = "Usuário já existe.";
      if (usernameStatus.state === "error") e.username = "Não foi possível verificar o usuário.";
    }
    return e;
  }, [form, touched, captcha, usernameStatus]);

  const valids = useMemo(() => {
    const v = {};
    if (touched.username && !errors.username && usernameStatus.state === "checking") v.username = "Verificando...";
    else if (touched.username && !errors.username && usernameStatus.state === "available" && usernameStatus.username === form.username.trim()) v.username = "Disponível.";
    if (touched.email && !errors.email && form.email) v.email = "Válido.";
    if (touched.confirm && !errors.confirm && form.confirm) v.confirm = "Senhas coincidem.";
    if (touched.captcha && !errors.captcha && form.captcha) v.captcha = "Verificado.";
    return v;
  }, [form, touched, errors, usernameStatus]);

  const allValid =
    form.username && form.email && form.password && form.confirm &&
    form.captcha && form.terms &&
    usernameStatus.state === "available" &&
    usernameStatus.username === form.username.trim() &&
    Object.keys(errors).length === 0 &&
    form.confirm === form.password &&
    form.captcha.trim().toUpperCase() === captcha &&
    pwScore(form.password) >= 2;

  const pwR = pwRules(form.password);
  const pwS = pwScore(form.password);

  useEffect(() => {
    const username = form.username.trim();
    if (!touched.username || !/^[A-Za-z0-9_]{4,20}$/.test(username)) {
      setUsernameStatus({ state: "idle", username });
      return;
    }

    const controller = new AbortController();
    const timer = window.setTimeout(async () => {
      setUsernameStatus({ state: "checking", username });
      try {
        const response = await fetch(checkUsernameApiUrl, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ username }),
          signal: controller.signal,
        });
        const data = await response.json().catch(() => ({}));
        if (!response.ok || !data.ok) {
          setUsernameStatus({ state: "error", username });
          return;
        }
        setUsernameStatus({ state: data.available ? "available" : "taken", username });
      } catch (error) {
        if (error.name !== "AbortError") {
          setUsernameStatus({ state: "error", username });
        }
      }
    }, 450);

    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [form.username, touched.username, checkUsernameApiUrl]);

  function apiMessage(code) {
    const messages = {
      USERNAME_EXISTS: "Usuário já existe.",
      EMAIL_EXISTS: "E-mail já existe.",
      INVALID_DATA: "Dados inválidos. Verifique os campos e tente novamente.",
      RATE_LIMITED: "Muitas tentativas. Tente novamente em alguns minutos.",
      TEMPORARY_ERROR: "Erro temporário. Tente novamente em instantes.",
    };

    return messages[code] || "Erro temporário. Tente novamente em instantes.";
  }

  async function submit(e) {
    e.preventDefault();
    setTouched({ username: true, email: true, password: true, confirm: true, captcha: true });
    setFormError("");
    const typedCaptcha = form.captcha.trim().toUpperCase();
    if (!typedCaptcha || typedCaptcha !== captcha) {
      setCaptcha(genCaptcha());
      set("captcha", "");
      return;
    }
    if (!allValid) {
      return;
    }
    setSubmitting(true);
    try {
      const response = await fetch(registerApiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          username: form.username.trim(),
          password: form.password,
          email: form.email.trim(),
        }),
      });
      const data = await response.json().catch(() => ({}));

      if (!response.ok || !data.ok) {
        setFormError(apiMessage(data.code));
        return;
      }

      setSuccess({
        username: data.user?.username || form.username.trim(),
        email: data.user?.email || form.email.trim(),
      });
    } catch (error) {
      setFormError("Erro temporário. Tente novamente em instantes.");
    } finally {
      setSubmitting(false);
    }
  }

  if (success) {
    return (
      <div className="form-card">
        <div className="fc-corner tl"></div>
        <div className="fc-corner tr"></div>
        <div className="fc-corner bl"></div>
        <div className="fc-corner br"></div>
        <div className="success-state">
          <div className="success-icon">
            <Icons.Check size={40}/>
          </div>
          <h2>Conta Criada</h2>
          <p>Bem-vindo ao Pummel Tale, <strong style={{color:"var(--gold-bright)"}}>{success.username}</strong>. Sua jornada começa agora — baixe o cliente e entre no servidor.</p>
          <div className="success-account">
            <span className="lbl">Usuário</span><span className="val">{success.username}</span>
            <span className="lbl">E-mail</span><span className="val">{success.email}</span>
            <span className="lbl">Server</span><span className="val">BR-01 · AWAKEN</span>
          </div>
          <div className="success-actions">
            <a className="btn btn-primary" href="index.html#download">
              <span className="glint"></span>
              <Icons.Download size={14}/>
              Baixar Cliente
            </a>
            <a className="btn btn-ghost" href="index.html">
              <Icons.Arrow size={14} style={{transform:"rotate(180deg)"}}/>
              Voltar ao Início
            </a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className="fc-corner tl"></div>
      <div className="fc-corner tr"></div>
      <div className="fc-corner bl"></div>
      <div className="fc-corner br"></div>

      <div className="form-eyebrow">// FORMULÁRIO · CRIAÇÃO DE CONTA</div>
      <h2>Dados do Aventureiro</h2>

      <Field
        icon="User"
        label="Nome de Usuário"
        placeholder="Ex.: Mordregar"
        required
        autoComplete="username"
        value={form.username}
        onChange={(v) => { set("username", v); mark("username"); }}
        error={errors.username}
        valid={valids.username}
        hint="4–16 caracteres, letras, números ou _"
      />

      <Field
        icon="Mail"
        label="E-mail"
        type="email"
        placeholder="seu@email.com"
        required
        autoComplete="email"
        value={form.email}
        onChange={(v) => { set("email", v); mark("email"); }}
        error={errors.email}
        valid={valids.email}
        hint="Usaremos para recuperação de conta."
      />

      <div className="form-row split">
        <Field
          icon="Lock"
          label="Senha"
          type={showPw ? "text" : "password"}
          placeholder="••••••••"
          required
          autoComplete="new-password"
          value={form.password}
          onChange={(v) => { set("password", v); mark("password"); }}
          error={errors.password}
          hint=" "
        >
          <button type="button" className="field-toggle" onClick={() => setShowPw(s => !s)} aria-label="Mostrar senha">
            {showPw ? <Icons.EyeOff/> : <Icons.Eye/>}
          </button>
        </Field>

        <Field
          icon="Lock"
          label="Confirmar Senha"
          type={showPw2 ? "text" : "password"}
          placeholder="••••••••"
          required
          autoComplete="new-password"
          value={form.confirm}
          onChange={(v) => { set("confirm", v); mark("confirm"); }}
          error={errors.confirm}
          valid={valids.confirm}
          hint=" "
        >
          <button type="button" className="field-toggle" onClick={() => setShowPw2(s => !s)} aria-label="Mostrar senha">
            {showPw2 ? <Icons.EyeOff/> : <Icons.Eye/>}
          </button>
        </Field>
      </div>

      {form.password && (
        <div style={{marginTop:"-10px", marginBottom:"18px"}}>
          <div className="pw-meter">
            <span className={pwS >= 1 ? "on-1" : ""}></span>
            <span className={pwS >= 2 ? "on-2" : ""}></span>
            <span className={pwS >= 3 ? "on-3" : ""}></span>
            <span className={pwS >= 4 ? "on-4" : ""}></span>
          </div>
          <ul className="pw-rules">
            <li className={pwR.len ? "met" : ""}><span className="dot"></span>8+ caracteres</li>
            <li className={pwR.upper ? "met" : ""}><span className="dot"></span>1 letra maiúscula</li>
            <li className={pwR.num ? "met" : ""}><span className="dot"></span>1 número</li>
            <li className={pwR.sym ? "met" : ""}><span className="dot"></span>1 símbolo ou 12+ caracteres</li>
          </ul>
        </div>
      )}

      <div className="field-group">
        <div className="field-label">
          <span>Código de Segurança</span>
          <span className="req">*</span>
        </div>
        <div className="captcha">
          <div className="captcha-art">
            <button type="button" className="captcha-reload" aria-label="Recarregar"
                    onClick={() => { setCaptcha(genCaptcha()); set("captcha", ""); }}>
              <Icons.Refresh/>
            </button>
            <span className="captcha-text">{captcha}</span>
          </div>
          <div className={"field-input-wrap" + (errors.captcha ? " error" : valids.captcha ? " valid" : "")}>
            <div className="field-icon"><Icons.Shield/></div>
            <input
              className="field-input"
              type="text"
              placeholder="Digite o código acima"
              maxLength={5}
              value={form.captcha}
              onChange={(e) => { set("captcha", e.target.value.toUpperCase()); mark("captcha"); }}
            />
          </div>
        </div>
        {errors.captcha
          ? <div className="field-msg error"><Icons.Alert/><span>{errors.captcha}</span></div>
          : valids.captcha
          ? <div className="field-msg valid"><Icons.Check/><span>{valids.captcha}</span></div>
          : <div className="field-msg"></div>}
      </div>

      <label className={"terms " + (form.terms ? "checked" : "")}>
        <input type="checkbox" checked={form.terms} onChange={(e) => set("terms", e.target.checked)}/>
        <span className="checkbox"><Icons.Check/></span>
        <span>
          Li e aceito os <a href="#" onClick={(e)=>e.preventDefault()}>Termos de Uso</a> e a <a href="#" onClick={(e)=>e.preventDefault()}>Política de Privacidade</a> do Pummel Tale. Reconheço que o servidor é um projeto de fã, sem afiliação à IP original.
        </span>
      </label>

      <div className="form-submit">
        {formError && (
          <div className="field-msg error" role="alert" style={{justifyContent:"center", marginBottom:"10px"}}>
            <Icons.Alert/><span>{formError}</span>
          </div>
        )}
        <button type="submit" className="btn btn-primary" disabled={submitting || (Object.keys(touched).length > 0 && !allValid)}>
          <span className="glint"></span>
          {submitting ? (
            <React.Fragment>
              <span className="spinner" style={{width:"14px",height:"14px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",display:"inline-block",animation:"spin 0.8s linear infinite"}}></span>
              Criando Conta…
            </React.Fragment>
          ) : (
            <React.Fragment>
              <Icons.Bolt size={14}/>
              Criar Conta
            </React.Fragment>
          )}
        </button>
        <div className="form-alt">
          Já tem conta? <a href="#">Entrar no painel</a>
        </div>
      </div>
    </form>
  );
}

function SidePanel() {
  const benefits = [
    { icon: "Globe", t: "Acesso Completo",   d: "Cliente oficial, todos os mapas e classes desbloqueados desde o nível 1." },
    { icon: "Calendar", t: "Eventos Diários", d: "Mais de 14 eventos automáticos por dia — Pearl Raid, Caos Hour e mais." },
    { icon: "Gem",   t: "Mix & Aging",       d: "Sistema exclusivo de receitas progressivas em três eras de poder." },
    { icon: "Trophy", t: "Ranking Competitivo", d: "Concorra ao topo de level, PvP e clãs em cada temporada." },
    { icon: "Banner", t: "Clãs & Guerras",   d: "Forme alianças, dispute territórios e enfrente bosses lendários." },
  ];
  return (
    <div className="side-stack">
      <div className="side-panel">
        <div className="sp-eyebrow">por que criar sua conta?</div>
        <h3>Forje seu lugar na lenda</h3>
        <ul className="benefits">
          {benefits.map(b => {
            const I = Icons[b.icon];
            return (
              <li key={b.t}>
                <div className="b-icon"><I/></div>
                <div className="b-text">
                  <strong>{b.t}</strong>
                  <span>{b.d}</span>
                </div>
              </li>
            );
          })}
        </ul>
      </div>

      <div className="stat-strip">
        <div>
          <div className="label">Players</div>
          <div className="value">1.847</div>
        </div>
        <div>
          <div className="label">Online Agora</div>
          <div className="value" style={{color:"#6dd99a"}}>842</div>
        </div>
        <div>
          <div className="label">Uptime</div>
          <div className="value">99.97%</div>
        </div>
      </div>

      <div className="side-panel" style={{textAlign:"center"}}>
        <div className="sp-eyebrow">precisa de ajuda?</div>
        <div style={{fontFamily:"var(--font-display)", fontSize:"15px", letterSpacing:"0.1em", color:"var(--ink)", marginBottom:"14px"}}>
          Nossa staff está no Discord, sempre online.
        </div>
        <a className="btn btn-ghost" href="#" onClick={(e)=>e.preventDefault()} style={{padding:"12px 22px", fontSize:"11px"}}>
          <Icons.Discord size={14}/>
          Discord Oficial
        </a>
      </div>
    </div>
  );
}

function PageFooter() {
  return (
    <div className="page-footer">
      <div>© 2026 Pummel Tale · Forged for the persistent</div>
      <div className="pf-links">
        <a href="index.html">Voltar ao Início</a>
        <a href="index.html#download">Download</a>
        <a href="#" onClick={(e)=>e.preventDefault()}>Discord</a>
        <a href="#" onClick={(e)=>e.preventDefault()}>Termos de Uso</a>
        <a href="#" onClick={(e)=>e.preventDefault()}>Privacidade</a>
      </div>
    </div>
  );
}

// ----- particles (reused from main) -----
function useRegParticles(canvasRef, count = 50) {
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf, w, h;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    function resize() {
      w = window.innerWidth; h = window.innerHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      canvas.style.width = w + "px"; canvas.style.height = h + "px";
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener("resize", resize);
    const ps = Array.from({ length: count }, () => ({
      x: Math.random() * w, y: Math.random() * h,
      r: Math.random() * 1.6 + 0.4,
      vx: (Math.random() - 0.5) * 0.12,
      vy: -(Math.random() * 0.22 + 0.05),
      a: Math.random() * 0.7 + 0.3,
      c: Math.random() > 0.75 ? "rgba(214,58,63,0.35)" : "rgba(200,153,90,0.45)",
      drift: Math.random() * Math.PI * 2,
    }));
    function frame(t) {
      ctx.clearRect(0, 0, w, h);
      for (const p of ps) {
        p.x += p.vx + Math.sin((t * 0.0005) + p.drift) * 0.08;
        p.y += p.vy;
        if (p.y < -10) { p.y = h + 10; p.x = Math.random() * w; }
        if (p.x < -10) p.x = w + 10;
        if (p.x > w + 10) p.x = -10;
        ctx.beginPath();
        ctx.fillStyle = p.c.replace(/[\d.]+\)$/, `${p.a})`);
        ctx.shadowBlur = 8; ctx.shadowColor = p.c;
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.shadowBlur = 0;
      raf = requestAnimationFrame(frame);
    }
    raf = requestAnimationFrame(frame);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, [count]);
}

function CadastroApp() {
  const canvasRef = useRef(null);
  const [tweaks, setTweak] = window.useTweaks(CADASTRO_TWEAK_DEFAULTS);

  useRegParticles(canvasRef, tweaks.particles ? tweaks.particleDensity : 0);

  // Apply accent palette
  useEffect(() => {
    const p = CADASTRO_ACCENT_PALETTES[tweaks.accent] || CADASTRO_ACCENT_PALETTES.blood;
    document.documentElement.style.setProperty("--blood", p.blood);
    document.documentElement.style.setProperty("--blood-bright", p.bloodBright);
  }, [tweaks.accent]);

  useEffect(() => {
    document.documentElement.classList.toggle("no-glint", !tweaks.glint);
  }, [tweaks.glint]);

  return (
    <div className="app">
      <RegHeader/>

      <div className="register-wrap">
        <div className="register-head">
          <div className="eyebrow-line">
            <span className="line"></span>
            <Icons.Diamond size={12}/>
            <span className="line"></span>
          </div>
          <div className="eyebrow">Junte-se ao reino</div>
          <h1>Criar Conta</h1>
          <p className="subtitle">Entre no mundo de Pummel Tale e comece sua jornada. Aging balanceado, mix exclusivo e endgame competitivo aguardam.</p>
        </div>

        <div className="register-grid">
          <CadastroForm/>
          <SidePanel/>
        </div>
      </div>

      <PageFooter/>

      <canvas id="particles" ref={canvasRef}></canvas>
      {window.LoginModal && <window.LoginModal/>}

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Theme">
          <window.TweakRadio
            label="Accent"
            value={tweaks.accent}
            options={[
              { value: "blood", label: "Blood" },
              { value: "arcane", label: "Arcane" },
              { value: "emerald", label: "Emerald" },
              { value: "void", label: "Void" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Atmosphere">
          <window.TweakToggle label="Particles"     value={tweaks.particles}        onChange={(v) => setTweak("particles", v)}/>
          <window.TweakSlider label="Density"       value={tweaks.particleDensity}  min={0} max={140} step={5} onChange={(v) => setTweak("particleDensity", v)}/>
          <window.TweakToggle label="Button Glint"  value={tweaks.glint}            onChange={(v) => setTweak("glint", v)}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

const regRoot = ReactDOM.createRoot(document.getElementById("root"));
regRoot.render(<CadastroApp/>);