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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OneSuite</title>
  <link rel="icon" type="image/x-icon" href="logo.svg">
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
  </script>
    <script type="text/javascript">
      // Initialize EmailJS
      (function () {
        emailjs.init("um8Rye0-lKRXrogPR"); // Replace with your actual EmailJS public key
      })();
    </script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
      document.getElementById("contact-form").addEventListener("submit", function (event) {
        event.preventDefault();
        
        var formData = {
          name: document.getElementById("name").value,
          company: document.getElementById("company").value,
          email: document.getElementById("email").value,
        };

        if (!formData.name || !formData.company || !formData.email) {
        alert("Please fill in all the fields.");
        return;
        }

        emailjs.send('service_twnopmi', 'template_ksnolmd', formData).then(
          (response) => {
            alert("Request sent successfully!");
            location.reload()
          },
          (error) => {
            alert("Failed to send request");
          },
        );
      });
      });
    </script>
</head>

<body>
  <h3 class="title">ENMA</h3>
  <div class="card">
    <h1 style="font-size: 23px;">Request Access to OneSuite!</h1>
    <p style="font-size: 12px;">Fill out the form below to request early access to our product.</p>

    <form id="contact-form" class="access-form">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="..." required>
      </div>
    
      <div class="form-group">
        <label for="company">Company</label>
        <input type="text" id="company" name="company" placeholder="..." required>
      </div>
    
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="example@gmail.com" required>
      </div>
    
      <button type="submit" class="submit-btn">Submit</button>
    </form>
    <div class="footer">
      Powered by <a href="https://enma.solutions" target="_blank">enma.solutions</a>
    </div>
  </div>
</body>

</html>
