<%- include('partials/header') %>

<!-- HERO BANNER -->
<section style="background: linear-gradient(135deg, var(--primary-navy-dark) 0%, var(--primary-navy) 100%); color: #FFFFFF; padding: 4rem 0 3rem 0;">
  <div class="container text-center">
    <span class="section-tag" style="background: rgba(255,255,255,0.1); color: var(--accent-gold);"><i class="fa-solid fa-paper-plane"></i> <%= t.ppdb_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.ppdb_page.title %></h1>
    <p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 700px; margin: 0.75rem auto 0 auto;">
      <%= t.ppdb_page.desc %>
    </p>
  </div>
</section>

<!-- FORM PPDB & SYARAT -->
<section class="section-padding">
  <div class="container">
    <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: flex-start;">
      <!-- FORM CARD -->
      <div>
        <div class="form-card">
          <div style="margin-bottom: 2rem;">
            <span class="section-tag"><i class="fa-solid fa-pen-to-square"></i> <%= t.ppdb_page.form_tag %></span>
            <h2 style="font-size: 1.75rem; color: var(--primary-navy); margin-top: 0.5rem;"><%= t.ppdb_page.form_title %></h2>
            <p style="color: var(--text-muted); font-size: 0.95rem;"><%= t.ppdb_page.form_desc %></p>
          </div>

          <div id="ppdbAlert" style="display: none;"></div>

          <form id="ppdbForm">
            <div class="form-group">
              <label for="namaSiswa"><i class="fa-solid fa-user text-navy"></i> <%= t.ppdb_page.form_name %></label>
              <input type="text" id="namaSiswa" class="form-control" placeholder="<%= t.ppdb_page.form_name_ph %>" required>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
              <div class="form-group">
                <label for="nomorWa"><i class="fa-brands fa-whatsapp text-green"></i> <%= t.ppdb_page.form_wa %></label>
                <input type="tel" id="nomorWa" class="form-control" placeholder="<%= t.ppdb_page.form_wa_ph %>" required>
              </div>

              <div class="form-group">
                <label for="emailSiswa"><i class="fa-solid fa-envelope text-navy"></i> <%= t.ppdb_page.form_email %></label>
                <input type="email" id="emailSiswa" class="form-control" placeholder="<%= t.ppdb_page.form_email_ph %>">
              </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
              <div class="form-group">
                <label for="asalSekolah"><i class="fa-solid fa-school text-navy"></i> <%= t.ppdb_page.form_school %></label>
                <input type="text" id="asalSekolah" class="form-control" placeholder="<%= t.ppdb_page.form_school_ph %>" required>
              </div>

              <div class="form-group">
                <label for="jenisKelamin"><i class="fa-solid fa-venus-mars text-navy"></i> <%= t.ppdb_page.form_gender %></label>
                <select id="jenisKelamin" class="form-control">
                  <option value="Laki-laki"><%= t.ppdb_page.gender_m %></option>
                  <option value="Perempuan"><%= t.ppdb_page.gender_f %></option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="pilihanJurusan"><i class="fa-solid fa-graduation-cap text-gold"></i> <%= t.ppdb_page.form_major %></label>
              <select id="pilihanJurusan" class="form-control" required>
                <option value="" disabled selected><%= t.ppdb_page.major_ph %></option>
                <option value="Axioo Class Program (Unggulan TJKT)">Axioo Class Program (Unggulan TJKT)</option>
                <option value="TJKT (Teknik Jaringan Komputer & Telekomunikasi)">TJKT (Teknik Jaringan Komputer & Telekomunikasi)</option>
                <option value="AKL (Akuntansi & Keuangan Lembaga)">AKL (Akuntansi & Keuangan Lembaga)</option>
                <option value="MPLB (Manajemen Perkantoran & Layanan Bisnis)">MPLB (Manajemen Perkantoran & Layanan Bisnis)</option>
              </select>
            </div>

            <div class="form-group">
              <label for="alamatSiswa"><i class="fa-solid fa-location-dot text-navy"></i> <%= t.ppdb_page.form_address %></label>
              <textarea id="alamatSiswa" class="form-control" rows="3" placeholder="<%= t.ppdb_page.address_ph %>"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; padding: 1rem; font-size: 1.05rem;">
              <i class="fa-solid fa-paper-plane"></i> <%= t.ppdb_page.form_submit %>
            </button>
          </form>
        </div>
      </div>

      <!-- SYARAT & DOWNLOAD BROSUR -->
      <div>
        <div style="background: var(--primary-navy-dark); color: #FFFFFF; padding: 2rem; border-radius: var(--radius-lg); margin-bottom: 2rem; border-top: 4px solid var(--accent-gold);">
          <h3 style="font-size: 1.3rem; color: #FFFFFF; margin-bottom: 1rem;"><i class="fa-solid fa-file-pdf text-gold"></i> <%= t.ppdb_page.brochure_title %></h3>
          <p style="font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 1.5rem;"><%= t.ppdb_page.brochure_desc %></p>
          <a href="/download/brosur" class="btn btn-primary" style="width: 100%;"><i class="fa-solid fa-download"></i> <%= t.ppdb_page.brochure_btn %></a>
        </div>

        <div style="background: var(--bg-card); padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);">
          <h3 style="font-size: 1.3rem; color: var(--primary-navy); margin-bottom: 1rem;"><i class="fa-solid fa-clipboard-list text-gold"></i> <%= t.ppdb_page.req_title %></h3>
          <ul class="major-features" style="font-size: 0.95rem;">
            <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-check text-green"></i> <%= t.ppdb_page.req_1 %></li>
            <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-check text-green"></i> <%= t.ppdb_page.req_2 %></li>
            <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-check text-green"></i> <%= t.ppdb_page.req_3 %></li>
            <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-check text-green"></i> <%= t.ppdb_page.req_4 %></li>
            <li style="margin-bottom: 0.75rem;"><i class="fa-solid fa-check text-green"></i> <%= t.ppdb_page.req_5 %></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="/js/ppdb-form.js"></script>

<%- include('partials/footer') %>
