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

@if ($homepageAnnouncement)
    <section class="px-4 pt-8 sm:px-6 lg:px-8" data-home-announcement-wrapper>
        <div class="mx-auto max-w-7xl">
            <button
                type="button"
                class="hidden items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-sm font-semibold text-white/90 transition hover:border-white/20 hover:bg-white/[0.1]"
                data-home-announcement-restore
                data-announcement-id="{{ $announcementId }}"
                data-dismiss-version="{{ $dismissVersion }}"
            >
                <span aria-hidden="true">✨</span>
                <span>Show Skinbase announcement</span>
            </button>

            <div
                class="relative 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)]"
                data-home-announcement
                data-announcement-id="{{ $announcementId }}"
                data-dismiss-version="{{ $dismissVersion }}"
            >
                @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>

                @if (!empty($homepageAnnouncement['is_dismissible']))
                    <button
                        type="button"
                        class="absolute right-5 top-5 z-10 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/30 px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/70 transition hover:border-white/20 hover:bg-black/45 hover:text-white sm:right-6 sm:top-6 lg:right-8 lg:top-8"
                        data-home-announcement-dismiss
                        aria-label="Dismiss homepage announcement"
                    >
                        <svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                            <path d="M3.5 3.5 12.5 12.5"></path>
                            <path d="M12.5 3.5 3.5 12.5"></path>
                        </svg>
                        Dismiss
                    </button>
                @endif

                <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>
        </div>
    </section>
@endif