@php
    // KotschAds: News-Sidebar mit eigenen Empfehlungen (house_ads, Zone "sidebar").
    $__sbAds  = \App\Models\HouseAd::pickFor('kotsch', 'sidebar', 3);
    $__sbIcon = fn ($t) => ['app' => 'fa-mobile-screen-button', 'webtool' => 'fa-toolbox', 'shop' => 'fa-bag-shopping', 'affiliate' => 'fa-tags'][$t] ?? 'fa-star';
@endphp

<aside class="auto-ad-sidebar" aria-label="Empfehlungen">
    <div class="auto-ad-box">
        <div class="auto-ad-label">Empfehlungen</div>
        @if($__sbAds->isNotEmpty())
            <div class="auto-ad-dl-stack">
                @foreach($__sbAds as $ad)
                    <a class="auto-ad-dl" href="{{ url('/api/ads/go/' . $ad->id) }}" target="_blank" rel="noopener">
                        <span class="auto-ad-dl-art">
                            @if($ad->imageUrl())<img src="{{ $ad->imageUrl() }}" alt="" loading="lazy">
                            @else<i class="fa-solid {{ $__sbIcon($ad->type) }}" aria-hidden="true"></i>@endif
                        </span>
                        <span class="auto-ad-dl-title">{{ $ad->title }}</span>
                        <span class="auto-ad-dl-sub">{{ \Illuminate\Support\Str::limit($ad->body ?: '', 80) }}</span>
                        <span class="auto-ad-dl-cta">{{ $ad->cta_text ?: 'Mehr erfahren' }} &rarr;</span>
                    </a>
                @endforeach
            </div>
        @else
            <div class="auto-ad-placeholder">Empfehlungen</div>
        @endif
    </div>
</aside>

<style>
    .auto-ad-dl-stack { display:flex; flex-direction:column; gap:12px; }
    .auto-ad-dl { display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; text-decoration:none; gap:7px; padding:14px 12px;
        border-radius:14px; background:linear-gradient(160deg,#ffffff,#f8fafc); border:1px solid #e2e8f0;
        transition:transform .15s ease, box-shadow .15s ease; }
    .auto-ad-dl:hover { transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(15,23,42,.25); }
    .auto-ad-dl-art { width:58px; height:58px; border-radius:22%; display:grid; place-items:center; overflow:hidden;
        background:linear-gradient(135deg, var(--primary,#2563eb), #7c3aed); color:#fff; font-size:1.4rem;
        box-shadow:0 6px 14px -6px rgba(15,23,42,.35); }
    .auto-ad-dl-art img { width:100%; height:100%; object-fit:cover; }
    .auto-ad-dl-title { font-weight:800; color:#0f172a; font-size:.92rem; line-height:1.25; }
    .auto-ad-dl-sub { color:#64748b; font-size:.74rem; line-height:1.4;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .auto-ad-dl-cta { margin-top:1px; font-weight:800; color:var(--primary,#2563eb); font-size:.8rem; }
</style>