<%- 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-headset"></i> <%= t.kontak_page.tag %></span>
    <h1 style="font-size: 2.75rem; color: #FFFFFF; margin-top: 0.5rem;"><%= t.kontak_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.kontak_page.desc %>
    </p>
  </div>
</section>

<!-- CONTACT DETAILS & FORM -->
<section class="section-padding">
  <div class="container">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem;">
      <div>
        <div style="margin-bottom: 2rem;">
          <span class="section-tag"><i class="fa-solid fa-envelope"></i> <%= t.kontak_page.info_tag %></span>
          <h2 style="font-size: 2rem; color: var(--primary-navy); margin-top: 0.5rem;"><%= t.kontak_page.info_title %></h2>
        </div>

        <div style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem;">
          <div style="display: flex; gap: 1rem; align-items: flex-start;">
            <div style="width: 48px; height: 48px; background: rgba(15, 44, 89, 0.08); color: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;">
              <i class="fa-solid fa-location-dot text-gold"></i>
            </div>
            <div>
              <h4 style="font-size: 1.1rem; color: var(--primary-navy);"><%= t.kontak_page.addr_title %></h4>
              <p style="color: var(--text-muted); font-size: 0.95rem;"><%= t.kontak_page.addr_text %></p>
            </div>
          </div>

          <div style="display: flex; gap: 1rem; align-items: flex-start;">
            <div style="width: 48px; height: 48px; background: rgba(15, 44, 89, 0.08); color: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;">
              <i class="fa-brands fa-whatsapp text-green"></i>
            </div>
            <div>
              <h4 style="font-size: 1.1rem; color: var(--primary-navy);"><%= t.kontak_page.wa_title %></h4>
              <p style="color: var(--text-muted); font-size: 0.95rem;"><%= t.kontak_page.wa_text %></p>
            </div>
          </div>

          <div style="display: flex; gap: 1rem; align-items: flex-start;">
            <div style="width: 48px; height: 48px; background: rgba(15, 44, 89, 0.08); color: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;">
              <i class="fa-solid fa-phone text-navy"></i>
            </div>
            <div>
              <h4 style="font-size: 1.1rem; color: var(--primary-navy);"><%= t.kontak_page.tel_title %></h4>
              <p style="color: var(--text-muted); font-size: 0.95rem;"><%= t.kontak_page.tel_text %></p>
            </div>
          </div>
        </div>

        <div style="background: var(--primary-navy-dark); color: #FFFFFF; padding: 2rem; border-radius: var(--radius-lg);">
          <h4 style="color: var(--accent-gold); font-size: 1.2rem; margin-bottom: 0.5rem;"><i class="fa-brands fa-whatsapp"></i> <%= t.kontak_page.wa_chat_title %></h4>
          <p style="font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-bottom: 1rem;"><%= t.kontak_page.wa_chat_desc %></p>
          <a href="https://wa.me/6281234567890?text=Halo%20Humas%20SMK%20Teratai%20Putih%20Global%203%20Bekasi,%20saya%20ingin%20bertanya%20mengenai..." target="_blank" class="btn btn-primary" style="width: 100%;">
            <i class="fa-brands fa-whatsapp"></i> <%= t.kontak_page.wa_chat_btn %>
          </a>
        </div>
      </div>

      <!-- CONTACT FORM -->
      <div>
        <div class="form-card">
          <h3 style="font-size: 1.5rem; color: var(--primary-navy); margin-bottom: 1.5rem;"><i class="fa-solid fa-paper-plane text-gold"></i> <%= t.kontak_page.form_title %></h3>
          
          <form id="contactForm" onsubmit="event.preventDefault(); alert('<%= t.kontak_page.form_alert %>'); this.reset();">
            <div class="form-group">
              <label for="cNama"><%= t.kontak_page.form_name %></label>
              <input type="text" id="cNama" class="form-control" placeholder="<%= t.kontak_page.form_name_ph %>" required>
            </div>

            <div class="form-group">
              <label for="cEmail"><%= t.kontak_page.form_email %></label>
              <input type="email" id="cEmail" class="form-control" placeholder="<%= t.kontak_page.form_email_ph %>" required>
            </div>

            <div class="form-group">
              <label for="cSubjek"><%= t.kontak_page.form_subject %></label>
              <input type="text" id="cSubjek" class="form-control" placeholder="<%= t.kontak_page.form_subject_ph %>">
            </div>

            <div class="form-group">
              <label for="cPesan"><%= t.kontak_page.form_msg %></label>
              <textarea id="cPesan" class="form-control" rows="4" placeholder="<%= t.kontak_page.form_msg_ph %>" required></textarea>
            </div>

            <button type="submit" class="btn btn-navy" style="width: 100%; padding: 0.85rem;"><i class="fa-solid fa-paper-plane"></i> <%= t.kontak_page.form_submit %></button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

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