<section class="w-full py-5 md:py-10 lg:py-10 px-4 md:px-10 lg:px-24" data-component-type="Content">
  <!-- 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="./assets/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>
