<section data-component-type="Content" class="relative bg-white py-16 lg:py-24 overflow-hidden" data-component-slug="ss-agriculture-template-why-choose-us">
  <div class="max-w-[1400px] mx-auto px-4 sm:px-16 lg:px-8">
    <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
      <!-- LEFT: Circular Images -->
      <div class="relative w-full lg:w-1/2 flex justify-center lg:justify-start">
        <!-- Large Circle Image -->
        <div class="relative">
          <div class="w-[280px] h-[280px] sm:w-[350px] sm:h-[350px] lg:w-[420px] lg:h-[420px] rounded-full overflow-hidden shadow-xl">
            <img data-node="why_image_1" data-node-type="file" data-node-label="Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346794/seltrix/templates/ss-agriculture-template/why-main.png" src="{{why_image_1}}" alt="Farmer in field" class="w-full h-full object-cover">
          </div>
          <!-- Small Overlapping Circle -->
          <div class="absolute -bottom-4 -right-4 sm:bottom-0 sm:right-0 lg:-bottom-6 lg:-right-6 w-[140px] h-[140px] sm:w-[180px] sm:h-[180px] lg:w-[200px] lg:h-[200px] rounded-full overflow-hidden shadow-xl">
            <img data-node="why_image_2" data-node-type="file" data-node-label="Secondary Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346795/seltrix/templates/ss-agriculture-template/why-secondary.png" src="{{why_image_2}}" alt="Hands with soil" class="w-full h-full object-cover">
          </div>
        </div>
      </div>

      <!-- RIGHT: Content -->
      <div class="w-full lg:w-1/2">
        <!-- Title -->
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#2a2622] mb-4">
          <span data-node="why_title" data-node-type="text" data-node-label="Section Title" data-node-default="Why Choose Us">{{why_title}}</span>
        </h2>

        <!-- Subtitle -->
        <p class="text-lg text-[#5a5650] mb-8 font-['Chivo']">
          <span data-node="why_subtitle" data-node-type="textarea" data-node-label="Section Subtitle" data-node-default="Your trusted partner for sustainable farming, modern tools, and reliable agricultural support.">{{why_subtitle}}</span>
        </p>

        <!-- Feature List -->
        <ul class="space-y-5 mb-8">
          {{#if show_feature_1}}
          <li class="flex items-start gap-4">
            <div class="flex-shrink-0 w-7 h-7 bg-[#2f5a3a] rounded-full flex items-center justify-center mt-0.5">
              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <p class="text-[#2a2622] font-['Chivo']">
              <span class="font-semibold" data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Quality Products:">{{feature_1_title}}</span>
              <span data-node="feature_1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Premium seeds, fertilizers, and tools engineered for better farm performance.">{{feature_1_desc}}</span>
            </p>
          </li>
          {{/if}} {{#if show_feature_2}}
          <li class="flex items-start gap-4">
            <div class="flex-shrink-0 w-7 h-7 bg-[#2f5a3a] rounded-full flex items-center justify-center mt-0.5">
              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <p class="text-[#2a2622] font-['Chivo']">
              <span class="font-semibold" data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Expert Guidance:">{{feature_2_title}}</span>
              <span data-node="feature_2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="Dedicated agronomists offering season-round support and crop planning.">{{feature_2_desc}}</span>
            </p>
          </li>
          {{/if}} {{#if show_feature_3}}
          <li class="flex items-start gap-4">
            <div class="flex-shrink-0 w-7 h-7 bg-[#2f5a3a] rounded-full flex items-center justify-center mt-0.5">
              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <p class="text-[#2a2622] font-['Chivo']">
              <span class="font-semibold" data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Future-Ready Farming:">{{feature_3_title}}</span>
              <span data-node="feature_3_desc" data-node-type="text" data-node-label="Feature 3 Description" data-node-default="Smart technologies that simplify operations and boost long-term output.">{{feature_3_desc}}</span>
            </p>
          </li>
          {{/if}}
        </ul>

        <!-- Description -->
        <p class="text-[#5a5650] leading-relaxed font-['Chivo']">
          <span data-node="why_description" data-node-type="textarea" data-node-label="Description Text" data-node-default="We empower farmers with resources that matter, from soil insights to modern cultivation techniques, ensuring every harvest reaches its full potential.">{{why_description}}</span>
        </p>
      </div>
    </div>
  </div>

  <!-- Marquee Banners -->
  <div class="mt-16 lg:mt-24 relative">
    <!-- Orange Banner (tilted right) -->
    <div class="absolute w-[120%] -left-[10%] top-6 bg-[#E48500] py-2 md:py-3 rotate-[5.5deg] lg:rotate-[2.5deg] origin-center shadow-lg overflow-hidden font-['Chivo']">
      <div class="marquee-container flex whitespace-nowrap animate-marquee-reverse gap-4">
        <!-- Repeating pattern: Star + Text -->
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-[#2a2622] text-lg font-medium">{{marquee_text}}</span>
        </span>
      </div>
    </div>
    <!-- Green Banner (tilted left) -->
    <div class="absolute w-[120%] -left-[10%] top-6 bg-[#184435] py-2 md:py-3 -rotate-[10.5deg] lg:-rotate-[3.5deg] origin-center shadow-lg overflow-hidden font-['Chivo']">
      <div class="marquee-container flex whitespace-nowrap animate-marquee gap-4">
        <!-- Repeating pattern: Star + Text -->
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium" data-node="marquee_text" data-node-type="text" data-node-label="Marquee Text" data-node-default="Organic Products">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
        <span class="marquee-item flex items-center gap-4">
          <svg width="32" height="32" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.234 -6.77964e-06L25.0325 18.5459L44.1145 20.2359L25.5686 25.0345L23.8785 44.1164L19.08 25.5705L-0.00194635 23.8805L18.544 19.0819L20.234 -6.77964e-06Z" fill="white"/>
          </svg>
          <span class="text-white text-sm md:text-lg  font-medium">{{marquee_text}}</span>
        </span>
      </div>
    </div>

    <!-- Spacer for marquee banners -->
    <div class="h-24"></div>
  </div>
</section>