{{- $wcPage := .wcPage -}}
{{- $wcBlock := .wcBlock -}}
{{- $wcIdentifier := .wcIdentifier -}}

{{/* Enable Alpine.js for interactive accordion */}}
{{ $wcPage.Page.Store.Set "has_alpine" true }}

{{- $st := $wcBlock.design.spacing | default dict -}}
{{- $pad := $st.padding | default (slice "20px" "0" "20px" "0") -}}
{{- $pad_sm := slice "3rem" "0" -}}
{{- $mar := $st.margin | default (slice "0" "0" "0" "0") -}}

{{- $bg := $wcBlock.design.background | default dict -}}
{{- $bg_color_val := $bg.color | default "" -}}

<section id="{{ $wcIdentifier }}" class="hb-section {{ $bg_color_val }}" style="padding: {{ delimit $pad " " }}; padding-top: clamp({{ index $pad_sm 0 }}, {{ index $pad 0 }}, {{ index $pad 0 }}); padding-bottom: clamp({{ index $pad_sm 1 }}, {{ index $pad 2 }}, {{ index $pad 2 }}); margin: {{ delimit $mar " " }};">
  <div class="mx-auto max-w-screen-xl px-6 lg:px-8">

    {{- with $wcBlock.content.title -}}
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
        {{ . | markdownify | emojify }}
      </h2>
      {{- with $wcBlock.content.subtitle -}}
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">
        {{ . | markdownify | emojify }}
      </p>
      {{- end -}}
    </div>
    {{- end -}}

    {{- with $wcBlock.content.text -}}
    <div class="prose prose-slate dark:prose-invert max-w-3xl mx-auto mb-8">
      {{ . | markdownify | emojify }}
    </div>
    {{- end -}}

    {{- $items := $wcBlock.content.items | default slice -}}
    
    {{- if $items -}}
    <div class="max-w-3xl mx-auto" x-data="{ openItem: null }">
      <div class="space-y-4">
        {{- range $index, $item := $items -}}
        <div class="faq-item border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-sm">
          <button
            type="button"
            class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
            @click="openItem = openItem === {{ $index }} ? null : {{ $index }}"
            :aria-expanded="openItem === {{ $index }}"
          >
            <span class="font-semibold text-gray-900 dark:text-gray-100 pr-8">
              {{ $item.question | markdownify | emojify }}
            </span>
            <svg
              class="w-5 h-5 text-gray-500 transition-transform flex-shrink-0"
              :class="{ 'rotate-180': openItem === {{ $index }} }"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div
            x-show="openItem === {{ $index }}"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 transform -translate-y-2"
            x-transition:enter-end="opacity-100 transform translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 transform translate-y-0"
            x-transition:leave-end="opacity-0 transform -translate-y-2"
            class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700"
          >
            <div class="prose prose-slate dark:prose-invert max-w-none">
              {{ $item.answer | markdownify | emojify }}
            </div>
          </div>
        </div>
        {{- end -}}
      </div>
    </div>
    {{- end -}}

    {{- with $wcBlock.content.button -}}
    <div class="mt-10 text-center">
      <a href="{{ .url }}" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
        {{ .text }}
        {{- with .icon -}}
        <span class="ml-2">{{ partial "functions/get_icon" (dict "name" . "attributes" "class=\"inline-block h-5 w-5\"") }}</span>
        {{- end -}}
      </a>
    </div>
    {{- end -}}

  </div>
</section>