<script setup>
    import CardFaq from '../components/CardFaq.vue';
    import faqs from '../data/faqs.json';

</script>

<template>
    <div class="container">
        <h1 class="title mt-5">Preguntas frecuentes</h1>
        <div v-for="section in faqs">
            <h2 class="title-section mt-4">{{ section.section }}</h2>
            <CardFaq
                v-for="faq in section.items"
                :question="faq.question"
                :answer="faq.answer"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .title-section {
        font-size: 1.4rem;
        font-weight: 600;
    }
</style>