<?php
/**
 * FAQ SECTION — Product Based
 */

if (!isset($product) || empty($product)) {
    return;
}

$faqs = $product['faqs'] ?? null;

if (!is_array($faqs) || empty($faqs)) {
    return;
}
?>

<section class="home-section faq-section" id="faq">

    <div class="container">

        <div class="section-head">
            <h2><?= __('sections.faq', 'FAQ') ?></h2>
        </div>

        <div class="faq-list">

            <?php foreach ($faqs as $i => $f): ?>
                <?php
                    $q = $f['q'] ?? '';
                    $a = $f['a'] ?? '';

                    if ($q === '' || $a === '') {
                        continue;
                    }
                ?>
                <div class="faq-item">
                    <button type="button"
                            class="faq-question"
                            data-index="<?= (int)$i ?>">
                        <?= htmlspecialchars($q, ENT_QUOTES, 'UTF-8') ?>
                    </button>

                    <div class="faq-answer">
                        <?= htmlspecialchars($a, ENT_QUOTES, 'UTF-8') ?>
                    </div>
                </div>
            <?php endforeach; ?>

        </div>

    </div>

</section>

<script>
(function () {
    document.querySelectorAll('.faq-question').forEach(btn => {
        btn.addEventListener('click', () => {
            btn.parentElement.classList.toggle('open');
        });
    });
})();
</script>
