@php
    $siteName   = AleshaSetting::get('site_name', config('app.name'));
    $tagline    = AleshaSetting::get('site_tagline', '');
    $footerMenu = AleshaMenu::where('location', 'footer')->with('items')->first();
    $categories = AleshaTaxonomy::where('type','category')
        ->withCount(['posts' => fn($q) => $q->published()])
        ->having('posts_count','>',0)->orderBy('name')->take(8)->get();
    $recentPosts = AleshaPost::ofType('post')->published()->latest('published_at')->take(4)->get();
@endphp

<footer style="background:#111; color:#9ca3af; margin-top:48px;">
    {{-- Footer top --}}
    <div style="border-bottom:1px solid #1f2937;">
        <div style="max-width:1280px; margin:0 auto; padding:48px 20px;">
            <div style="display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;" class="footer-grid">

                {{-- Brand --}}
                <div>
                    <a href="/" style="text-decoration:none; display:block; margin-bottom:12px;">
                        <div class="news-headline" style="font-size:1.6rem; font-weight:900; color:#fff;">{{ $siteName }}</div>
                    </a>
                    @if($tagline)
                    <p style="font-size:13px; color:#6b7280; line-height:1.6; margin-bottom:16px;">{{ $tagline }}</p>
                    @endif
                    <p style="font-size:12px; color:#4b5563; line-height:1.7;">
                        Your trusted source for breaking news, in-depth analysis, and the stories that matter.
                    </p>
                </div>

                {{-- Categories --}}
                @if($categories->count())
                <div>
                    <h4 style="font-size:11px; font-weight:800; color:#e5e7eb; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--news-red);">Topics</h4>
                    <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
                        @foreach($categories as $cat)
                        <li>
                            <a href="/category/{{ $cat->slug }}"
                               style="font-size:13px; color:#6b7280; text-decoration:none; transition:color 0.15s; display:flex; align-items:center; gap:6px;"
                               onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#6b7280'">
                                <span style="color:var(--news-red); font-size:10px;">›</span>{{ $cat->name }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                {{-- Navigation --}}
                @if($footerMenu && $footerMenu->items->count())
                <div>
                    <h4 style="font-size:11px; font-weight:800; color:#e5e7eb; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--news-red);">Navigation</h4>
                    <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
                        @foreach($footerMenu->items as $item)
                        <li>
                            <a href="{{ $item->url }}" target="{{ $item->target }}"
                               style="font-size:13px; color:#6b7280; text-decoration:none; display:flex; align-items:center; gap:6px;"
                               onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#6b7280'">
                                <span style="color:var(--news-red); font-size:10px;">›</span>{{ $item->label }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                {{-- Latest --}}
                @if($recentPosts->count())
                <div>
                    <h4 style="font-size:11px; font-weight:800; color:#e5e7eb; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--news-red);">Latest</h4>
                    <div style="display:flex; flex-direction:column; gap:12px;">
                        @foreach($recentPosts as $rp)
                        <div>
                            <a href="/{{ $rp->content_type }}/{{ $rp->slug }}"
                               style="font-size:12px; color:#6b7280; text-decoration:none; line-height:1.5; display:block;"
                               onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#6b7280'">{{ $rp->title }}</a>
                            <p style="font-size:11px; color:#374151; margin-top:2px;">{{ $rp->published_at?->format('d M Y') }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Footer bottom --}}
    <div style="max-width:1280px; margin:0 auto; padding:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
        <p style="font-size:12px; color:#374151; margin:0;">
            &copy; {{ date('Y') }} <span style="color:#9ca3af;">{{ $siteName }}</span>. All rights reserved.
        </p>
        <p style="font-size:11px; color:#1f2937; margin:0;">
            Powered by <span style="color:#374151;">AleshaCMS</span>
        </p>
    </div>
</footer>

<style>
@media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr !important; } }
@media (max-width:480px) { .footer-grid { grid-template-columns:1fr !important; } }
</style>
