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

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

    const resolvedHeroImage = $derived(
        block.heroImage?._lookup?.image ||
            (block._lookup?.["heroImage.image"] as MedialibEntry | null | undefined) ||
            null
    )
    const hasImage = $derived(!!resolvedHeroImage?.file?.src)
    const isAnchorLink = $derived(block.callToAction?.buttonLink?.startsWith("#"))
</script>

<section
    data-block="hero"
    class="hero-section relative flex items-center justify-center overflow-hidden"
    class:min-h-[70vh]={block.containerWidth === "full"}
    class:min-h-[50vh]={block.containerWidth !== "full"}
>
    <!-- Background image -->
    {#if hasImage}
        <div class="absolute inset-0 z-0">
            <MedialibImage
                id={block.heroImage?.image || resolvedHeroImage?.id || ""}
                entry={resolvedHeroImage}
                noPlaceholder
                style="width:100%;height:100%;object-fit:cover;"
            />
            <div class="absolute inset-0 bg-linear-to-b from-brand-950/80 via-brand-900/70 to-brand-950/90"></div>
        </div>
    {:else}
        <div class="absolute inset-0 bg-linear-to-br from-brand-900 via-brand-800 to-brand-950"></div>
    {/if}

    <!-- Content -->
    <div class="relative z-10 max-w-4xl mx-auto px-6 py-20 text-center" use:reveal>
        {#if block.tagline}
            <span class="inline-block text-brand-300 text-sm font-semibold tracking-widest uppercase mb-4">
                {block.tagline}
            </span>
        {/if}

        {#if block.headlineH1}
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-extrabold text-white leading-tight mb-6">
                {block.headline}
            </h1>
        {:else}
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-white leading-tight mb-6">
                {block.headline}
            </h2>
        {/if}

        {#if block.subline}
            <p class="text-lg sm:text-xl text-brand-200 max-w-2xl mx-auto mb-8 leading-relaxed">
                {block.subline}
            </p>
        {/if}

        {#if block.callToAction?.buttonText}
            <div class="flex justify-center gap-4">
                <a
                    href={block.callToAction.buttonLink || "#"}
                    target={block.callToAction.buttonTarget || undefined}
                    use:spaLink={{ noScroll: isAnchorLink }}
                    class="inline-flex items-center gap-2 bg-brand-500 hover:bg-brand-400 text-white font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
                >
                    {block.callToAction.buttonText}
                    <svg class="w-5 h-5" 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>
                </a>
            </div>
        {/if}
    </div>

    <!-- Decorative bottom wave -->
    <div class="absolute -bottom-px left-0 right-0 z-10">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" class="block w-full h-auto">
            <path d="M0 80V40C240 10 480 0 720 20C960 40 1200 50 1440 30V80H0Z" fill="currentColor" class="text-white"
            ></path>
        </svg>
    </div>
</section>
