{{--
    Werbeplatz-Hinweis (Eigenwerbung): dezenter „Anzeige"-Rahmen im Stil der
    früheren Ad-Slots (focus-ad/feed-ad), solange die Fläche nicht vermarktet
    ist. Klick öffnet das schwebende Kontakt-Widget mit vorgewähltem Thema
    „Werbeanfrage" (Window-Event `open-contact-modal` + topic-Detail).

    Varianten steuern nur die Außenabstände der jeweiligen Einbauorte:
    - sidebar → Hero-Sidebar der Startseiten
    - feed    → Meldungs-Feed
    - inline  → Fließtext der PM-Detailseite
--}}

@props(['variant' => 'sidebar'])

<div @class([
    'mt-4' => $variant === 'sidebar',
    'my-6' => $variant === 'feed',
    'my-8 max-w-[680px]' => $variant === 'inline',
])>
    <div class="flex items-center gap-2.5 mb-2.5">
        <span class="h-px bg-bg-rule-strong flex-1"></span>
        <span class="text-[9px] font-bold tracking-[0.22em] text-ink-on-dark-muted uppercase font-mono">{{ __('web.ad_slot.label') }}</span>
        <span class="h-px bg-bg-rule-strong flex-1"></span>
    </div>

    <button type="button" x-data @click="$dispatch('open-contact-modal', { topic: '{{ \App\Enums\ContactMessageTopic::Advertising->value }}' })"
        class="block w-full text-left px-4 py-4 bg-bg-card-warm border border-bg-card-warm-border cursor-pointer hover:border-brand/50 hover:bg-bg-card-warm-hover transition-colors">
        <div class="text-[9.5px] font-bold tracking-[0.16em] text-card-warm-cat uppercase mb-1.5">
            {{ __('web.ad_slot.eyebrow') }}
        </div>
        <div class="font-serif text-[15.5px] leading-[1.3] font-medium text-card-warm-title">
            {{ __('web.ad_slot.title') }}
        </div>
        <div class="text-[11.5px] leading-[1.5] mt-1.5 text-card-warm-cat">
            {{ __('web.ad_slot.text') }}
        </div>
        <span class="inline-block mt-2.5 text-[11.5px] font-semibold underline underline-offset-2 text-card-warm-title">
            {{ __('web.ad_slot.cta') }} →
        </span>
    </button>

    <div class="flex items-center gap-2.5 mt-2.5">
        <span class="h-px bg-bg-rule-strong flex-1"></span>
        <span class="text-[9px] font-bold tracking-[0.22em] text-ink-on-dark-muted uppercase font-mono">{{ __('web.ad_slot.end_label') }}</span>
        <span class="h-px bg-bg-rule-strong flex-1"></span>
    </div>
</div>