<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'FAQs block preview')) {
    return;
}
$heading = get_field('heading');
$description = get_field('description');
$className = 'sk-faq-section sk-section-spacing ' . ($block['className'] ?? '');
?>
<section class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <div class="sk-head-section" data-aos="fade-up">
            <?php if (isset($heading) && !empty($heading)) : ?>
                <h2><?php echo esc_html($heading); ?></h2>
            <?php endif; ?>
            <?php if (isset($description) && !empty($description)) : ?>
                <p><?php echo wp_kses_post($description); ?></p>
            <?php endif; ?>
        </div>
        <div class="accordion" id="faqAccordion">
            <?php
            if (have_rows('experience_cards')) :
                $faq_index = 0;
                while (have_rows('experience_cards')) : the_row();
                    $card_heading = get_sub_field('card_heading');
                    $card_description = get_sub_field('card_description');
                    $is_first = ($faq_index === 0);
                    $collapse_class = $is_first ? 'show' : '';
                    $button_class = $is_first ? '' : 'collapsed';
            ?>
                    <div class="accordion-item" data-aos="fade-up">
                        <h2 class="accordion-header" id="heading<?php echo esc_attr($faq_index); ?>">
                            <button class="accordion-button <?php echo esc_attr($button_class); ?>" type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse<?php echo esc_attr($faq_index); ?>"
                                aria-expanded="<?php echo $is_first ? 'true' : 'false'; ?>">
                                <?php
                                if (isset($card_heading) && !empty($card_heading)) :
                                    echo esc_html($card_heading);
                                endif;
                                ?>
                            </button>
                        </h2>
                        <div id="collapse<?php echo esc_attr($faq_index); ?>" class="accordion-collapse collapse <?php echo esc_attr($collapse_class); ?>" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <?php
                                if (isset($card_description) && !empty($card_description)) :
                                    echo wp_kses_post($card_description);
                                endif;
                                ?>
                            </div>
                        </div>
                    </div>
            <?php
                    $faq_index++;
                endwhile;
            endif;
            ?>
        </div>
    </div>
</section>