<section data-component-type="Form" class="w-full bg-[#FAFAF5]" data-component-slug="history-template-contact-form">
  

  <div class="contact-wrapper">
    <!-- TITLE -->
    <h1 class="contact-title" data-node="contact_title" data-node-type="text" data-node-default="Contact Us">
      {{contact_title}}
    </h1>

    <div class="contact-lower">
      <!-- LEFT INFO -->
      <div class="contact-info">
        <p data-node="contact_location" data-node-type="text" data-node-default="Shibuya, Tokyo">
          {{contact_location}}
        </p>

        <p data-node="contact_office_time" data-node-type="text" data-node-default="Office Time Mon – Fri 10:00AM – 07:00PM">
          {{contact_office_time}}
        </p>
      </div>

      <!-- RIGHT FORM -->
      <form class="contact-form" data-contact-form>
        <div class="form-row">
          <div class="form-group">
            <label data-node="contact_first_name_label" data-node-type="text" data-node-default="First Name">
              {{contact_first_name_label}}
            </label>
            <input type="text" name="first_name" required>
            <span class="form-error"></span>
          </div>

          <div class="form-group">
            <label data-node="contact_last_name_label" data-node-type="text" data-node-default="Last Name">
              {{contact_last_name_label}}
            </label>
            <input type="text" name="last_name" required>
            <span class="form-error"></span>
          </div>
        </div>

        <div class="form-group">
          <label data-node="contact_email_label" data-node-type="text" data-node-default="Email Address">
            {{contact_email_label}}
          </label>
          <input type="email" name="email" required>
          <span class="form-error"></span>
        </div>

        <div class="form-group">
          <label data-node="contact_enquiry_label" data-node-type="text" data-node-default="Enquiry">
            {{contact_enquiry_label}}
          </label>
          <textarea name="message" required></textarea>
          <span class="form-error"></span>
        </div>

        <!-- STATUS -->
        <div class="form-status"></div>

        <button type="submit" class="submit-btn">
          <span data-node="contact_submit" data-node-type="text" data-node-default="Submit"> {{contact_submit}} </span>
        </button>
      </form>
    </div>
  </div>

  <!-- SCRIPT -->
  
</section>