<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-agriculture-template-our-expertise">
  <div class="px-4 sm:px-16">
    <div class="flex flex-col lg:flex-row lg:justify-between gap-12 lg:gap-24">
      <!-- Left Column: Badge + Title + Description -->
      <div class="lg:w-1/2 flex flex-col justify-between">
        <div>
          <!-- Badge -->
          <span class="inline-block bg-[#f5f5f5] text-[#666666] text-sm font-medium px-4 py-1.5 rounded-full mb-6 border-[2px] border-[#DCDCDC] font-['Chivo']">
            <span data-node="expertise_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Expertise">{{expertise_badge}}</span>
          </span>

          <!-- Title -->
          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight">
            <span data-node="expertise_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Transforming Farmlands With Innovation, Knowledge, and Real Results">{{expertise_title}}</span>
          </h2>
        </div>

        <!-- Description at bottom -->
        <p class="text-[#636363] text-base leading-[1] font-['Chivo'] mt-8 lg:mt-0">
          <span data-node="expertise_description" data-node-type="textarea" data-node-label="Description" data-node-default="We help farmers adopt better methods, access improved resources, and achieve greater profitability. Each service is built to address real challenges, from unpredictable weather to high resource costs.">{{expertise_description}}</span>
        </p>
      </div>
      <span class="block border-l-[2px] border-[#DCDCDC]"></span>
      <!-- Right Column: Feature List -->
      <div class="lg:w-1/2 space-y-8">
        <!-- Feature 1: Soil Optimization -->
        {{#if show_expertise_1}}
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767358521/seltrix/templates/ss-agriculture-template/show_expertise_1.svg" alt srcset>

          </div>
          <div>
            <h3 class="text-xl font-bold text-[#2a2622] mb-2">
              <span data-node="expertise_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Soil Optimization">{{expertise_1_title}}</span>
            </h3>
            <p class="text-[#636363] text-base leading-[1] font-['Chivo']">
              <span data-node="expertise_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Testing and treatments that enhance fertility and long-term soil strength.">{{expertise_1_desc}}</span>
            </p>
          </div>
        </div>
        {{/if}}

        <!-- Feature 2: Crop Management -->
        {{#if show_expertise_2}}
        <span class="block border-t-[2px] border-[#DCDCDC]"></span>
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767358522/seltrix/templates/ss-agriculture-template/show_expertise_2.svg" alt srcset>
          </div>
          <div>
            <h3 class="text-xl font-bold text-[#2a2622] mb-2">
              <span data-node="expertise_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Crop Management">{{expertise_2_title}}</span>
            </h3>
            <p class="text-[#636363] text-base leading-[1] font-['Chivo']">
              <span data-node="expertise_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Season-based strategies to improve health, yield, and resistance.">{{expertise_2_desc}}</span>
            </p>
          </div>
        </div>
        {{/if}}

        <!-- Feature 3: Farm Automation -->
        {{#if show_expertise_3}}
        <span class="block border-t-[2px] border-[#DCDCDC]"></span>
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767358523/seltrix/templates/ss-agriculture-template/show_expertise_3.svg" alt srcset>

          </div>
          <div>
            <h3 class="text-xl font-bold text-[#2a2622] mb-2">
              <span data-node="expertise_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Farm Automation">{{expertise_3_title}}</span>
            </h3>
            <p class="text-[#636363] text-base leading-[1] font-['Chivo']">
              <span data-node="expertise_3_desc" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Tech-driven solutions that reduce manual effort and increase accuracy.">{{expertise_3_desc}}</span>
            </p>
          </div>
        </div>
        {{/if}}

        <!-- Feature 4: Resource Efficiency -->
        {{#if show_expertise_4}}
        <span class="block border-t-[2px] border-[#DCDCDC]"></span>
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767358525/seltrix/templates/ss-agriculture-template/show_expertise_4.svg" alt srcset>
          </div>
          <div>
            <h3 class="text-xl font-bold text-[#2a2622] mb-2">
              <span data-node="expertise_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Resource Efficiency">{{expertise_4_title}}</span>
            </h3>
            <p class="text-[#636363] text-base leading-[1] font-['Chivo']">
              <span data-node="expertise_4_desc" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Water, nutrient, and energy-saving methods tailored for every farm size.">{{expertise_4_desc}}</span>
            </p>
          </div>
        </div>
        {{/if}}
      </div>
    </div>
    <span class="block mt-12 border-t-[2px] border-[#DCDCDC]"></span>
  </div>
</section>