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

<style>
/* ===== CONTACT PAGE THEME ===== */
.contact-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

/* ===== SECTION TITLE ===== */
.contact .section-title h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
  
}

.contact .section-title p {
  color: #1faa06;
  font-weight: 600;
  font-size: 16px;
}

/* ===== INFO CARD ===== */
.info-wrap {
  background: #fff;
  border-radius: 14px;
  border: 4px solid #ff9933;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.info-item i {
  font-size: 22px;
  color: #ff9933;
  margin-top: 4px;
}

.info-item h3 {
  font-size: 18px;
  font-weight: 800;
  color: #ff6a00;
  margin-bottom: 4px;
}

.info-item p {
  font-size: 14px;
  color: #444;
  margin: 0;
}

/* MAP */
.info-wrap iframe {
  width: 100%;
  height: 270px;
  border-radius: 10px;
  margin-top: 15px;
}

/* ===== CONTACT FORM ===== */
.php-email-form {
  background: #fff;
  border-radius: 14px;
  border: 4px solid #1faa06;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.php-email-form label {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.php-email-form .form-control {
  border-radius: 8px;
  border: 1.5px solid #ccc;
  padding: 10px 12px;
  font-size: 14px;
}

/* SUBMIT BUTTON */
.php-email-form button {
  background: linear-gradient(90deg, #ff6a00, #ff9933);
  border: none;
  padding: 12px 36px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border-radius: 30px;
  transition: 0.3s ease;
}

.php-email-form button:hover {
  background: linear-gradient(90deg, #1faa06, #5ef05e);
  color: #000;
}

/* =========================
   📱 MOBILE OPTIMIZATION
========================= */
@media (max-width: 768px) {

  .contact .section-title h2 {
    font-size: 28px;
  }

  .contact .section-title p {
    font-size: 14px;
  }

  .info-wrap {
    padding: 20px;
  }

  .info-item h3 {
    font-size: 16px;
  }

  .info-item p {
    font-size: 13px;
  }

  .info-wrap iframe {
    height: 220px; /* 👈 mobile friendly */
  }

  .php-email-form {
    padding: 22px;
  }

  .php-email-form button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }
}
</style>

<main class="main">
  <div class="contact-page">

    <section id="contact" class="contact section py-5">

      <div class="container section-title text-center">
        <h2>संपर्क करें</h2>
        <p>जनसेवा एवं सहायता के लिए हमसे संपर्क करें</p>
      </div>

      <div class="container">
        <div class="row gy-4 align-items-stretch">

          <!-- CONTACT INFO -->
          <div class="col-lg-5">
            <div class="info-wrap h-100">

              <div class="info-item">
                <i class="bi bi-geo-alt"></i>
                <div>
                  <h3>पता</h3>
                  <p>नानपुर, औरंगाबाद, मथुरा, उत्तर प्रदेश</p>
                </div>
              </div>

              <div class="info-item">
                <i class="bi bi-telephone"></i>
                <div>
                  <h3>फोन</h3>
                  <p>+91 72485 55999</p>
                </div>
              </div>

              <div class="info-item">
                <i class="bi bi-envelope"></i>
                <div>
                  <h3>ईमेल</h3>
                  <p>info@amitpratapsingh.in</p>
                </div>
              </div>

              <iframe
                src="https://www.google.com/maps?q=83,%20Govardhan%20Vidhan%20Sabha,%20Mathura,%20Uttar%20Pradesh&output=embed"
                loading="lazy">
              </iframe>

            </div>
          </div>

          <!-- CONTACT FORM -->
          <div class="col-lg-7">
            <form class="php-email-form h-100" onsubmit="sendToWhatsApp(event)">

              <div class="row gy-4">

                <div class="col-md-6">
                  <label>आपका नाम</label>
                  <input type="text" id="name" class="form-control" required>
                </div>

                <div class="col-md-6">
                  <label>आपका ईमेल</label>
                  <input type="email" id="email" class="form-control" required>
                </div>

                <div class="col-md-12">
                  <label>विषय</label>
                  <input type="text" id="subject" class="form-control" required>
                </div>

                <div class="col-md-12">
                  <label>संदेश</label>
                  <textarea id="message" rows="6" class="form-control" required></textarea>
                </div>

                <div class="col-md-12 text-center">
                  <button type="submit">संदेश भेजें</button>
                </div>

              </div>

            </form>
          </div>

        </div>
      </div>

    </section>

  </div>
</main>

<script>
function sendToWhatsApp(e) {
  e.preventDefault();

  const phoneNumber = "917248555999";

  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const subject = document.getElementById("subject").value;
  const message = document.getElementById("message").value;

  const text =
`नया संपर्क संदेश 👇

नाम: ${name}
ईमेल: ${email}
विषय: ${subject}

संदेश:
${message}`;

  window.open(
    "https://wa.me/" + phoneNumber + "?text=" + encodeURIComponent(text),
    "_blank"
  );
}
</script>

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