<section data-component-type="Content" class="relative py-12 lg:py-24" data-component-slug="ss-agriculture-template-our-promise">
  <div class="bg-[#184435] absolute top-0 left-0 w-full h-[70%] z-0"></div>
  <div class="bg-white absolute bottom-0 left-0 w-full h-[30%] z-0"></div>
  <div class="px-4 sm:px-16 relative z-10">
    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between xl:gap-[250px] lg:gap-[30px] md:gap-3 gap-2 mb-12 lg:mb-16">
      <!-- Left: Badge + Title -->
      <div class="lg:w-1/2">
        <!-- Badge -->
        <span class="inline-block bg-white text-[#666666] text-sm font-medium px-4 py-1.5 rounded-full mb-6 font-['Chivo']">
          <span data-node="promise_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Promise">{{promise_badge}}</span>
        </span>

        <!-- Title -->
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white leading-tight">
          <span data-node="promise_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Enabling Growth With Smarter, Sustainable Farming">{{promise_title}}</span>
        </h2>
      </div>

      <!-- Right: Subtitle -->
      <div class="lg:w-1/2 lg:pt-12 self-start lg:self-end">
        <p class="text-white/80 text-lg leading-[1] font-['Chivo']">
          <span data-node="promise_subtitle" data-node-type="textarea" data-node-label="Section Subtitle" data-node-default="We focus on solutions that respect the soil, empower farmers, and build resilient agricultural communities.">{{promise_subtitle}}</span>
        </p>
      </div>
    </div>

    <!-- Feature Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-6 w-full auto-rows-fr">
      <!-- Card 1 -->
      {{#if show_card_1}}
      <div class="bg-white rounded-2xl px-6 py-8 shadow-lg min-h-[375px] flex flex-col">
        <div class="flex-grow">
          <div class="h-16 w-16 bg-[#184435] rounded-xl flex items-center justify-center text-white text-xl font-bold">
            1
          </div>
        </div>
        <div class="min-h-[140px]">
          <h3 class="text-2xl font-bold text-[#2a2622]">
            <span data-node="card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Sustainable Inputs">{{card_1_title}}</span>
          </h3>
          <p class="text-[#636363] text-[20px] leading-[1] font-['Chivo']">
            <span data-node="card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Eco-friendly products designed to protect soil and increase crop health. Built for long-term farm resilience.">{{card_1_desc}}</span>
          </p>
        </div>
      </div>
      {{/if}}

      <!-- Card 2 -->
      {{#if show_card_2}}
      <div class="bg-white rounded-2xl px-6 py-8 shadow-lg min-h-[375px] flex flex-col">
        <div class="flex-grow">
          <div class="h-16 w-16 bg-[#184435] rounded-xl flex items-center justify-center text-white text-xl font-bold">
            2
          </div>
        </div>
        <div class="min-h-[140px]">
          <h3 class="text-2xl font-bold text-[#2a2622]">
            <span data-node="card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Advanced Tools">{{card_2_title}}</span>
          </h3>
          <p class="text-[#636363] text-[20px] leading-[1] font-['Chivo']">
            <span data-node="card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Modern equipment that reduces labor and elevates farm efficiency. Engineered for everyday simplicity.">{{card_2_desc}}</span>
          </p>
        </div>
      </div>
      {{/if}}

      <!-- Card 3 -->
      {{#if show_card_3}}
      <div class="bg-white rounded-2xl px-6 py-8 shadow-lg min-h-[375px] flex flex-col">
        <div class="flex-grow">
          <div class="h-16 w-16 bg-[#184435] rounded-xl flex items-center justify-center text-white text-xl font-bold">
            3
          </div>
        </div>
        <div class="min-h-[140px]">
          <h3 class="text-2xl font-bold text-[#2a2622]">
            <span data-node="card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Scientific Support">{{card_3_title}}</span>
          </h3>
          <p class="text-[#636363] text-[20px] leading-[1] font-['Chivo']">
            <span data-node="card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="Crop-specific guidance backed by years of agricultural research. Expert insights at every stage.">{{card_3_desc}}</span>
          </p>
        </div>
      </div>
      {{/if}}

      <!-- Card 4 -->
      {{#if show_card_4}}
      <div class="bg-white rounded-2xl px-6 py-8 shadow-lg min-h-[375px] flex flex-col">
        <div class="flex-grow">
          <div class="h-16 w-16 bg-[#184435] rounded-xl flex items-center justify-center text-white text-xl font-bold">
            4
          </div>
        </div>
        <div class="min-h-[140px]">
          <h3 class="text-2xl font-bold text-[#2a2622]">
            <span data-node="card_4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="Reliable Delivery">{{card_4_title}}</span>
          </h3>
          <p class="text-[#636363] text-[20px] leading-[1] font-['Chivo']">
            <span data-node="card_4_desc" data-node-type="textarea" data-node-label="Card 4 Description" data-node-default="Consistent supply of products and support right when you need them. On time, every time.">{{card_4_desc}}</span>
          </p>
        </div>
      </div>
      {{/if}}
    </div>
  </div>
</section>