<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contact Us</title>
  <link rel="icon" href="../../icons/logo-icon.png">
  <link rel="stylesheet" href="../../styles/general-body.css">  
  <link rel="stylesheet" href="../../styles/header-footer.css">  
</head>

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

  <main>
    <section>
      <h2>Contact Us</h2>
         
      <table class="contact-table">
        <tr>
            <td>
            <h3>Our Office</h3>
            <p><strong>FutureTech Corp.</strong><br>
                    4567 Hyperion Avenue<br>
                    Sector 9, NeoCity, CA 94018<br>
                    United States
            </p>
            <p><strong>Phone:</strong> (555) 013-2048<br>
            <strong>Email:</strong> <a href="mailto:support@futuretechcorp.com">support@futuretechcorp.com</a>
            </p>
            </td>
            <td><img src="../../images/topview.jpg" width=500 alt="FutureTech Corp. Headquarters"></td>
        </tr>

        <tr>
          <!-- Left Column: Contact Info -->
          <td class="contact-info">
            <div class="map-container">
              <h3>Find Us</h3>
              <iframe
                src="https://maps.google.com/maps?q=37.7749,-122.4194&z=14&output=embed"
                width="100%"
                height="300"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                title="FutureTech Corp Map">
              </iframe>
            </div>
          </td>

          <!-- Right Column: Contact Form -->
          <td class="contact-form-box">
            <p>Feel free to get in touch using the form on the right or through the contact information below.</p>

            <form action="https://httpbin.org/post" method="POST" target="_blank">
              <label for="name">Name:</label><br>
              <input type="text" id="name" name="name" required><br><br>

              <label for="email">Email:</label><br>
              <input type="email" id="email" name="email" required><br><br>

              <label for="message">Message:</label><br>
              <textarea id="message" name="message" rows="5" required></textarea><br><br>

              <button type="submit">Send Message</button>
            </form>
          </td>
        </tr>
      </table>
    </section>
  </main>

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