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

  <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>
