<section data-component-type="Form" class="w-[92%] lg:w-[90%] mx-auto py-20 " data-component-slug="ss-interior-kitchen-get_in_touch">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center lg:flex justify-between">
    <!-- LEFT FORM CARD -->
    <div class="bg-[#0019BA1A] 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="Reach out anytime for clear answers and personalized assistance." class="text-[#4A6673] mt-[20px] text-[15px] leading-relaxed">
        {{contact_subtitle}}
      </p>

      <form data-contact-form class="mt-[30px] space-y-6">
        <!-- Name Fields Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 hidden">First Name</label>
            <input type="text" name="first_name" required data-node="input_first_name_placeholder" data-node-type="text" data-node-label="First Name Placeholder" data-node-default="First Name" placeholder="{{input_first_name_placeholder}}" class="w-full px-4 py-3 border border-[#0019BA1A] rounded-lg transition-colors
              focus:outline-none focus:ring-2 focus:ring-[#0019BA1A] focus:!border-[#0019BA1A]">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 hidden">Last Name</label>
            <input type="text" name="last_name" required data-node="input_last_name_placeholder" data-node-type="text" data-node-label="Last Name Placeholder" data-node-default="Last Name" placeholder="{{input_last_name_placeholder}}" class="w-full px-4 py-3 border border-[#0019BA1A] rounded-lg transition-colors
              focus:outline-none focus:ring-2 focus:ring-[#0019BA1A] focus:!border-[#0019BA1A]">
          </div>
        </div>

        <!-- Email Field -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2 hidden">Email Address</label>
          <input type="email" name="email" required data-node="input_email_placeholder" data-node-type="text" data-node-label="Email Placeholder" data-node-default="Email Address" placeholder="{{input_email_placeholder}}" class="w-full px-4 py-3 border border-[#0019BA1A] rounded-lg transition-colors
            focus:outline-none focus:ring-2 focus:ring-[#0019BA1A] focus:!border-[#0019BA1A]">
        </div>

       

        <!-- Message Field -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2 hidden">Message</label>
          <textarea name="message" rows="4" required data-node="input_message_placeholder" data-node-type="text" data-node-label="Message Placeholder" data-node-default="Write your note" placeholder="{{input_message_placeholder}}" class="w-full px-4 py-3 border border-[#0019BA1A] rounded-lg transition-colors
              focus:outline-none focus:ring-2 focus:ring-[#0019BA1A] focus:!border-[#0019BA1A]"></textarea>
        </div>

        <!-- Status Message -->
        <div id="form-status" class="hidden py-3 px-4 rounded-lg text-center font-medium"></div>

        <!-- Submit Button -->
        <div class=" py-4 text-center bg-[#0019BA] text-white font-semibold rounded-lg hover:bg-[#0019BA]/80 focus:ring-4 focus:ring-red-200 transition-all w-[200px]">
          <span data-node="submit_button_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Send Message">
            {{submit_button_text}}
          </span> 
      </div>
      </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="Connect With Our Support Team" 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="Dedicated assistance for product inquiries, orders, and services. Guidance tailored to help you choose the right solutions. Responsive support every step of the way. Support designed to be quick, clear, and helpful." 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/v1767779871/seltrix/templates/ss-interior-kitchen/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/v1767779849/seltrix/templates/ss-interior-kitchen/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>