{{-- Sección de FAQs (accordion). Consume el MISMO dato que alimenta el nodo
     FAQPage del JSON-LD: un arreglo de ['name' => pregunta, 'text' => respuesta]
     (ver PageFaqMap). Componente autónomo: la página que quiera mostrar FAQs hace
     <x-seo.faq-section :items="$seoPage['faqs']" />. El toggle abre/cierra por JS
     (resources/js/faq-accordion.js) animando max-height; sin GSAP.

     Nota de coherencia: cuando esta sección se monte en una página, encender su
     `includeFaqSchema` en PageSeoService para que el FAQPage acompañe al contenido
     visible (hoy home lo tiene APAGADO porque la sección todavía no está montada). --}}
@props([
    'items' => [],
    'title' => 'Frequently Asked Questions',
    'id' => 'faq',
])

@if (!empty($items))
  <section id="{{ $id }}" data-faq-root class="bg-surface py-16 md:py-24">
    <div class="container mx-auto max-w-3xl">
      <h2 class="title-faqs mb-8 text-center font-semibold text-fg md:mb-12">
        {{ $title }}
      </h2>

      <div class="divide-y divide-line/60 border-y border-line/60">
        @foreach ($items as $index => $item)
          @php $itemId = "{$id}-item-{$index}"; @endphp

          <div class="py-1" data-faq-item>
            <button type="button" class="group flex w-full cursor-pointer items-center justify-between gap-4 py-5 text-left"
              data-faq-trigger aria-expanded="false" aria-controls="{{ $itemId }}">
              <span class="text-lg font-medium text-fg transition-colors group-hover:text-brand-light">
                {{ $item['name'] }}
              </span>
              <x-lucide-chevron-down
                class="h-5 w-5 shrink-0 text-brand-light transition-transform duration-300"
                data-faq-icon />
            </button>

            <div id="{{ $itemId }}" data-faq-content
              class="max-h-0 overflow-hidden transition-[max-height] duration-500 ease-in-out">
              <p class="pb-5 leading-relaxed text-muted">
                {{ $item['text'] }}
              </p>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
@endif