<!-- 
  Get In Touch Section Component
  Contact form with info
-->
<section data-component-type="Form" class="w-[92%] lg:w-[88%] mx-auto py-20">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <!-- LEFT FORM CARD -->
    <div class="bg-[#F5F4FD] rounded-2xl p-8 md:p-10 shadow-sm">
      <h2
        data-node="contact_title"
        data-node-type="text"
        data-node-label="Contact Heading"
        data-node-default="Get In Touch"
        class="text-2xl md:text-3xl font-semibold text-[#151515]"
      >
        {{contact_title}}
      </h2>

      <p
        data-node="contact_subtitle"
        data-node-type="textarea"
        data-node-label="Contact Description"
        data-node-default="We're here to answer questions, solve challenges, and guide you toward the right solution."
        class="text-[#4A6673] mt-2 text-[15px] leading-relaxed"
      >
        {{contact_subtitle}}
      </p>

      <!-- CONTACT FORM -->
      <form class="mt-8 space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input
            type="text"
            data-node="first_name_placeholder"
            data-node-type="text"
            data-node-label="First Name Placeholder"
            data-node-default="First Name"
            placeholder="{{first_name_placeholder}}"
            class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#7848FF]"
          />

          <input
            type="text"
            data-node="last_name_placeholder"
            data-node-type="text"
            data-node-label="Last Name Placeholder"
            data-node-default="Last Name"
            placeholder="{{last_name_placeholder}}"
            class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#7848FF]"
          />
        </div>

        <input
          type="email"
          data-node="email_placeholder"
          data-node-type="text"
          data-node-label="Email Placeholder"
          data-node-default="Email Address"
          placeholder="{{email_placeholder}}"
          class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#7848FF]"
        />

        <textarea
          data-node="message_placeholder"
          data-node-type="text"
          data-node-label="Message Placeholder"
          data-node-default="Write your note"
          rows="6"
          placeholder="{{message_placeholder}}"
          class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[#7848FF]"
        ></textarea>

        <button
          type="submit"
          class="bg-[#5F4BE2] text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-[#5c33d9] transition"
        >
          <span
            data-node="submit_btn_text"
            data-node-type="text"
            data-node-label="Button Text"
            data-node-default="Submit"
            >{{submit_btn_text}}</span
          >
        </button>
      </form>
    </div>

    <!-- RIGHT CONTENT -->
    <div class="pl-2">
      <h3
        data-node="right_title"
        data-node-type="text"
        data-node-label="Right Title"
        data-node-default="Let's Build Smarter Solutions Together"
        class="text-3xl md:text-4xl font-semibold leading-tight text-[#151515]"
      >
        {{right_title}}
      </h3>

      <p
        data-node="right_description"
        data-node-type="textarea"
        data-node-label="Right Description"
        data-node-default="Connect with our team for product guidance, technical support, or tailored recommendations."
        class="text-[#4A6673] mt-4 text-[15px] max-w-md leading-relaxed"
      >
        {{right_description}}
      </p>

      <!-- Feature List -->
      <ul class="text-[#4A6673] mt-6 space-y-2 text-[15px]">
        <li
          data-node="list_item1"
          data-node-type="text"
          data-node-label="List Item 1"
          data-node-default="Quick Response Time"
        >
          {{list_item1}}
        </li>

        <li
          data-node="list_item2"
          data-node-type="text"
          data-node-label="List Item 2"
          data-node-default="Dedicated Support Team"
        >
          {{list_item2}}
        </li>

        <li
          data-node="list_item3"
          data-node-type="text"
          data-node-label="List Item 3"
          data-node-default="Expert Product Guidance"
        >
          {{list_item3}}
        </li>
      </ul>

      <!-- CONTACT BOXES -->
      <div class="flex flex-wrap gap-5 mt-10">
        <!-- Email Box -->
        <div class="flex items-center gap-3 border rounded-xl px-4 py-3 min-w-[250px]">
          <div class="w-[55px] rounded-lg bg-[#F5F4FD]">
            <img
              data-node="email_icon"
              data-node-label="Email Icon"
              data-node-type="file"
              data-node-default="../assets/get-in-touch/sms.png"
              src="{{email_icon}}"
              class="p-2"
            />
          </div>

          <span
            data-node="email_text"
            data-node-type="text"
            data-node-label="Email Text"
            data-node-default="Yourcompany@gmail.com"
            class="text-sm text-[#4A6673]"
          >
            {{email_text}}
          </span>
        </div>

        <!-- Phone Box -->
        <div class="flex items-center gap-3 border rounded-xl px-4 py-3 min-w-[250px]">
          <div class="w-[55px] rounded-lg bg-[#F5F4FD]">
            <img
              data-node="phone_icon"
              data-node-label="Phone Icon"
              data-node-type="file"
              data-node-default="../assets/get-in-touch/Icon.png"
              src="{{phone_icon}}"
              class="p-2"
            />
          </div>

          <span
            data-node="phone_number"
            data-node-type="text"
            data-node-label="Phone Number"
            data-node-default="+91 73473 77294"
            class="text-sm text-[#4A6673]"
          >
            {{phone_number}}
          </span>
        </div>
      </div>
    </div>
  </div>
</section>
