@php
    $homepageAnnouncement = is_array($announcement ?? null) ? $announcement : null;
    $overlayOpacity = max(0, min(100, (int) ($homepageAnnouncement['overlay_opacity'] ?? 55)));
@endphp

@if ($homepageAnnouncement)
    <section class="px-4 pt-8 sm:px-6 lg:px-8">
        <div class="relative mx-auto max-w-7xl overflow-hidden rounded-[2rem] border border-cyan-300/15 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.26),transparent_30%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.22),transparent_28%),linear-gradient(135deg,rgba(6,12,24,0.96),rgba(10,17,34,0.9))] text-white shadow-[0_28px_90px_rgba(0,0,0,0.35)]">
            @if (!empty($homepageAnnouncement['background_image_url']))
                <div class="absolute inset-0">
                    <img src="{{ $homepageAnnouncement['background_image_url'] }}" alt="" class="h-full w-full object-cover">
                    <div class="absolute inset-0 bg-slate-950" style="opacity: {{ $overlayOpacity / 100 }}"></div>
                </div>
            @endif

            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-400/20 via-sky-400/12 to-transparent"></div>
            <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),transparent_22%,rgba(2,6,23,0.15)_100%)]"></div>

            <div class="relative grid gap-8 px-6 py-7 sm:px-8 lg:grid-cols-[minmax(0,1.25fr)_auto] lg:items-end lg:px-10 lg:py-10">
                <div class="max-w-3xl">
                    @if (!empty($homepageAnnouncement['badge_text']))
                        <div class="inline-flex rounded-full border border-cyan-200/20 bg-cyan-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-cyan-100">
                            {{ $homepageAnnouncement['badge_text'] }}
                        </div>
                    @endif

                    <h2 class="mt-4 text-3xl font-semibold tracking-[-0.05em] sm:text-4xl lg:text-[3.15rem]">
                        {{ $homepageAnnouncement['title'] ?? '' }}
                    </h2>

                    @if (!empty($homepageAnnouncement['subtitle']))
                        <p class="mt-3 max-w-2xl text-base leading-7 text-white/80 sm:text-lg">
                            {{ $homepageAnnouncement['subtitle'] }}
                        </p>
                    @endif

                    @if (!empty($homepageAnnouncement['content_html']))
                        <div class="prose prose-invert mt-5 max-w-2xl text-sm leading-7 prose-a:text-cyan-200 prose-strong:text-white [&_blockquote]:my-5 [&_h2]:mb-3 [&_h2]:mt-7 [&_h3]:mb-2 [&_h3]:mt-6 [&_li+li]:mt-1.5 [&_ol]:my-5 [&_p]:my-0 [&_p+p]:mt-6 [&_ul]:my-5 sm:text-base">
                            {!! $homepageAnnouncement['content_html'] !!}
                        </div>
                    @endif
                </div>

                <div class="flex flex-col items-start gap-3 lg:items-end">
                    <div class="flex flex-wrap gap-3 lg:justify-end">
                        @if (!empty($homepageAnnouncement['primary_link']['url']) && !empty($homepageAnnouncement['primary_link']['label']))
                            <a href="{{ $homepageAnnouncement['primary_link']['url'] }}" class="inline-flex items-center justify-center rounded-full border border-cyan-300/30 bg-cyan-300/15 px-5 py-3 text-sm font-semibold text-cyan-50 transition hover:bg-cyan-300/22">
                                {{ $homepageAnnouncement['primary_link']['label'] }}
                            </a>
                        @endif
                        @if (!empty($homepageAnnouncement['secondary_link']['url']) && !empty($homepageAnnouncement['secondary_link']['label']))
                            <a href="{{ $homepageAnnouncement['secondary_link']['url'] }}" class="inline-flex items-center justify-center rounded-full border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1]">
                                {{ $homepageAnnouncement['secondary_link']['label'] }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif