@php
    $siteName        = AleshaSetting::get('site_name', config('app.name'));
    $tagline         = AleshaSetting::get('site_tagline', '');
    $menu            = AleshaMenu::where('location', 'primary')->with('items.children')->first();
    $currentUrl      = '/' . request()->path();
    $latestHeadlines = AleshaPost::ofType('post')->published()->latest('published_at')->take(6)->get(['title','slug','content_type']);
@endphp

<style>
.news-top-bar   { background:#111; color:#9ca3af; font-size:12px; height:32px; display:flex; align-items:center; }
.news-brand-bar { background:#fff; border-bottom:1px solid #e5e7eb; padding:16px 0; }
.news-nav-bar   { background:var(--news-red); position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.news-nav-inner { display:flex; align-items:center; justify-content:space-between; }
.news-nav-desktop { display:flex; align-items:stretch; }
.news-nav-item {
    padding:0 16px; height:44px; display:inline-flex; align-items:center; gap:4px;
    font-size:12px; font-weight:800; color:#fff; text-decoration:none;
    text-transform:uppercase; letter-spacing:0.06em;
    border-right:1px solid rgba(255,255,255,0.15);
    background:transparent; border-top:none; border-bottom:none; border-left:none;
    cursor:pointer; font-family:inherit; white-space:nowrap;
    transition:background 0.15s;
}
.news-nav-item:hover, .news-nav-item.active { background:rgba(0,0,0,0.25); }
.news-dropdown-wrap { position:relative; }
.news-dropdown {
    position:absolute; top:100%; left:0; min-width:200px;
    padding-top:4px; z-index:200;
}
.news-dropdown-inner {
    background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.12);
    border-radius:8px; border-top:3px solid var(--news-red); overflow:hidden;
}
.news-dropdown a {
    display:block; padding:10px 16px; font-size:13px; color:#374151;
    text-decoration:none; border-bottom:1px solid #f3f4f6;
}
.news-dropdown a:hover { color:var(--news-red); background:var(--news-red-bg); }
.news-ticker-bar { background:#fff; border-bottom:1px solid #e5e7eb; height:34px; overflow:hidden; display:flex; align-items:center; }
.news-mobile-toggle { display:none; background:none; border:none; color:#fff; cursor:pointer; padding:8px; }
.news-mobile-nav { background:var(--news-red-dark); border-top:1px solid rgba(255,255,255,0.1); max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.news-mobile-nav a { display:block; padding:11px 16px; color:var(--news-red-muted); font-size:13px; font-weight:600; text-decoration:none; text-transform:uppercase; border-top:1px solid rgba(255,255,255,0.08); }
.news-mobile-nav a:hover { background:rgba(0,0,0,0.15); color:#fff; }
.news-mobile-nav a.sub { padding-left:32px; font-size:12px; color:var(--news-red-light); text-transform:none; font-weight:400; }
.news-mobile-nav a.sub:hover { color:#fff; }
@media (max-width:768px) {
    .news-nav-desktop { display:none; }
    .news-mobile-toggle { display:block; padding:12px; }
    .news-nav-inner { min-height:56px; padding:6px 16px; }
    .news-brand-inner { flex-direction:column; align-items:center; padding:16px !important; gap:12px !important; text-align:center; }
    .news-brand-inner a { text-align:center; }
    .news-brand-inner input[name="search"] { width:200px; }
}
</style>

{{-- Top bar --}}
<div class="news-top-bar">
    <div style="max-width:1280px; margin:0 auto; padding:0 16px; width:100%; display:flex; align-items:center; justify-content:space-between;">
        <span>{{ now()->format('l, d F Y') }}</span>
        <span style="color:var(--news-red); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;">
            {{ $tagline ?: 'Breaking News & Latest Updates' }}
        </span>
    </div>
</div>

{{-- Brand bar --}}
<div class="news-brand-bar">
    <div class="news-brand-inner" style="max-width:1280px; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
        <a href="/" style="text-decoration:none;">
            <div style="font-family:'Playfair Display',Georgia,serif; font-size:2rem; font-weight:900; color:#111; line-height:1;">{{ $siteName }}</div>
            @if($tagline)
            <div style="font-size:11px; color:#9ca3af; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;">{{ $tagline }}</div>
            @endif
        </a>
        <form action="/post" method="GET" style="display:flex; align-items:center; gap:6px;">
            <input type="text" name="search" placeholder="Search news..."
                   style="border:1px solid #e5e7eb; border-radius:8px; padding:7px 14px; font-size:13px; width:200px; outline:none; font-family:inherit;">
            <button type="submit" style="background:var(--news-red); color:#fff; border:none; border-radius:8px; padding:8px 18px; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit;">Search</button>
        </form>
    </div>
</div>

{{-- Nav bar --}}
<div class="news-nav-bar" x-data="{ mobileOpen: false }">
    <div style="max-width:1280px; margin:0 auto; padding:0 16px;">
        <div class="news-nav-inner">
            {{-- Desktop nav --}}
            <nav class="news-nav-desktop">
                <a href="/" class="news-nav-item {{ $currentUrl === '/' ? 'active' : '' }}">Home</a>
                @if($menu && $menu->items->count())
                    @foreach($menu->items as $item)
                        @if($item->children->count())
                        <div class="news-dropdown-wrap" x-data="{ open: false }"
                             x-on:mouseenter="open = true" x-on:mouseleave="open = false">
                            <button class="news-nav-item">
                                {{ $item->label }}
                                <svg style="width:10px; height:10px; flex-shrink:0;" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div class="news-dropdown" x-show="open" x-cloak>
                                <div class="news-dropdown-inner">
                                    @foreach($item->children as $child)
                                    <a href="{{ $child->url }}" target="{{ $child->target }}">{{ $child->label }}</a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @else
                        <a href="{{ $item->url }}" target="{{ $item->target }}"
                           class="news-nav-item {{ $currentUrl === $item->url ? 'active' : '' }}">
                            {{ $item->label }}
                        </a>
                        @endif
                    @endforeach
                @endif
            </nav>

            <div style="display:flex; align-items:center; gap:10px;">
                <span style="background:#fff; color:var(--news-red); font-size:10px; font-weight:900; padding:3px 8px; border-radius:4px; letter-spacing:0.1em;">LIVE</span>
                <button class="news-mobile-toggle" x-on:click="mobileOpen = !mobileOpen">
                    <svg style="width:20px; height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- Mobile nav --}}
    <div class="news-mobile-nav" x-show="mobileOpen" x-cloak>
        <a href="/">Home</a>
        @if($menu && $menu->items->count())
            @foreach($menu->items as $item)
            <a href="{{ $item->url }}" target="{{ $item->target }}">{{ $item->label }}</a>
            @if($item->children->count())
                @foreach($item->children as $child)
                <a href="{{ $child->url }}" target="{{ $child->target }}" class="sub">› {{ $child->label }}</a>
                @endforeach
            @endif
            @endforeach
        @endif
    </div>
</div>

{{-- Breaking news ticker --}}
@if($latestHeadlines->count())
<div class="news-ticker-bar">
    <div style="max-width:1280px; margin:0 auto; padding:0 16px; width:100%; display:flex; align-items:center; overflow:hidden;">
        <span style="background:var(--news-red); color:#fff; font-size:10px; font-weight:900; padding:3px 10px; border-radius:4px; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; margin-right:14px; flex-shrink:0;">BREAKING</span>
        <div style="flex:1; overflow:hidden;">
            <div style="display:inline-block; white-space:nowrap; font-size:13px; color:#374151; animation:ticker 80s linear infinite; padding-left:100%;">
                @foreach($latestHeadlines as $hl)
                <a href="/{{ $hl->content_type }}/{{ $hl->slug }}" style="margin-right:60px; color:#374151; text-decoration:none;"
                   onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#374151'">{{ $hl->title }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif
