<div class="w-100">
  <?php 
    $sectionHeading = get_sub_field('section_heading');
    $sectionDescription = get_sub_field('section_description');
  ?>
  <?php if ($sectionHeading) : ?>
    <h2 class="text-4xl font-black">
      <?php echo $sectionHeading; ?>
    </h2>
  <?php endif; ?>
  <?php if ($sectionDescription) : ?>
    <p class="text-base">
      <?php echo $sectionDescription; ?>
    </p>
  <?php endif; ?>

  <?php if (have_rows('faq_items')) : ?>
    <dl class="space-y-2" role="region" aria-label="<?php echo $sectionHeading; ?>">
      <?php while (have_rows('faq_items')) : the_row(); ?>
        <?php
          $single = get_sub_field('single_item');
          if ($single) :
            $question = $single['single_question'];
            $answer = strip_tags($single['single_answer']);
        ?>
          <div x-data="{ open: false }">
            <dt class="bg-gray-200 flex items-center justify-between cursor-pointer select-none p-3" @click="open = !open" >
              <button class="border-none bg-transparent font-black cursor-pointer" aria-expanded="false" aria-controls="question-<?php echo get_row_index(); ?>">
                <?php echo $question; ?>
              </button>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                <path x-show="open"  stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </dt>
            <dd id="question-<?php echo get_row_index(); ?>" class="p-3" x-show="open"
              x-transition:enter="transition ease-in-out duration-300"
              x-transition:enter-start="opacity-0 transform -translate-y-6"
              x-transition:enter-end="opacity-100 transform translate-y-0"
              x-transition:leave="transition ease-in-out"
              x-transition:leave-start="opacity-100 transform translate-y-0"
              x-transition:leave-end="opacity-0 transform -translate-y-6"
            >
              <p class="text-base"><?php echo $answer; ?></p>
            </dd>
          </div>
        <?php endif; ?>
      <?php endwhile; ?>
    </dl>
  <?php endif; ?>
</div>

<div class="w-100">
  <?php 
    $sectionHeading = get_sub_field('section_heading');
    $sectionDescription = get_sub_field('section_description');
  ?>
  <?php if ($sectionHeading) : ?>
    <h2 class="text-4xl font-black">
      <?php echo $sectionHeading; ?>
    </h2>
  <?php endif; ?>
  <?php if ($sectionDescription) : ?>
    <p class="text-base">
      <?php echo $sectionDescription; ?>
    </p>
  <?php endif; ?>

  <?php if (have_rows('faq_items')) : ?>
    <dl class="space-y-2" role="region" aria-label="<?php echo $sectionHeading; ?>">
      <?php while (have_rows('faq_items')) : the_row(); ?>
        <?php
          $single = get_sub_field('single_item');
          if ($single) :
            $question = $single['single_question'];
            $answer = strip_tags($single['single_answer']);
        ?>
          <details x-data="{ open: false }"></details>
            <summary class="flex items-center justify-between cursor-pointer select-none bg-gray-200 p-3" @click="open = !open" >
              <button class="border-none bg-transparent font-black cursor-pointer" aria-expanded="false" aria-controls="question-<?php echo get_row_index(); ?>">
                <?php echo $question; ?>
              </button>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                <path x-show="open"  stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <dd id="question-<?php echo get_row_index(); ?>" class="p-3 bg-transparent" x-show="open"
            x-transition:enter="transition ease-in-out duration-300"
              x-transition:enter-start="opacity-0 transform -translate-y-6"
              x-transition:enter-end="opacity-100 transform translate-y-0"
              x-transition:leave="transition ease-in-out"
              x-transition:leave-start="opacity-100 transform translate-y-0"
              x-transition:leave-end="opacity-0 transform -translate-y-6">
              <p class="text-base"><?php echo $answer; ?></p>
            </dd>
          </details>
        <?php endif; ?>
      <?php endwhile; ?>
    </dl>
  <?php endif; ?>
</div>
