<section class="section container" style="display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 100px); padding: 40px 0;" data-anim="fade" data-delay="1">
  <div class="form-container" style="max-width: 550px;" data-anim="scale" data-delay="2">
    <h2 class="form-title" data-anim="up" data-delay="2">Daftar Akun</h2>
    <p class="form-subtitle" data-anim="up" data-delay="3">Buat akun untuk bergabung dengan ribuan player Mobile Legends lainnya.</p>

    <!-- Error Alert Container -->
    <div id="error-alert" class="alert alert-danger" style="display: <%= typeof error !== 'undefined' && error ? 'flex' : 'none' %>;" data-anim="up" data-delay="4">
      <i class="fa-solid fa-triangle-exclamation"></i> <span id="error-msg"><%= typeof error !== 'undefined' && error ? error : '' %></span>
    </div>

    <form action="/auth/register" method="POST" data-anim="up" data-delay="4">
      <div class="form-group">
        <label class="form-label" for="username">Username In-Game / Panggilan</label>
        <input type="text" id="username" name="username" class="form-input" placeholder="e.g. GusionGamer" maxlength="16" pattern="[A-Za-z0-9]{1,16}" required>
      </div>

      <div class="form-row" style="display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px; margin-bottom: 20px;">
        <div class="form-group" style="margin-bottom: 0;">
          <label class="form-label" for="mlId">ID Mobile Legends</label>
          <input type="number" id="mlId" name="mlId" class="form-input" placeholder="e.g. 123456789" required>
        </div>
        <div class="form-group" style="margin-bottom: 0;">
          <label class="form-label" for="mlServer">Server ID</label>
          <input type="text" id="mlServer" name="mlServer" class="form-input" placeholder="e.g. 2345" required>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label" for="mlRole">Role Utama Anda</label>
        <select id="mlRole" name="mlRole" class="form-select" required>
          <option value="" disabled selected>Pilih Role Utama</option>
          <option value="EXP">EXP</option>
          <option value="MID">MID</option>
          <option value="GOLD">GOLD</option>
          <option value="ROAM">ROAM</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label" for="whatsapp">Nomor WhatsApp Aktif</label>
        <input type="tel" id="whatsapp" name="whatsapp" class="form-input" placeholder="e.g. 082260275385" required>
        <small style="color: var(--text-muted); font-size: 0.8rem; margin-top: 5px; display: block;">Digunakan admin untuk koordinasi masuk lobby game.</small>
      </div>

      <div class="form-group">
        <label class="form-label" for="email">Alamat Email</label>
        <input type="email" id="email" name="email" class="form-input" placeholder="name@domain.com" required>
      </div>

      <div class="form-group" style="margin-bottom: 25px;">
        <label class="form-label" for="password">Kata Sandi</label>
        <input type="password" id="password" name="password" class="form-input" placeholder="Minimal 6 karakter" minlength="6" required>
      </div>

      <button type="submit" class="btn btn-primary form-btn">Daftar Akun Baru</button>
      <div style="margin-top: 10px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5;">
        Dengan ini saya menyetujui <a href="/tos" class="form-link">Syarat &amp; Ketentuan</a> dan
        <a href="/privacy" class="form-link">Kebijakan Privasi</a> Yonpedia.
      </div>
      <div class="trust-note" data-anim="up" data-delay="6">
        <div class="trust-title"><i class="fa-solid fa-shield-halved"></i> Firebase Authentication</div>
        <div style="color: var(--text-muted);">
          Data sensitif (email &amp; password) dikelola oleh Firebase Authentication. Yonpedia tidak menyimpan password Anda dalam bentuk terbaca dan hanya menggunakan data seperlunya untuk menjalankan layanan.
        </div>
      </div>
    </form>

    <div class="form-footer">
      Sudah memiliki akun? <a href="/auth/login" class="form-link">Masuk</a>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const errorMsg = urlParams.get('error');
    if (errorMsg) {
      document.getElementById('error-alert').style.display = 'flex';
      document.getElementById('error-msg').textContent = errorMsg;
    }
  });
</script>
