<section class="w-full py-5 md:py-10 lg:py-10 max-w-[90%] mx-auto" data-component-type="Content" data-component-slug="portfolio-template-contact-service">
  <!-- GRID — LEFT + RIGHT -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-20 items-start">
    <!-- LEFT -->
    <div>
      <div class="inline-block py-2 px-4 md:py-2.5 md:px-6 font-['Cabin'] text-[22px] sm:text-[26px] md:text-[32px] font-normal rounded-xl text-white bg-[rgba(10,10,10,0.65)] border border-white/[0.12] backdrop-blur-[20px]" data-node="contact_tag" data-node-type="text" data-node-label="Contact Tag" data-node-default="Let's Connect">
        {{contact_tag}}
      </div>

      <h2 class="mt-8 font-['Cabin'] text-[26px] sm:text-[30px] md:text-[34px] lg:text-[42px] xl:text-[64px] font-medium leading-[100%] md:leading-[110%] text-white" data-node="contact_title" data-node-type="text" data-node-label="Contact Title" data-node-default="Let's Build a Strategy That Actually Works.">
        {{contact_title}}
      </h2>

      <p class="mt-5 font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7e7e7e] leading-[130%] md:leading-[145%] max-w-[765px]" data-node="contact_description" data-node-type="textarea" data-node-label="Contact Description" data-node-default="Tell us where your business is stuck — traffic, conversions, positioning, or growth. We'll assess the gap, identify leverage points, and recommend the right service path forward.">
        {{contact_description}}
      </p>
    </div>

    <!-- RIGHT — FORM -->
    <div class="w-full p-6 md:p-9 rounded-2xl border border-white/[0.12] bg-white/[0.06] backdrop-blur-[22px] flex flex-col gap-6">
      <div class="font-['Cabin'] text-[26px] sm:text-[30px] md:text-[36px] lg:text-[42px] xl:text-[64px] font-medium leading-[95%] text-white" data-node="form_title" data-node-type="text" data-node-label="Form Title" data-node-default="Contact Form">
        {{form_title}}
      </div>

      <!-- FIRST + LAST NAME -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <input class="w-full h-14 md:h-16 lg:h-[72px] px-4 py-4 bg-black/[0.01] border border-white rounded-md font-['Cabin'] text-[16px] md:text-[20px] lg:text-[24px] font-normal text-white outline-none placeholder-white" placeholder="{{first_name}}" data-node="first_name" data-node-type="text" data-node-label="First Name" data-node-default="First Name">

        <input class="w-full h-14 md:h-16 lg:h-[72px] px-4 py-4 bg-black/[0.01] border border-white rounded-md font-['Cabin'] text-[16px] md:text-[20px] lg:text-[24px] font-normal text-white outline-none placeholder-white" placeholder="{{last_name}}" data-node="last_name" data-node-type="text" data-node-label="Last Name" data-node-default="Last Name">
      </div>

      <!-- EMAIL -->
      <input class="w-full h-14 md:h-16 lg:h-[72px] px-4 py-4 bg-black/[0.01] border border-white rounded-md font-['Cabin'] text-[16px] md:text-[20px] lg:text-[24px] font-normal text-white outline-none placeholder-white" placeholder="{{email}}" data-node="email" data-node-type="text" data-node-label="Email Field" data-node-default="Email">

      <!-- SERVICES DROPDOWN -->
      <div class="relative">
        <select class="w-full h-14 md:h-16 lg:h-[72px] px-4 py-4 bg-black/25 backdrop-blur-[16px] border border-white rounded-md font-['Cabin'] text-[16px] md:text-[20px] lg:text-[24px] font-normal text-white outline-none appearance-none cursor-pointer" data-node="service_dropdown" data-node-type="select" data-node-label="Service Dropdown" data-node-default="Service Dropdown">
          <option class="bg-black/85 text-white">{{service_dropdown}}</option>
          <option class="bg-black/85 text-white">Brand Strategy</option>
          <option class="bg-black/85 text-white">Web Copywriting</option>
          <option class="bg-black/85 text-white">SEO & Content Marketing</option>
          <option class="bg-black/85 text-white">Performance Marketing</option>
          <option class="bg-black/85 text-white">Social Media Strategy</option>
        </select>

        <!-- DOWN ARROW -->
        <img src="{{dropdown_icon}}" alt="▼" class="absolute right-4 md:right-5 top-1/2 -translate-y-1/2 w-4 md:w-[18px] lg:w-[22px] h-4 md:h-[18px] lg:h-[22px] pointer-events-none" data-node="dropdown_icon" data-node-type="file" data-node-label="Dropdown Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362129/seltrix/templates/portfolio-template/arrow-down.svg">
      </div>

      <!-- MESSAGE FIELD -->
      <textarea class="w-full h-[130px] md:h-[150px] lg:h-[200px] px-4 py-4 bg-black/[0.01] border border-white rounded-md font-['Cabin'] text-[16px] md:text-[18px] lg:text-[24px] font-normal text-white outline-none resize-none placeholder-white" placeholder="{{message}}" data-node="message" data-node-type="textarea" data-node-label="Message Field" data-node-default="Enter your message"></textarea>

      <!-- SUBMIT BUTTON -->
      <button class="w-[120px] sm:w-[130px] md:w-[140px] lg:w-[180px] py-2 md:py-2.5 px-3 md:px-4 bg-[#d3ff5b] rounded-xl font-['Cabin'] text-[15px] sm:text-[16px] md:text-[18px] lg:text-[24px] font-normal text-black cursor-pointer transition-opacity duration-300 hover:opacity-85" data-node="submit_btn" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Submit Form">
        {{submit_btn}}
      </button>
    </div>
  </div>
</section>