<?php
require_once __DIR__ . '/config/secure_public.php';

$page_title = "Kontak Kami | $site_name";
$page_description = "Hubungi Lembaga Penjaminan Mutu (LPM) Universitas Riyadlul Ulum Tasikmalaya untuk informasi dan kerja sama penjaminan mutu pendidikan.";
$page_url = base_url('kontak.php');

include __DIR__ . '/includes/header.php';
?>

<!-- HERO -->
<section class="hero-contact d-flex align-items-center justify-content-center text-center text-white position-relative">
  <div class="overlay"></div>
  <div class="content position-relative z-2">
    <h1 class="fw-bold display-6 mb-2">Hubungi Kami</h1>
    <p class="text-light small">Kami siap membantu Anda meningkatkan mutu pendidikan</p>
  </div>
</section>

<div class="container my-5">

<!-- INFO KONTAK -->
<div class="row g-4 mb-5 fade-section">

  <!-- Alamat -->
  <div class="col-md-4">
    <div class="card border-0 shadow-sm p-4 h-100 text-center">
      <i class="fa fa-map-marker-alt fa-2x text-success mb-3"></i>
      <h6 class="fw-bold">Alamat</h6>
      <p class="small mb-0">
        Kp. Leuwigenta Kel. Setianagara Kec. Cibeureum, Kota Tasikmalaya, Jawa Barat 46196
      </p>
    </div>
  </div>

  <!-- Email -->
  <div class="col-md-4">
    <div class="card border-0 shadow-sm p-4 h-100 text-center">
      <i class="fa fa-envelope fa-2x text-success mb-3"></i>
      <h6 class="fw-bold">Email</h6>
      <p class="small mb-0">lpm@uniru.ac.id</p>
    </div>
  </div>

  <!-- WhatsApp -->
<div class="col-md-4">
  <div class="card border-0 shadow-sm p-4 h-100 text-center">
    <i class="fab fa-whatsapp fa-2x text-success mb-3"></i>

    <h6 class="fw-bold mb-4">WhatsApp</h6>

    <div class="d-flex justify-content-around">

      <!-- Dr Dadang -->
      <a href="https://wa.me/6282119362686" target="_blank" class="wa-mini">
        <p class="small fw-semibold mb-1">Dr. Dadang</p>
        <p class="small text-muted mb-0">+62 821-1936-2686</p>
      </a>

      <!-- Abdal -->
      <a href="https://wa.me/6285171122926" target="_blank" class="wa-mini">
        <p class="small fw-semibold mb-1">Abdal</p>
        <p class="small text-muted mb-0">+62 851-7112-2926</p>
      </a>

    </div>

  </div>
</div>
</div>

  <!-- FORM KONTAK -->
  <div class="row justify-content-center fade-section">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm p-4 p-md-5 rounded-4">
        <h5 class="fw-bold mb-4 text-success text-center">Kirim Pesan ke LPM UNIRU</h5>

        <form id="contactForm" method="post" action="" onsubmit="return sendMessage(event)">
          <div class="mb-3">
            <label class="form-label">Nama Lengkap</label>
            <input type="text" name="nama" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Pesan</label>
            <textarea name="pesan" rows="4" class="form-control" required></textarea>
          </div>
          <div class="text-center">
            <button type="submit" class="btn btn-success px-4">
              <i class="fa fa-paper-plane me-1"></i> Kirim Pesan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- GOOGLE MAPS -->
  <div class="row mt-5 fade-section">
    <div class="col-12">
      <div class="ratio ratio-16x9 shadow-sm rounded-4 overflow-hidden">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3957.0910257325086!2d108.25533897532104!3d-7.343674792664975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6f59c8077623ab%3A0x4b43f69b5020767d!2sInstitut%20Teknologi%20dan%20Bisnis%20(ITB)%20Riyadlul%20&#39;Ulum!5e0!3m2!1sid!2sid!4v1762856143702!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </div>

</div>

<?php include __DIR__ . '/includes/footer.php'; ?>

<!-- ===== CUSTOM STYLE ===== -->
<style>
.hero-contact {
  height: 40vh;
  background: linear-gradient(120deg, var(--green) 0%, var(--brown) 100%);
  position: relative;
  padding-top: 4rem;
}
.hero-contact .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
form .form-control {
  border-radius: 10px;
  border-color: #dcdcdc;
  box-shadow: none;
}
form .form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem rgba(8, 77, 54, 0.1);
}

/* Fade Animation */
.fade-section { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.fade-section.visible { opacity: 1; transform: translateY(0); }
.contact-item p:first-child {
  color: #222;
}
.contact-item p:last-child {
  font-size: .85rem;
}

.wa-mini {
  text-decoration: none;
  color: inherit;
  padding: .3rem .5rem;
  border-radius: 8px;
  transition: .2s;
  text-align: center;
  width: 48%;           /* biar pas 2 kolom */
}

.wa-mini:hover {
  background-color: #e8f9ef;
  color: #0f7a3f;
  transform: translateY(-2px);
}
</style>

<!-- ===== SCRIPT ===== -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const fadeSections = document.querySelectorAll(".fade-section");
  const observer = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("visible"); });
  }, { threshold: 0.2 });
  fadeSections.forEach(s => observer.observe(s));
});

// Simulasi kirim pesan (tanpa backend)
function sendMessage(e) {
  e.preventDefault();
  Swal.fire({
    icon: "success",
    title: "Pesan terkirim!",
    text: "Terima kasih sudah menghubungi LPM UNIRU. Kami akan segera menanggapi pesan Anda.",
    confirmButtonColor: "#084D36"
  });
  e.target.reset();
  return false;
}
</script>
