@props(['title' => config('app.name'), 'activePage' => ''])
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{{ $title }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')
</head>
<body class="bg-wf-bg min-h-screen" x-data="{ mobileMenuOpen: false }">

    @if(session('success'))
        <div class="fixed top-4 right-4 z-[100] bg-green-100 text-green-800 px-6 py-3 rounded shadow-lg text-sm" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="fixed top-4 right-4 z-[100] bg-red-100 text-red-800 px-6 py-3 rounded shadow-lg text-sm" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)">
            {{ session('error') }}
        </div>
    @endif

    <!-- Top Navigation Bar -->
    <header class="bg-[#FFFFFE] border-b border-gray-300">
        <div class="w-full mx-auto flex items-center justify-between px-4 sm:px-6 lg:px-10 py-3">
            <div class="flex items-center space-x-3">
                @if(config('app.logo'))
                    <a href="{{ route('dashboard') }}">
                        <img src="{{ asset(config('app.logo')) }}" alt="{{ config('app.name') }}" class="h-8 sm:h-10 w-auto" style="max-height: 40px; max-width: 160px; object-fit: contain;" />
                    </a>
                @endif
                <a href="{{ route('dashboard') }}" class="text-wf-red font-bold text-lg sm:text-2xl tracking-tighter">{{ strtoupper(config('app.name')) }}</a>
            </div>

            <!-- Desktop Nav -->
            <nav class="hidden md:flex items-center space-x-5 text-gray-600 text-sm">
                <a href="{{ route('notifications') }}" class="relative flex items-center space-x-1 cursor-pointer">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
                    @if($unreadNotificationCount > 0)
                        <span class="absolute -top-2 -right-2 inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-red-600 rounded-full">{{ $unreadNotificationCount > 99 ? '99+' : $unreadNotificationCount }}</span>
                    @endif
                </a>

                <form method="POST" action="{{ route('logout') }}" class="flex items-center space-x-1 cursor-pointer pl-2">
                    @csrf
                    <button type="submit" class="font-medium text-sm">Sign Off</button>
                </form>
                <div class="flex items-center space-x-2 pl-4 border-l border-gray-300">
                    <div class="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
                    </div>
                    <a href="{{ route('profile') }}" class="text-sm">Welcome, {{ auth()->user()->first_name }}</a>
                </div>
            </nav>

            <!-- Mobile Hamburger -->
            <button class="md:hidden p-2 text-gray-600" @click="mobileMenuOpen = !mobileMenuOpen" aria-label="Toggle menu">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path x-show="!mobileMenuOpen" d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                    <path x-show="mobileMenuOpen" x-cloak d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                </svg>
            </button>
        </div>

        <!-- Mobile Menu Dropdown -->
        <div x-show="mobileMenuOpen" x-cloak x-transition class="md:hidden border-t border-gray-200 bg-white px-4 pb-4 pt-2 space-y-3">
            <a href="{{ route('dashboard') }}" class="block text-base font-medium text-gray-700 py-2 {{ $activePage === 'accounts' ? 'text-blue-700' : '' }}">Accounts</a>
            <a href="{{ route('brokerage') }}" class="block text-base font-medium text-gray-700 py-2 {{ $activePage === 'brokerage' ? 'text-blue-700' : '' }}">Brokerage</a>
            <a href="{{ route('transfer') }}" class="block text-base font-medium text-gray-700 py-2 {{ $activePage === 'transfer' ? 'text-blue-700' : '' }}">Transfer &amp; Pay</a>
            <a href="{{ route('bill-payments') }}" class="block text-base font-medium text-gray-700 py-2 {{ $activePage === 'bill-payments' ? 'text-blue-700' : '' }}">Pay Bills</a>

            {{-- Mobile Security & Support --}}
            <div x-data="{ open: false }">
                <button @click="open = !open" class="flex items-center justify-between w-full text-base font-medium text-gray-700 py-2 {{ $activePage === 'security' ? 'text-blue-700' : '' }}">
                    Security &amp; Support
                    <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                </button>
                <div x-show="open" class="pl-4 space-y-2 mt-1">
                    <a href="{{ route('security.report-fraud') }}" class="block text-sm text-gray-600 py-1">Report Fraud & ID Theft</a>
                    <a href="{{ route('security.track-claims') }}" class="block text-sm text-gray-600 py-1">Track Claims</a>
                    <a href="{{ route('security.report-phishing') }}" class="block text-sm text-gray-600 py-1">Report Phishing & Scams</a>
                    <a href="{{ route('security.protect-account') }}" class="block text-sm text-gray-600 py-1">Protect Your Account</a>
                    <a href="{{ route('guest.contact') }}" class="block text-sm text-gray-600 py-1">Contact Us</a>
                    <a href="{{ route('guest.faq') }}" class="block text-sm text-gray-600 py-1">FAQ</a>
                </div>
            </div>

            {{-- Mobile Plan & Learn --}}
            <div x-data="{ open: false }">
                <button @click="open = !open" class="flex items-center justify-between w-full text-base font-medium text-gray-700 py-2 {{ $activePage === 'plan-learn' ? 'text-blue-700' : '' }}">
                    Plan &amp; Learn
                    <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                </button>
                <div x-show="open" class="pl-4 space-y-2 mt-1">
                    <a href="{{ route('plan-learn.money-map') }}" class="block text-sm text-gray-600 py-1">My Money Map</a>
                    <a href="{{ route('plan-learn.credit-planning') }}" class="block text-sm text-gray-600 py-1">Credit Planning</a>
                    <a href="{{ route('plan-learn.budget-savings') }}" class="block text-sm text-gray-600 py-1">Budget & Savings</a>
                </div>
            </div>

            <a href="{{ route('notifications') }}" class="flex items-center space-x-2 text-base font-medium text-gray-700 py-2 {{ $activePage === 'notifications' ? 'text-blue-700' : '' }}">
                <span>Notifications</span>
                @if($unreadNotificationCount > 0)
                    <span class="inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-red-600 rounded-full">{{ $unreadNotificationCount > 99 ? '99+' : $unreadNotificationCount }}</span>
                @endif
            </a>
            <div class="border-t border-gray-100 pt-3 space-y-3">
                <a href="{{ route('profile') }}" class="flex items-center space-x-2 text-gray-700 text-base">
                    <div class="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
                    </div>
                    <span>{{ auth()->user()->first_name }}</span>
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="text-base font-medium text-red-600">Sign Off</button>
                </form>
            </div>
        </div>
    </header>

    <!-- Sub-Header & Main Nav -->
    <div class="bg-white shadow-sm">
        <div class="w-full mx-auto px-4 sm:px-6 lg:px-10 py-3">
            <h1 class="text-lg sm:text-xl font-semibold text-gray-800 mb-4">{{ config('app.name') }}</h1>
            <nav class="hidden md:flex space-x-10 text-sm font-medium text-gray-600 border-t border-gray-100 pt-3">
                <a class="{{ $activePage === 'accounts' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}" href="{{ route('dashboard') }}">Accounts</a>
                <a class="{{ $activePage === 'brokerage' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}" href="{{ route('brokerage') }}">Brokerage</a>
                <a class="{{ $activePage === 'transfer' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}" href="{{ route('transfer') }}">Transfer &amp; Pay</a>
                <a class="{{ $activePage === 'bill-payments' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}" href="{{ route('bill-payments') }}">Pay Bills</a>

                {{-- Security & Support Dropdown --}}
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" @click.away="open = false" class="flex items-center gap-1 {{ $activePage === 'security' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}">
                        Security &amp; Support
                        <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                    </button>
                    <div x-show="open" x-cloak x-transition class="absolute left-0 top-full mt-3 w-56 bg-white border border-gray-200 rounded-lg shadow-lg py-2 z-50">
                        <a href="{{ route('security.report-fraud') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Report Fraud & ID Theft</a>
                        <a href="{{ route('security.track-claims') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Track Claims</a>
                        <a href="{{ route('security.report-phishing') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Report Phishing & Scams</a>
                        <a href="{{ route('security.protect-account') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Protect Your Account</a>
                        <hr class="my-1 border-gray-100">
                        <a href="{{ route('guest.contact') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Contact Us</a>
                        <a href="{{ route('guest.faq') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">FAQ</a>
                    </div>
                </div>

                {{-- Plan & Learn Dropdown --}}
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" @click.away="open = false" class="flex items-center gap-1 {{ $activePage === 'plan-learn' ? 'text-blue-700 border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-700' }}">
                        Plan &amp; Learn
                        <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                    </button>
                    <div x-show="open" x-cloak x-transition class="absolute left-0 top-full mt-3 w-52 bg-white border border-gray-200 rounded-lg shadow-lg py-2 z-50">
                        <a href="{{ route('plan-learn.money-map') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">My Money Map</a>
                        <a href="{{ route('plan-learn.credit-planning') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Credit Planning</a>
                        <a href="{{ route('plan-learn.budget-savings') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Budget & Savings</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <!-- Main Page Content Area -->
    <main class="w-full mx-auto px-4 sm:px-6 lg:px-10 py-6">
        {{ $slot }}
    </main>

    @stack('scripts')

    @include('partials.translate')
    @include('partials.livechat')
</body>
</html>
