<section id="contact" class="contact section">
  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2><%= sectionTitle %></h2>
    <p><%= sectionSubtitle %></p>
  </div><!-- End Section Title -->

  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="row gy-4">
      <% contactInfo.forEach((info, index) => { %>
        <div class="col-lg-<%= info.colSize %> col-md-6">
          <div class="info-item d-flex flex-column justify-content-center align-items-center" data-aos="fade-up" data-aos-delay="<%= (index + 2) * 100 %>">
            <i class="<%= info.icon %>"></i>
            <h3><%= info.title %></h3>
            <p><%= info.description %></p>
          </div>
        </div><!-- End Info Item -->
      <% }) %>
    </div>

    <div class="row gy-4 mt-1">
      <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
        <iframe src="<%= mapSrc %>" frameborder="0" style="border:0; width: 100%; height: 400px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div><!-- End Google Maps -->

      <div class="col-lg-6">
        <form action="<%= formAction %>" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="400">
          <div class="row gy-4">
            <div class="col-md-6">
              <input type="text" name="name" class="form-control" placeholder="Your Name" required="">
            </div>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" placeholder="Your Email" required="">
            </div>
            <div class="col-md-12">
              <input type="text" class="form-control" name="subject" placeholder="Subject" required="">
            </div>
            <div class="col-md-12">
              <textarea class="form-control" name="message" rows="6" placeholder="Message" required=""></textarea>
            </div>
            <div class="col-md-12 text-center">
              <div class="loading">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent. Thank you!</div>
              <button type="submit">Send Message</button>
            </div>
          </div>
        </form>
      </div><!-- End Contact Form -->
    </div>
  </div>
</section><!-- /Contact Section -->