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

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

    const resolvedImage = $derived(block._lookup?.image || null)

    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"
    )

    const hasImage = $derived(block.image || resolvedImage)
    const imageOnRight = $derived(block.imagePosition === "right")
    const imageOnLeft = $derived(block.imagePosition === "left")
    const showImage = $derived(hasImage && !!resolvedImage?.file?.src && (imageOnRight || imageOnLeft))
</script>

<section data-block="richtext" class="richtext-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-8">
                    {block.headline}
                </h2>
            </div>
        {/if}

        {#if showImage}
            <!-- Layout with image -->
            <div class="grid md:grid-cols-2 gap-12 items-center" use:reveal={{ delay: 200 }}>
                <div class:order-2={imageOnLeft} class="prose max-w-none">
                    {@html block.text || ""}
                </div>
                <div class:order-1={imageOnLeft} class="relative">
                    <div class="rounded-2xl overflow-hidden shadow-xl shadow-brand-900/10">
                        {#if block.image || resolvedImage}
                            <MedialibImage
                                id={block.image || resolvedImage?.id || ""}
                                entry={resolvedImage}
                                noPlaceholder
                                style="width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;"
                            />
                        {/if}
                    </div>
                    <!-- Decorative gradient behind image -->
                    <div
                        class="absolute -inset-4 -z-10 rounded-3xl bg-linear-to-br from-brand-100 to-brand-50 blur-sm"
                    ></div>
                </div>
            </div>
        {:else}
            <!-- Text-only layout -->
            <div class="prose max-w-3xl" use:reveal={{ delay: 200 }}>
                {@html block.text || ""}
            </div>
        {/if}
    </div>
</section>
