<section data-component-type="Form" class="w-[92%] lg:w-[88%] mx-auto py-20 mt-[86px]" data-component-slug="saas-template-get-in-touch">
  <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-[300px]">
          <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="https://res.cloudinary.com/duukclzsd/image/upload/v1765868957/seltrix/templates/saas-template/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-[300px]">
          <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="https://res.cloudinary.com/duukclzsd/image/upload/v1765868956/seltrix/templates/saas-template/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>