<section data-component-type="Content" class="bg-[#184435] py-16 lg:py-24" data-component-slug="ss-agriculture-template-our-approach">
  <div class="px-4 sm:px-16">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-16">
      <!-- Left Column: Image + Description + CTA -->
      <div class="lg:w-1/2 flex flex-col">
        <!-- Main Image -->
        <div class="rounded-2xl overflow-hidden mb-8">
          <img data-node="approach_image_1" data-node-type="file" data-node-label="Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346771/seltrix/templates/ss-agriculture-template/farmer-harvest.jpg" src="{{approach_image_1}}" alt="Farmer with harvest" class="w-full h-[400px] lg:h-[500px] object-cover">
        </div>

        <!-- Description Text -->
        <p class="text-white/80 text-base lg:text-lg leading-relaxed mb-8 font-['Chivo']">
          <span data-node="approach_description" data-node-type="textarea" data-node-label="Description" data-node-default="We work closely with farmers to strengthen their fields, maximize production, and reduce long-term costs, helping every farm grow with confidence">{{approach_description}}</span>
        </p>

        <!-- CTA Button -->
        {{#if show_approach_cta}}
        <div>
          <a data-node="approach_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="services" href="{{approach_cta_link}}" class="inline-block text-white px-8 py-4 text-base font-medium hover:bg-[#254a2f] transition-colors border border-white">
            <span data-node="approach_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Get Started">{{approach_cta_text}}</span>
          </a>
        </div>
        {{/if}}
      </div>

      <!-- Right Column: Badge + Title + Features + Image -->
      <div class="lg:w-1/2 flex flex-col">
        <!-- Badge -->
        <span class="inline-block w-fit bg-white text-[#666666] text-sm font-medium px-4 py-1.5 rounded-full mb-6 border border-white/30 font-['Chivo']">
          <span data-node="approach_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Approach">{{approach_badge}}</span>
        </span>

        <!-- Title -->
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white leading-tight mb-6">
          <span data-node="approach_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Better Farming Solutions">{{approach_title}}</span>
        </h2>

        <!-- Subtitle -->
        <p class="text-white/70 text-base lg:text-lg leading-relaxed mb-8 font-['Chivo']">
          <span data-node="approach_subtitle" data-node-type="textarea" data-node-label="Subtitle" data-node-default="We combine practical field knowledge with scientific innovation to deliver dependable farming outcomes.">{{approach_subtitle}}</span>
        </p>

        <!-- Features List -->
        <div class="space-y-4 mb-8">
          <!-- Feature 1 -->
          {{#if show_approach_feature_1}}
          <div class="flex items-start gap-3">
            <div class="flex-shrink-0 w-6 h-6 mt-0.5">
              <svg viewBox="0 0 24 24" fill="none" class="w-6 h-6">
                <circle cx="12" cy="12" r="10" fill="#D97706"/>
                <path d="M8 12l3 3 5-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <p class="text-white/80 text-sm lg:text-base font-['Chivo']">
              <span class="text-white font-medium">
                <span data-node="approach_feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Tailored Solutions:">{{approach_feature_1_title}}</span>
              </span>
              <span data-node="approach_feature_1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Customized plans based on crop type, soil condition, and season.">{{approach_feature_1_desc}}</span>
            </p>
          </div>
          {{/if}}

          <!-- Feature 2 -->
          {{#if show_approach_feature_2}}
          <div class="flex items-start gap-3">
            <div class="flex-shrink-0 w-6 h-6 mt-0.5">
              <svg viewBox="0 0 24 24" fill="none" class="w-6 h-6">
                <circle cx="12" cy="12" r="10" fill="#D97706"/>
                <path d="M8 12l3 3 5-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <p class="text-white/80 text-sm lg:text-base font-['Chivo']">
              <span class="text-white font-medium">
                <span data-node="approach_feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Seasonal Support:">{{approach_feature_2_title}}</span>
              </span>
              <span data-node="approach_feature_2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="End-to-end assistance through planting, growth, and harvesting.">{{approach_feature_2_desc}}</span>
            </p>
          </div>
          {{/if}}
        </div>

        <!-- Second Image -->
        <div class="rounded-2xl overflow-hidden mt-auto">
          <img data-node="approach_image_2" data-node-type="file" data-node-label="Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346792/seltrix/templates/ss-agriculture-template/tractor-field.jpg" src="{{approach_image_2}}" alt="Tractor in field" class="w-full h-[250px] lg:h-[300px] object-cover">
        </div>
      </div>
    </div>
  </div>
</section>