<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-agriculture-template-faq">
  <div class="px-4 sm:px-16">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-16">
      <!-- Left Column: Image -->
      <div class="lg:w-1/2">
        <div class="rounded-2xl overflow-hidden">
          <img data-node="faq_image" data-node-type="file" data-node-label="FAQ Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346770/seltrix/templates/ss-agriculture-template/faq-farmer.jpg" src="{{faq_image}}" alt="Farmer in field" class="w-full h-[400px] lg:h-[500px] object-cover">
        </div>
      </div>

      <!-- Right Column: FAQ Content -->
      <div class="lg:w-1/2">
        <!-- Title -->
        <h2 class="text-3xl sm:text-4xl font-bold text-[#2a2622] leading-tight mb-4">
          <span data-node="faq_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Frequently Asked Questions">{{faq_title}}</span>
        </h2>

        <!-- Subtitle -->
        <p class="text-[#636363] text-base leading-relaxed mb-8 font-['Bricolage_Grotesque']">
          <span data-node="faq_subtitle" data-node-type="textarea" data-node-label="Subtitle" data-node-default="Everything you need to know about our agricultural services and support.">{{faq_subtitle}}</span>
        </p>

        <!-- FAQ Accordion -->
        <div class="space-y-4 font-['Chivo']" id="faq-accordion">
          <!-- FAQ Item 1 -->
          {{#if show_faq_1}}
          <div class="border border-[#e5e5e5] rounded-lg overflow-hidden faq-item bg-gray-50">
            <button class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors faq-toggle" type="button" aria-expanded="true">
              <span class="text-[#2a2622] font-medium text-base lg:text-lg">
                <span data-node="faq_1_question" data-node-type="text" data-node-label="Question 1" data-node-default="How can I get support for my farm?">{{faq_1_question}}</span>
              </span>
              <svg class="w-5 h-5 text-[#636363] faq-icon transition-transform" style="transform: rotate(180deg)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="faq-content px-6 pb-4">
              <p class="text-[#636363] text-sm lg:text-base font-['Chivo']">
                <span data-node="faq_1_answer" data-node-type="textarea" data-node-label="Answer 1" data-node-default="You can contact our team for personalized guidance or request a consultation directly through our website.">{{faq_1_answer}}</span>
              </p>
            </div>
          </div>
          {{/if}}

          <!-- FAQ Item 2 -->
          {{#if show_faq_2}}
          <div class="border border-[#e5e5e5] rounded-lg overflow-hidden faq-item">
            <button class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors faq-toggle" type="button" aria-expanded="false">
              <span class="text-[#2a2622] font-medium text-base lg:text-lg">
                <span data-node="faq_2_question" data-node-type="text" data-node-label="Question 2" data-node-default="Do you support small farmers?">{{faq_2_question}}</span>
              </span>
              <svg class="w-5 h-5 text-[#636363] faq-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="faq-content hidden px-6 pb-4">
              <p class="text-[#636363] text-sm lg:text-base font-['Chivo']">
                <span data-node="faq_2_answer" data-node-type="textarea" data-node-label="Answer 2" data-node-default="Yes, we provide tailored solutions and resources for farms of all sizes, including small-scale and family-owned operations.">{{faq_2_answer}}</span>
              </p>
            </div>
          </div>
          {{/if}}

          <!-- FAQ Item 3 -->
          {{#if show_faq_3}}
          <div class="border border-[#e5e5e5] rounded-lg overflow-hidden faq-item">
            <button class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors faq-toggle" type="button" aria-expanded="false">
              <span class="text-[#2a2622] font-medium text-base lg:text-lg">
                <span data-node="faq_3_question" data-node-type="text" data-node-label="Question 3" data-node-default="Are your products certified?">{{faq_3_question}}</span>
              </span>
              <svg class="w-5 h-5 text-[#636363] faq-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="faq-content hidden px-6 pb-4">
              <p class="text-[#636363] text-sm lg:text-base font-['Chivo']">
                <span data-node="faq_3_answer" data-node-type="textarea" data-node-label="Answer 3" data-node-default="All our products meet industry standards and come with relevant certifications for quality and safety.">{{faq_3_answer}}</span>
              </p>
            </div>
          </div>
          {{/if}}

          <!-- FAQ Item 4 -->
          {{#if show_faq_4}}
          <div class="border border-[#e5e5e5] rounded-lg overflow-hidden faq-item">
            <button class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors faq-toggle" type="button" aria-expanded="false">
              <span class="text-[#2a2622] font-medium text-base lg:text-lg">
                <span data-node="faq_4_question" data-node-type="text" data-node-label="Question 4" data-node-default="Can I get soil testing or crop analysis?">{{faq_4_question}}</span>
              </span>
              <svg class="w-5 h-5 text-[#636363] faq-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="faq-content hidden px-6 pb-4">
              <p class="text-[#636363] text-sm lg:text-base font-['Chivo']">
                <span data-node="faq_4_answer" data-node-type="textarea" data-node-label="Answer 4" data-node-default="We offer comprehensive soil testing and crop analysis services to help optimize your farming practices.">{{faq_4_answer}}</span>
              </p>
            </div>
          </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</section>