@php
    $adsPlatform = $adsPlatform ?? 'meta';
    $adsSection = $adsSection ?? 'campaigns';
@endphp
<nav class="ads-local" aria-label="Ad Manager">
    <div class="ads-local__row">
        <span class="ads-local__label">Platform</span>
        <div class="ads-local__tabs">
            <a href="{{ route('ads.meta.campaigns') }}" class="{{ $adsPlatform === 'meta' ? 'is-active' : '' }}">Meta</a>
            <a href="{{ route('ads.google.index') }}" class="{{ $adsPlatform === 'google' ? 'is-active' : '' }}">Google Ads</a>
        </div>
    </div>
    @if($adsPlatform === 'meta')
        <div class="ads-local__row">
            <span class="ads-local__label">Meta</span>
            <div class="ads-local__tabs">
                <a href="{{ route('ads.meta.campaigns') }}" class="{{ $adsSection === 'campaigns' ? 'is-active' : '' }}">Campaigns</a>
                <span class="is-soon" title="Next">Ad sets</span>
                <span class="is-soon" title="Next">Ads</span>
            </div>
        </div>
    @endif
</nav>
@once
@push('styles')
<style>
.ads-local { margin: 0 0 1.15rem; }
.ads-local__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.85rem; margin-bottom: 0.45rem; }
.ads-local__label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: #94a3b8; min-width: 4.5rem;
}
.ads-local__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ads-local__tabs a,
.ads-local__tabs span {
    display: inline-flex; align-items: center;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; text-decoration: none;
    border: 1px solid #e5e7eb; background: #fff; color: #475569;
}
.ads-local__tabs a:hover { border-color: #1877f2; color: #1877f2; }
.ads-local__tabs a.is-active { background: #1877f2; border-color: #1877f2; color: #fff; }
.ads-local__tabs span.is-soon { color: #94a3b8; background: #f8fafc; cursor: default; }
</style>
@endpush
@endonce