<script lang="ts">
    import { reveal } from "../lib/actions/reveal"
    import FeatureIcon from "./FeatureIcon.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"
    )
</script>

<section data-block="features" class="features-section {paddingTop} {paddingBottom}" id={block.anchorId || undefined}>
    <div class="max-w-6xl 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-12">
                    {block.headline}
                </h2>
            </div>
        {/if}

        {#if block.featureBoxes?.length}
            <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3" use:reveal={{ delay: 200 }}>
                {#each block.featureBoxes as item}
                    <article class="feature-card">
                        <div class="feature-icon">
                            <FeatureIcon icon={item.icon} className="w-10 h-10" />
                        </div>
                        {#if item.title}
                            <h3>{item.title}</h3>
                        {/if}
                        {#if item.text}
                            <p>{item.text}</p>
                        {/if}
                    </article>
                {/each}
            </div>
        {/if}
    </div>
</section>