@php
    // KotschAds: eigene Werbe-Engine (house_ads) statt Monetag/AdSense.
    // Serverseitig direkt aus der DB (gleiche App) — zählt Impressions; Klicks über /api/ads/go/{id}.
    $__adsLeft   = \App\Models\HouseAd::pickFor('kotsch', 'rail', 3);
    $__adsRight  = \App\Models\HouseAd::pickFor('kotsch', 'rail', 3);
    $__adBanner  = \App\Models\HouseAd::pickFor('kotsch', 'banner', 1)->first();
    $__adIcon    = fn ($t) => ['app' => 'fa-mobile-screen-button', 'webtool' => 'fa-toolbox', 'shop' => 'fa-bag-shopping', 'affiliate' => 'fa-tags'][$t] ?? 'fa-star';
@endphp

@if($__adsLeft->isNotEmpty() || $__adBanner)
<style>
.kt-side-ad { position: fixed; top: 120px; width: 168px; z-index: 50; display: none; }
.kt-side-ad-left  { left:  max(16px, calc(50% - 520px - 192px)); }
.kt-side-ad-right { right: max(16px, calc(50% - 520px - 192px)); }
.kt-side-ad-inner { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 8px; box-shadow: 0 4px 20px -8px rgba(15,23,42,0.10); }
.kt-side-ad-label { display: block; font-size: 0.58rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; text-align: center; margin-bottom: 6px; }
@media (min-width: 1440px) { .kt-side-ad { display: block; } }
.kt-banner-ad { display: block; }
@media (min-width: 1440px) { .kt-banner-ad { display: none; } }

.kt-dl-stack { display:flex; flex-direction:column; gap:10px; }
.kt-dl-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    text-decoration:none; padding:16px 10px 13px; border-radius:14px; border:1px solid #eef2f7;
    background:#fff; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kt-dl-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(15,23,42,.28); border-color:#dbeafe; }
.kt-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.35rem;
    box-shadow:0 6px 14px -6px rgba(15,23,42,.35); }
.kt-dl-art img { width:100%; height:100%; object-fit:cover; }
.kt-dl-title { font-weight:800; color:#0f172a; font-size:.8rem; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kt-dl-cta { font-weight:800; color:var(--primary,#2563eb); font-size:.72rem;
    padding:4px 12px; border-radius:999px; background:rgba(37,99,235,.08); }
.kt-dl-banner-card { display:flex; align-items:center; gap:16px; text-decoration:none; padding:16px 20px;
    border-radius:16px; border:1px solid #e2e8f0; background:#fff; box-shadow:0 4px 20px -8px rgba(15,23,42,.1); }
.kt-dl-banner-art { flex:0 0 auto; width:56px; height:56px; 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); }
.kt-dl-banner-art img { width:100%; height:100%; object-fit:cover; }
.kt-dl-banner-text { flex:1 1 auto; }
.kt-dl-banner-text .t { font-weight:800; color:#0f172a; }
.kt-dl-banner-text .s { color:#64748b; font-size:.86rem; }
.kt-dl-banner-btn { flex:0 0 auto; padding:.55rem 1.05rem; border-radius:999px; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--primary,#2563eb), #7c3aed); white-space:nowrap; }
@media (max-width:520px){ .kt-dl-banner-card{flex-wrap:wrap; text-align:center; justify-content:center;} .kt-dl-banner-text{flex-basis:100%;} }
</style>

{{-- ── STICKY SIDE ADS (Desktop ≥1440px, stoppt vor dem Footer) ── --}}
<div class="kt-side-ad kt-side-ad-left" id="kt-ad-left" role="complementary" aria-label="Empfehlungen">
    <div class="kt-side-ad-inner">
        <span class="kt-side-ad-label">Empfehlungen</span>
        <div class="kt-dl-stack">
            @foreach($__adsLeft as $ad)
                <a class="kt-dl-card" href="{{ url('/api/ads/go/' . $ad->id) }}" target="_blank" rel="noopener">
                    <span class="kt-dl-art">
                        @if($ad->imageUrl())<img src="{{ $ad->imageUrl() }}" alt="">
                        @else<i class="fa-solid {{ $__adIcon($ad->type) }}" aria-hidden="true"></i>@endif
                    </span>
                    <span class="kt-dl-title">{{ $ad->title }}</span>
                    <span class="kt-dl-cta">{{ $ad->cta_text ?: 'Mehr erfahren' }}</span>
                </a>
            @endforeach
        </div>
    </div>
</div>

<div class="kt-side-ad kt-side-ad-right" id="kt-ad-right" role="complementary" aria-label="Empfehlungen">
    <div class="kt-side-ad-inner">
        <span class="kt-side-ad-label">Empfehlungen</span>
        <div class="kt-dl-stack">
            @foreach($__adsRight as $ad)
                <a class="kt-dl-card" href="{{ url('/api/ads/go/' . $ad->id) }}" target="_blank" rel="noopener">
                    <span class="kt-dl-art">
                        @if($ad->imageUrl())<img src="{{ $ad->imageUrl() }}" alt="">
                        @else<i class="fa-solid {{ $__adIcon($ad->type) }}" aria-hidden="true"></i>@endif
                    </span>
                    <span class="kt-dl-title">{{ $ad->title }}</span>
                    <span class="kt-dl-cta">{{ $ad->cta_text ?: 'Mehr erfahren' }}</span>
                </a>
            @endforeach
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var adLeft  = document.getElementById('kt-ad-left');
    var adRight = document.getElementById('kt-ad-right');
    var footer  = document.querySelector('footer');
    if (!adLeft || !adRight || !footer) return;
    var NORMAL_TOP = 120, GAP = 16;
    function check() {
        var scrollY = window.scrollY || window.pageYOffset;
        var maxTop  = footer.offsetTop - Math.max(adLeft.offsetHeight, adRight.offsetHeight) - GAP - scrollY;
        var top     = Math.min(NORMAL_TOP, maxTop);
        adLeft.style.top  = top + 'px';
        adRight.style.top = top + 'px';
    }
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check, { passive: true });
    check();
});
</script>

{{-- ── BANNER (Mobile/Tablet < 1440px) ── --}}
@if($__adBanner)
<div class="kt-banner-ad" style="width:100%;max-width:1180px;margin:32px auto 0;padding:0 16px;">
    <div style="font-size:0.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#94a3b8;margin-bottom:6px;">Empfehlung</div>
    <a class="kt-dl-banner-card" href="{{ url('/api/ads/go/' . $__adBanner->id) }}" target="_blank" rel="noopener">
        <span class="kt-dl-banner-art">
            @if($__adBanner->imageUrl())<img src="{{ $__adBanner->imageUrl() }}" alt="">
            @else<i class="fa-solid {{ $__adIcon($__adBanner->type) }}" aria-hidden="true"></i>@endif
        </span>
        <span class="kt-dl-banner-text">
            <span class="t">{{ $__adBanner->title }}</span><br>
            <span class="s">{{ \Illuminate\Support\Str::limit($__adBanner->body ?: 'Aus dem kotsch.tech-Universum.', 110) }}</span>
        </span>
        <span class="kt-dl-banner-btn">{{ $__adBanner->cta_text ?: 'Ansehen' }}</span>
    </a>
</div>
@endif

@endif