---
import Root from '../layouts/Root.astro';
import Main from '../layouts/Bundle.astro';
import { faq } from '../data';
import type { Faq } from '../types';
---

<Root 
  title="Contactenos"
  description="Completa nuestro formulario para recibir información personalizada \
  sobre nuestros cursos, carreras y facilidades de pago."
  path='/faq/'>
  <Main className='container content-space-t-5' id='contact'>
    <div class="text-center mb-5 mb-md-7">
      <h1 class="text-white">Preguntas Frecuentes</h1>
      <p class="text-white">Busca en nuestras preguntas frecuentes lo que estas interesado en saber</p>
    </div>
    <div class="container content-space-2 content-space-b-lg-3">
      <div class="w-lg-75 mx-lg-auto">
        <div class="d-grid gap-10">
          <div class="d-grid gap-3">
            <div class="accordion accordion-flush accordion-lg" id="accordionFAQBasics">
              {faq &&
                faq.map((faq: Faq) => (
                    <div class="accordion-item">
                    <div class="accordion-header" id={`headingBasics${faq.number}`}>
                      <a class="accordion-button collapsed text-white" role="button" data-bs-toggle="collapse" data-bs-target={`#collapseBasics${faq.number}`} aria-expanded="true" aria-controls={`collapseBasics${faq.number}`}>
                        {faq.header}
                      </a>
                    </div>
                    <div id={`collapseBasics${faq.number}`} class="accordion-collapse collapse text-white" aria-labelledby={`headingBasics${faq.number}`} data-bs-parent="#accordionFAQBasics">
                      <div class="accordion-body">
                        {faq.body}
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </Main>
</Root>
