<%- include('../partials/head') %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-breadcrumb__area pt-40 pb-40" style="background:#f8f9fb;">
      <div class="container">
         <h1 style="font-size:28px; margin-bottom:6px;"><%= page.title %></h1>
         <div style="font-size:14px; color:#777;"><%- page.content %></div>
      </div>
   </div>

   <div class="pt-60 pb-100">
      <div class="container">
         <div class="row">
            <div class="col-lg-5 mb-30">
               <h3 style="font-size:18px; margin-bottom:20px;">Contact Information</h3>
               <p style="margin-bottom:12px;"><i class="fas fa-phone"></i> <a href="tel:<%= site.phone %>" style="color:#444;"><%= site.phone %></a></p>
               <p style="margin-bottom:12px;"><i class="fas fa-envelope"></i> <a href="mailto:<%= site.email %>" style="color:#444;"><%= site.email %></a></p>
               <p style="margin-bottom:12px;"><i class="fas fa-map-marker-alt"></i> <%= site.address %></p>
            </div>
            <div class="col-lg-7">
               <% if (sent) { %>
                  <div class="alert" style="background:#DCFCE7; color:#166534; padding:15px 20px; border-radius:8px; margin-bottom:20px;">
                     Thank you! Your message has been received. Our team will get back to you shortly.
                  </div>
               <% } %>
               <% if (formError) { %>
                  <div class="alert" style="background:#FEE2E2; color:#991B1B; padding:15px 20px; border-radius:8px; margin-bottom:20px;">
                     <%= formError %>
                  </div>
               <% } %>
               <form id="contact-form" action="/contact" method="POST">
                  <div class="row">
                     <div class="col-md-6 mb-15">
                        <input class="tp-input" name="name" type="text" placeholder="Your Name..." required style="width:100%;">
                     </div>
                     <div class="col-md-6 mb-15">
                        <input class="tp-input" name="email" type="email" placeholder="Your Email..." required style="width:100%;">
                     </div>
                     <div class="col-md-12 mb-15">
                        <input class="tp-input" name="subject" type="text" placeholder="Your Subject" style="width:100%;">
                     </div>
                     <div class="col-md-12 mb-15">
                        <textarea class="tp-input tp-textarea" name="message" rows="6" placeholder="Write your message" required style="width:100%;"></textarea>
                     </div>
                     <div class="col-md-12">
                        <button type="submit" class="tp-btn">Send Message</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</main>

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