{{ $faqPath := .Get "faqPath" }}
{{ $faq := readFile $faqPath | default "" }}
{{ $lines := split $faq "\n" }}
{{ $groups := slice }}
{{ $currentGroup := dict "title" "" "questions" (slice) }}
{{ $currentQuestion := dict "question" "" "answer" (slice) }}
{{ $inQuestion := false }}
{{ $inGroup := false }}
{{ range $i, $line := $lines }}
  {{ if (findRE `^## ` $line) }}
    {{ if $inGroup }}
      {{ if $inQuestion }}
        {{ $currentGroup = merge $currentGroup (dict "questions" ($currentGroup.questions | append (dict "question" ($currentQuestion.question | markdownify | plainify) "answer" (delimit $currentQuestion.answer "\n" | markdownify))) ) }}
        {{ $currentQuestion = dict "question" "" "answer" (slice) }}
        {{ $inQuestion = false }}
      {{ end }}
      {{ $groups = $groups | append $currentGroup }}
    {{ end }}
    {{ $currentGroup = dict "title" (replaceRE `^## ` "" $line) "questions" (slice) }}
    {{ $inGroup = true }}
  {{ else if (findRE `^### ` $line) }}
    {{ if $inQuestion }}
      {{ $currentGroup = merge $currentGroup (dict "questions" ($currentGroup.questions | append (dict "question" ($currentQuestion.question | markdownify | plainify) "answer" (delimit $currentQuestion.answer "\n" | markdownify))) ) }}
      {{ $currentQuestion = dict "question" "" "answer" (slice) }}
    {{ end }}
    {{ $currentQuestion = merge $currentQuestion (dict "question" (replaceRE `^### ` "" $line)) }}
    {{ $inQuestion = true }}
  {{ else if $inQuestion }}
    {{ $currentQuestion = merge $currentQuestion (dict "answer" ($currentQuestion.answer | append $line)) }}
  {{ end }}
{{ end }}
{{ if $inQuestion }}
  {{ $currentGroup = merge $currentGroup (dict "questions" ($currentGroup.questions | append (dict "question" ($currentQuestion.question | markdownify | plainify) "answer" (delimit $currentQuestion.answer "\n" | markdownify))) ) }}
{{ end }}
{{ if $inGroup }}
  {{ $groups = $groups | append $currentGroup }}
{{ end }}

<section class="bg-white">
    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
        <div class="space-y-12">
            {{ range $groups }}
                <div>
                    <h3 class="mb-6 text-2xl font-bold text-gray-800">{{ .title }}</h3>
                    <div class="space-y-6">
                        {{ range .questions }}
                            <div class="border rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
                                <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition-colors duration-200 focus:outline-none" 
                                        onclick="this.parentElement.querySelector('.faq-content').classList.toggle('hidden');
                                                this.querySelector('svg').classList.toggle('rotate-180')">
                                    <span class="text-lg font-medium">{{ .question }}</span>
                                    <svg class="w-5 h-5 text-gray-500 transform transition-transform duration-200" 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 class="faq-content hidden border-t">
                                    <div class="p-6 prose prose-sm sm:prose lg:prose-lg max-w-none">
                                        {{ .answer }}
                                    </div>
                                </div>
                            </div>
                        {{ end }}
                    </div>
                </div>
            {{ end }}
        </div>
    </div>
</section>