<script lang="ts">
    import { reveal } from "../lib/actions/reveal"
    import { untrack } from "svelte"

    let { block }: { block: ContentBlockEntry } = $props()

    const paddingTop = $derived(
        block.padding?.top === "lg"
            ? "pt-20"
            : block.padding?.top === "md"
              ? "pt-12"
              : block.padding?.top === "sm"
                ? "pt-8"
                : "pt-4"
    )
    const paddingBottom = $derived(
        block.padding?.bottom === "lg"
            ? "pb-20"
            : block.padding?.bottom === "md"
              ? "pb-12"
              : block.padding?.bottom === "sm"
                ? "pb-8"
                : "pb-4"
    )

    // Track open/closed state per item — intentionally capture initial prop value only
    let openItems = $state<boolean[]>(untrack(() => (block.accordionItems || []).map((item) => !!item.open)))

    function toggle(index: number) {
        openItems = openItems.map((open, i) => (i === index ? !open : open))
    }
</script>

<section
    data-block="accordion"
    class="accordion-section {paddingTop} {paddingBottom} bg-gray-50"
    id={block.anchorId || undefined}
>
    <div class="max-w-3xl mx-auto px-6">
        {#if block.tagline}
            <div use:reveal>
                <span class="inline-block text-brand-500 text-sm font-semibold tracking-widest uppercase mb-3">
                    {block.tagline}
                </span>
            </div>
        {/if}

        {#if block.headline}
            <div use:reveal={{ delay: 100 }}>
                <h2 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-10">
                    {block.headline}
                </h2>
            </div>
        {/if}

        <div class="space-y-3">
            {#each block.accordionItems || [] as item, i}
                <div
                    class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
                    use:reveal={{ delay: 150 + i * 80 }}
                >
                    <button
                        class="w-full text-left px-6 py-5 flex items-center justify-between gap-4 hover:bg-gray-50 transition-colors cursor-pointer"
                        onclick={() => toggle(i)}
                        aria-expanded={openItems[i]}
                    >
                        <span class="font-semibold text-gray-900 text-lg">
                            {item.question}
                        </span>
                        <svg
                            class="w-5 h-5 text-brand-500 shrink-0 transition-transform duration-300"
                            class:rotate-180={openItems[i]}
                            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>

                    {#if openItems[i]}
                        <div class="px-6 pb-5 prose max-w-none text-gray-600 border-t border-gray-50">
                            {@html item.answer || ""}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
</section>
