@props(['ad' => null])

@php
    $ad ??= [
        'category' => 'Logistik & Transport',
        'title' => 'DHL Express erweitert Same-Day-Netz auf 24 deutsche Großstädte',
        'company' => 'Deutsche Post DHL Group',
        'gradient' => 'linear-gradient(135deg,#3A2818,#A88466)',
        'href' => '#',
    ];

    $category = $ad['category'] ?? 'Anzeige';
    $title = $ad['title'] ?? 'Werbeplatz';
    $company = $ad['company'] ?? '';
    $gradient = $ad['gradient'] ?? 'linear-gradient(135deg,#3A2818,#A88466)';
    $href = $ad['href'] ?? '#';
@endphp

<div class="mt-4">
    <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">Anzeige</span>
        <span class="h-px bg-bg-rule-strong flex-1"></span>
    </div>

    <a href="{{ $href }}" rel="sponsored nofollow" class="block px-3.5 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="grid items-start gap-3" style="grid-template-columns: 64px 1fr;">
            <div class="w-16 h-16 flex-shrink-0 relative overflow-hidden opacity-85" style="background: {{ $gradient }};"></div>
            <div>
                <div class="text-[9.5px] font-bold tracking-[0.16em] text-card-warm-cat uppercase mb-1">
                    {{ $category }}
                </div>
                <h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium text-card-warm-title">
                    {{ $title }}
                </h3>
                @if ($company)
                    <div class="text-[11.5px] mt-1.5 text-card-warm-cat">
                        {{ $company }}
                    </div>
                @endif
            </div>
        </div>
    </a>

    <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">Ende Anzeige</span>
        <span class="h-px bg-bg-rule-strong flex-1"></span>
    </div>
</div>