sfp_front_nuxt_iguassu_alliance/app/components/FaqSection.vue

<template>
    <section class="w-full bg-[#F6FFE9] py-18">
        <div class="max-w-[1200px] mx-auto flex justify-between gap-30">
            <div class="flex flex-col gap-4 itens-center">
                <span class="inline-flex items-center justify-center max-w-[127px] h-[53.05px] rounded-full
                border-[1.55px] border-[#8DC63F] bg-[var(--color-primary)] text-white text-2xl font-bold">
                FAQ</span>
                <p style="font-family: var(--font-inter)"   class="font-semibold text-[88px] leading-[106px] tracking-[-0.03em]">
                    Perguntas <br>Frequentes
                </p>
            </div>
            <div class="flex flex-col items-end gap-4">
                <div v-for="(faq, index) in faqs"
                :key="index"
                class="min-w-[677px] bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-5 items-center">
                    <div @click="toggleIsOpen(index)" class="flex items-center justify-between w-full">
                        <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                            {{ faq.question }}
                        </p>
                        <button class="text-white text-[26.34px] leading-none flex-end">
                            {{ openIndex === index ? '-' : '+' }}
                        </button>
                    </div>
                   <div v-if="openIndex == index" class="mt-4 text-white/70 text-base">
                        <p>{{ faq.answer }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

    const openIndex = ref<number | null>(null)
    function toggleIsOpen(indexClicked: number) {
        openIndex.value = openIndex.value === indexClicked ? null  : indexClicked
    }

    const faqs = [
    {
    question: "A Kyon substitui todos os sistemas que uso hoje?",
    answer:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
    },
    {
    question: "Como funciona o Prontuário unificado?",
    answer:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
    },
    {
    question: "O agente de IA realmente atende pacientes no WhatsApp?",
    answer:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
    },
    {
    question: "A telemedicina é integrada ou preciso de outra plataforma?",
    answer:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
    },
    {
    question: "Como funciona a auditoria LGPD?",
    answer:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
    }
    ]
</script>