<section data-component-type="Form" class="w-full bg-white font-manrope py-16 md:py-24 px-6 md:px-12 lg:px-20" data-component-slug="ss-interior-flooring-template-contact-form">
  <div class="max-w-[1760px] mx-auto">
    <div class="flex flex-col lg:flex-row gap-10 lg:gap-16 xl:gap-32 items-stretch">
      <!-- Left: Image -->
      <div class="w-full lg:w-1/2 overflow-hidden rounded-[20px]">
        <img data-node="cf_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696135/seltrix/templates/ss-interior-flooring-template/contact-hero.jpg" src="{{cf_image}}" alt="Interior showroom" class="w-full h-[500px] md:h-[700px] lg:h-[800px] xl:h-[1056px] object-cover rounded-[20px]">
      </div>

      <!-- Right: Contact Form -->
      <div class="w-full lg:w-1/2 flex flex-col justify-center">
        <div class>
          <h1 class="text-3xl md:text-4xl lg:text-[44px] font-bold text-black mb-4 leading-tight" data-node="cf_title" data-node-type="text" data-node-label="Form Title" data-node-default="Let's Connect">
            {{cf_title}}
          </h1>
          <p class="text-[#535353] text-base md:text-lg mb-12 leading-relaxed" data-node="cf_desc" data-node-type="textarea" data-node-label="Form Description" data-node-default="Our team is here to help. Have a project in mind or need expert guidance on flooring solutions?">
            {{cf_desc}}
          </p>

          <form data-contact-form class="space-y-5">
            <!-- Name -->
            <div>
              <label for="name" class="sr-only">Name</label>
              <input type="text" id="name" name="name" data-node="input_name_placeholder" data-node-type="text" data-node-label="Name Placeholder" data-node-default="Name" placeholder="{{input_name_placeholder}}" class="w-full px-6 py-4 bg-white border border-[#E5E5E5] rounded-xl text-black placeholder-[#535353] focus:outline-none focus:border-[#965C00] focus:ring-1 focus:ring-[#965C00] transition-colors" required>
            </div>

            <!-- Email -->
            <div>
              <label for="email" class="sr-only">Email Address</label>
              <input type="email" id="email" name="email" 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-6 py-4 bg-white border border-[#E5E5E5] rounded-xl text-black placeholder-[#535353] focus:outline-none focus:border-[#965C00] focus:ring-1 focus:ring-[#965C00] transition-colors" required>
            </div>

            <!-- Services -->
            <div>
              <label for="service" class="sr-only">Select Services</label>
              <div class="relative">
                <select id="service" name="service" class="w-full px-6 py-4 bg-white border border-[#E5E5E5] rounded-xl text-black placeholder-[#535353] focus:outline-none focus:border-[#965C00] focus:ring-1 focus:ring-[#965C00] transition-colors appearance-none cursor-pointer">
                  <option value disabled selected>Select Services</option>
                  <option value="consultation">Design Consultation</option>
                  <option value="installation">Installation</option>
                  <option value="commercial">Commercial Projects</option>
                  <option value="support">Product Support</option>
                </select>
                <!-- Custom Arrow Icon -->
                <div class="absolute inset-y-0 right-0 flex items-center px-6 pointer-events-none">
                  <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                  </svg>
                </div>
              </div>
            </div>

            <!-- Message -->
            <div>
              <label for="message" class="sr-only">Message or Project Details</label>
              <textarea id="message" name="message" rows="6" data-node="input_message_placeholder" data-node-type="text" data-node-label="Message Placeholder" data-node-default="Message or Project Details" placeholder="{{input_message_placeholder}}" class="w-full px-6 py-4 bg-white border border-[#E5E5E5] rounded-xl text-black placeholder-[#535353] focus:outline-none focus:border-[#965C00] focus:ring-1 focus:ring-[#965C00] transition-colors resize-none"></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="pt-2">
              <button type="submit" data-node="submit_button_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Submit" class="inline-block bg-[#965C00] text-white px-12 py-3.5 rounded-lg text-base font-bold hover:bg-[#7A4B00] transition-colors shadow-sm disabled:opacity-70 disabled:cursor-not-allowed">
                {{submit_button_text}}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>