<section class="bg-black w-full px-4 md:px-12 lg:px-24 py-16 md:py-20 lg:py-32" data-component-type="Content">
  <!-- TWO COLUMN GRID -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
    <!-- LEFT COLUMN -->
    <div>
      <!-- LABEL -->
      <div
        class="inline-flex justify-center items-center px-6 py-3 mb-10 font-['Cabin'] text-[32px] text-white rounded-[13px] bg-white/[0.07] backdrop-blur-[12px] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(0,0,0,0.25)]"
        data-node="solution_label"
        data-node-type="text"
        data-node-default="Solution"
      >
        {{solution_label}}
      </div>

      <!-- TITLE -->
      <h2
        class="text-white font-['Cabin'] font-medium text-[56px] leading-[100%] max-w-[600px] mb-16"
        data-node="solution_title"
        data-node-type="text"
        data-node-default="Growth system built for real brand problems"
      >
        {{solution_title}}
      </h2>

      <!-- IMAGE -->
      <img
        src="{{solution_image}}"
        class="w-full lg:w-[915px] h-auto lg:h-[560px] rounded-[14px] object-cover"
        data-node="solution_image"
        data-node-type="file"
        data-node-default="./assets/Frame (8).webp"
      />
    </div>

    <!-- RIGHT COLUMN -->
    <div class="flex flex-col justify-end lg:-mt-2.5">
      <!-- MAIN PARAGRAPH -->
      <p
        class="text-[#7E7E7E] text-[24px] font-['Cabin'] leading-[130%] max-w-[680px] mb-12"
        data-node="solution_description"
        data-node-type="text"
        data-node-default="Manage all things equity in one place, with Trackz, you get the all-in-one sales and marketing automation platform designed to help your small business grow."
      >
        {{solution_description}}
      </p>

      <!-- FEATURE 1 -->
      <div class="flex items-center gap-6 mb-14">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#CBD5E1]"></div>
        <div class="flex gap-4">
          <img
            src="{{feature1_icon}}"
            class="w-[42px] h-[42px] mt-1"
            data-node="feature1_icon"
            data-node-type="file"
            data-node-default="./assets/Business crm.svg"
          />
          <div class="flex flex-col gap-2">
            <h3
              class="text-white font-['Cabin'] text-[32px] font-medium"
              data-node="feature1_title"
              data-node-type="text"
              data-node-default="Business CRM"
            >
              {{feature1_title}}
            </h3>
            <p
              class="text-[#7E7E7E] text-[24px] leading-[130%] max-w-[600px]"
              data-node="feature1_desc"
              data-node-type="text"
              data-node-default="Get organized and automate follow-up with Keep's client management software."
            >
              {{feature1_desc}}
            </p>
          </div>
        </div>
      </div>

      <!-- FEATURE 2 -->
      <div class="flex items-center gap-6 mb-14">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#D3FF5B]"></div>
        <div class="flex gap-4">
          <img
            src="{{feature2_icon}}"
            class="w-[42px] h-[42px] mt-1"
            data-node="feature2_icon"
            data-node-type="file"
            data-node-default="./assets/Email Marketing.svg"
          />
          <div class="flex flex-col gap-2">
            <h3
              class="text-white font-['Cabin'] text-[32px] font-medium"
              data-node="feature2_title"
              data-node-type="text"
              data-node-default="Email Marketing"
            >
              {{feature2_title}}
            </h3>
            <p
              class="text-[#7E7E7E] text-[24px] leading-[130%] max-w-[600px]"
              data-node="feature2_desc"
              data-node-type="text"
              data-node-default="Convert more leads with easy-to-build emails plus automation & CRM."
            >
              {{feature2_desc}}
            </p>
          </div>
        </div>
      </div>

      <!-- FEATURE 3 -->
      <div class="flex items-center gap-6">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#CBD5E1]"></div>
        <div class="flex gap-4">
          <img
            src="{{feature3_icon}}"
            class="w-[42px] h-[42px] mt-1"
            data-node="feature3_icon"
            data-node-type="file"
            data-node-default="./assets/Sales Automation.svg"
          />
          <div class="flex flex-col gap-2">
            <h3
              class="text-white font-['Cabin'] text-[32px] font-medium"
              data-node="feature3_title"
              data-node-type="text"
              data-node-default="Sales Automation"
            >
              {{feature3_title}}
            </h3>
            <p
              class="text-[#7E7E7E] text-[24px] leading-[130%] max-w-[600px]"
              data-node="feature3_desc"
              data-node-type="text"
              data-node-default="Automation capabilities were built to amplify every stage of your sales cycle."
            >
              {{feature3_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
