<section class="bg-[#FBF7F3] px-6 py-16 lg:px-20" data-component-type="Content" data-component-slug="ss-tourism-template-contact_us">

  <div class="max-w-[90%] mx-auto">

    <!-- HEADING -->
    <div class="text-center overflow-hidden">
      <h1 class="font-bold text-black leading-[0.95] text-[clamp(3rem,10vw,20rem)] py-6 lg:py-10" data-node="contact_heading" data-node-type="text" data-node-label="Contact Heading" data-node-default="Contact Us">
        {{contact_heading}}
      </h1>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">

      <!-- LEFT INFO -->
      <div class="text-sm text-black space-y-4">

        <p data-node="contact_location" data-node-type="text" data-node-label="Office Location" data-node-default="Shibuya, Tokyo">
          {{contact_location}}
        </p>

        <div>
          <p class="font-medium" data-node="contact_office_time_title" data-node-type="text" data-node-label="Office Time Title" data-node-default="Office Time">
            {{contact_office_time_title}}
          </p>

          <p data-node="contact_work_days" data-node-type="text" data-node-label="Working Days" data-node-default="Mon - Fri">
            {{contact_work_days}}
          </p>

          <p data-node="contact_work_hours" data-node-type="text" data-node-label="Working Hours" data-node-default="10:00AM - 07:00PM">
            {{contact_work_hours}}
          </p>
        </div>

      </div>

      <!-- RIGHT FORM -->
      <form class="w-full" data-component-type="Form">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-10">

          <div>
            <label class="block text-sm mb-2" data-node="contact_firstname_label" data-node-type="text" data-node-label="First Name Label" data-node-default="First Name">
              {{contact_firstname_label}}
            </label>
            <input type="text" class="w-full bg-transparent border-b border-black py-2 outline-none">
          </div>

          <div>
            <label class="block text-sm mb-2" data-node="contact_lastname_label" data-node-type="text" data-node-label="Last Name Label" data-node-default="Last Name">
              {{contact_lastname_label}}
            </label>
            <input type="text" class="w-full bg-transparent border-b border-black py-2 outline-none">
          </div>

        </div>

        <div class="mb-10">
          <label class="block text-sm mb-2" data-node="contact_email_label" data-node-type="text" data-node-label="Email Label" data-node-default="Email Address">
            {{contact_email_label}}
          </label>
          <input type="email" class="w-full bg-transparent border-b border-black py-2 outline-none">
        </div>

        <div class="mb-12">
          <label class="block text-sm mb-2" data-node="contact_message_label" data-node-type="text" data-node-label="Message Label" data-node-default="Enquiry">
            {{contact_message_label}}
          </label>
          <textarea rows="1" class="w-full bg-transparent border-b border-black py-2 outline-none resize-none"></textarea>
        </div>

        <button class="bg-[#123C3F] text-white px-10 py-3 text-sm hover:bg-[#0E2F31] transition" data-node="contact_button_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Submit">
          {{contact_button_text}}
        </button>

      </form>

    </div>
  </div>
</section>