@props(['title' => 'Portal do Cliente — OPCON'])

<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title }}</title>

    <link rel="icon" type="image/jpeg" href="{{ asset('favicon.jpg') }}">
    <link rel="shortcut icon" href="{{ asset('favicon.jpg') }}">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        .cli-nav-link {
            display: flex; align-items: center; gap: 0.5rem;
            padding: 0.375rem 0.75rem; border-radius: 7px;
            font-size: 0.8125rem; font-weight: 500;
            text-decoration: none; color: rgba(255,255,255,0.6);
            transition: color 0.15s, background 0.15s;
            white-space: nowrap;
        }
        .cli-nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
        .cli-nav-link.active { color: #25b87e; background: rgba(37,184,126,0.12); }

        .cli-mobile-link {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.75rem 1rem; border-radius: 10px;
            font-size: 0.9375rem; font-weight: 500;
            text-decoration: none; color: #374151;
            transition: color 0.15s, background 0.15s;
        }
        .cli-mobile-link:hover { background: #f8fafc; color: #1e3a5f; }
        .cli-mobile-link.active { background: rgba(37,184,126,0.08); color: #25b87e; }
    </style>
</head>

<body style="background: #f1f5f9; font-family: 'Poppins', sans-serif; color: #1e3a5f; min-height: 100vh;"
      x-data="{ navOpen: false }">

    <header style="background: linear-gradient(135deg, #1a3356 0%, #1e3a5f 100%); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 20px rgba(0,0,0,0.15);">
        <div style="max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;">

            {{-- Logo --}}
            <a href="{{ route('home') }}" style="display: flex; align-items: center; gap: 0.625rem; text-decoration: none; flex-shrink: 0;">
                <img src="{{ asset('opcon-logotipo.jpg') }}" alt="OPCON"
                     style="height: 30px; width: auto; border-radius: 5px; padding: 2px 7px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
                <span style="font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1875rem 0.5rem; border-radius: 100px; background: rgba(37,184,126,0.18); color: #6ee7b7; border: 1px solid rgba(37,184,126,0.25); white-space: nowrap; display: none;"
                      class="hidden sm:inline-flex">Portal do Cliente</span>
            </a>

            {{-- Desktop Nav --}}
            @php
                $navItems = [
                    ['route' => 'cliente.dashboard',   'label' => 'Contratos',   'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
                    ['route' => 'cliente.mensagens',   'label' => 'Mensagens',   'icon' => 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'],
                    ['route' => 'cliente.documentos',  'label' => 'Documentos',  'icon' => 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'],
                    ['route' => 'cliente.financeiro',  'label' => 'Financeiro',  'icon' => 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['route' => 'cliente.comunicados', 'label' => 'Comunicados', 'icon' => 'M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z'],
                    ['route' => 'cliente.onboarding',  'label' => 'Onboarding',  'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12l2 2 4-4'],
                ];
            @endphp

            <nav style="display: flex; gap: 0.125rem; align-items: center;" class="hidden lg:flex">
                @foreach($navItems as $item)
                    @php $active = request()->routeIs($item['route']); @endphp
                    <a href="{{ route($item['route']) }}" class="cli-nav-link {{ $active ? 'active' : '' }}">
                        <svg style="width:14px;height:14px;flex-shrink:0;opacity:0.8;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $item['icon'] }}"/>
                        </svg>
                        {{ $item['label'] }}
                    </a>
                @endforeach
            </nav>

            {{-- Right side: user + logout + hamburger --}}
            <div style="display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0;">

                {{-- User avatar (desktop) --}}
                <div class="hidden lg:flex" style="align-items: center; gap: 0.5rem;">
                    <div style="width: 30px; height: 30px; border-radius: 50%; background: rgba(37,184,126,0.15); border: 1px solid rgba(37,184,126,0.3); display: flex; align-items: center; justify-content: center;">
                        <span style="font-size: 0.6875rem; font-weight: 700; color: #6ee7b7; text-transform: uppercase;">{{ substr(auth()->user()->name, 0, 1) }}</span>
                    </div>
                    <span style="font-size: 0.8125rem; color: rgba(255,255,255,0.6); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ auth()->user()->name }}</span>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit"
                                style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.35); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 0.15s; padding: 0.25rem 0;"
                                onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='rgba(255,255,255,0.35)'">
                            Sair
                        </button>
                    </form>
                </div>

                {{-- Hamburger (mobile) --}}
                <button @click="navOpen = !navOpen"
                        class="lg:hidden"
                        style="width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); cursor: pointer; display: flex; align-items: center; justify-content: center;"
                        aria-label="Menu">
                    <svg x-show="!navOpen" style="width:18px;height:18px;" 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>
                    <svg x-show="navOpen" style="width:18px;height:18px;display:none;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Mobile nav panel --}}
        <div x-show="navOpen"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="lg:hidden"
             style="background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: none;">

            {{-- User info --}}
            <div style="padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 0.75rem;">
                <div style="width: 36px; height: 36px; border-radius: 50%; background: rgba(37,184,126,0.12); border: 2px solid rgba(37,184,126,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    <span style="font-size: 0.875rem; font-weight: 700; color: #25b87e; text-transform: uppercase;">{{ substr(auth()->user()->name, 0, 1) }}</span>
                </div>
                <div style="flex: 1; min-width: 0;">
                    <p style="font-size: 0.875rem; font-weight: 600; color: #1e3a5f; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ auth()->user()->name }}</p>
                    <p style="font-size: 0.75rem; color: #94a3b8; margin: 0;">Portal do Cliente</p>
                </div>
            </div>

            {{-- Nav links --}}
            <div style="padding: 0.75rem 1rem;">
                @foreach($navItems as $item)
                    @php $active = request()->routeIs($item['route']); @endphp
                    <a href="{{ route($item['route']) }}" @click="navOpen = false"
                       class="cli-mobile-link {{ $active ? 'active' : '' }}">
                        <svg style="width:18px;height:18px;flex-shrink:0;opacity:0.7;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $item['icon'] }}"/>
                        </svg>
                        {{ $item['label'] }}
                    </a>
                @endforeach
            </div>

            {{-- Logout --}}
            <div style="padding: 0 1rem 1rem; border-top: 1px solid #f1f5f9; padding-top: 0.75rem;">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            style="width: 100%; padding: 0.75rem; border-radius: 10px; border: 1px solid #fee2e2; background: #fff; color: #ef4444; font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.15s;"
                            onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background='#fff'">
                        <svg style="width:16px;height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        Sair
                    </button>
                </form>
            </div>
        </div>
    </header>

    <main style="max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 3rem;">
        {{ $slot }}
    </main>

</body>
</html>
