<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <title>{{ config('app.name', 'Nexus Intelligence') }} — @yield('title', 'Instant Book OOH/DOOH')</title>
    <meta name="description" content="@yield('meta_description', 'Instant book DOOH. Guardrail offers for billboards. On-platform payment, proof-of-posting SLAs, automated reporting.')"/>

    {{-- Vite: CSS + JS --}}
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    {{-- Page-level extra head --}}
    @stack('head')
</head>
<body class="{{ $bodyClass ?? '' }}">

{{-- ============================================================
     NAVIGATION
============================================================ --}}
<header class="nx-header">
    <div class="nx-wrap">
        <nav class="nx-nav">

            {{-- Brand --}}
            <a class="nx-brand" href="{{ url('/') }}">
                <span class="nx-logo"></span>
                Nexus Intelligence
            </a>

            {{-- Desktop nav links --}}
            <div class="nx-nav-links">
                <a href="{{ url('/explore') }}">Explore</a>
                <a href="#how-it-works">How it works</a>
                <a href="#proof">Proof & SLAs</a>
                <a href="#policies">Policies</a>
            </div>

            {{-- Right side actions --}}
            <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
                @auth
                    {{-- Show portal link based on role --}}
                    @if(auth()->user()->hasRole('media_owner'))
                        <a class="nx-btn" href="{{ route('owner.dashboard') }}">Owner Portal</a>
                    @elseif(auth()->user()->hasRole('admin'))
                        <a class="nx-btn" href="{{ route('admin.dashboard') }}">Admin Console</a>
                    @else
                        <a class="nx-btn" href="{{ route('advertiser.dashboard') }}">My Bookings</a>
                    @endif

                    {{-- User menu --}}
                    <div class="dropdown">
                        <button class="nx-btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            {{ auth()->user()->name }}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end"
                            style="background:var(--nx-panel); border:1px solid var(--nx-line); border-radius:var(--nx-radius);">
                            <li>
                                <a class="dropdown-item"
                                   style="color:var(--nx-text); font-family:'Manrope',sans-serif;"
                                   href="{{ route('profile.edit') }}">
                                    Profile
                                </a>
                            </li>
                            <li><hr class="dropdown-divider" style="border-color:var(--nx-line)"/></li>
                            <li>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="dropdown-item"
                                            style="color:var(--nx-muted); font-family:'Manrope',sans-serif;">
                                        Log out
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>

                @else
                    <a class="nx-btn" href="{{ route('login') }}">Log in</a>
                    <a class="nx-btn nx-btn-primary" href="{{ route('register') }}">Get started</a>
                @endauth
            </div>

        </nav>
    </div>
</header>

{{-- ============================================================
     FLASH MESSAGES
============================================================ --}}
@if(session('success') || session('error') || session('warning') || session('info'))
    <div class="nx-wrap" style="margin-top:14px;">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible auto-dismiss nx-flash" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible auto-dismiss nx-flash" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('warning'))
            <div class="alert alert-warning alert-dismissible auto-dismiss nx-flash" role="alert">
                {{ session('warning') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('info'))
            <div class="alert alert-info alert-dismissible auto-dismiss nx-flash" role="alert">
                {{ session('info') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
    </div>
@endif

{{-- ============================================================
     VALIDATION ERRORS (global)
============================================================ --}}
@if($errors->any())
    <div class="nx-wrap" style="margin-top:14px;">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <strong>Please fix the following:</strong>
            <ul style="margin:8px 0 0; padding-left:18px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>
@endif

{{-- ============================================================
     MAIN CONTENT
============================================================ --}}
<main>
    @yield('content')
</main>

{{-- ============================================================
     FOOTER
============================================================ --}}
<footer class="nx-footer">
    <div class="nx-wrap">
        <div style="display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center;">

            <div style="display:flex; align-items:center; gap:10px;">
                <span class="nx-logo"></span>
                <strong style="font-family:'Space Grotesk',sans-serif;">Nexus Intelligence</strong>
                <span class="nx-muted">— Nairobi-first OOH/DOOH platform</span>
            </div>

            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <a class="nx-btn nx-btn-sm" href="{{ url('/explore') }}">Explore</a>
                <a class="nx-btn nx-btn-sm" href="{{ route('advertiser.dashboard') }}">Advertiser</a>
                <a class="nx-btn nx-btn-sm" href="{{ route('owner.dashboard') }}">Owner</a>
                <a class="nx-btn nx-btn-sm" href="{{ route('disputes.index') }}">Disputes</a>
            </div>

        </div>

        <div style="margin-top:12px; opacity:0.75;">
            © {{ date('Y') }} Nexus Intelligence. All rights reserved.
        </div>
    </div>
</footer>

{{-- Page-level scripts --}}
@stack('scripts')

</body>
</html>