<!DOCTYPE html>
<html lang="pt" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>@yield('title', 'Portal de Dados') — Segunor</title>
    <link rel="icon" type="image/png" href="{{ asset('images/favicon.png') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @yield('head')
</head>

<body style="display: flex; flex-direction: column;">
    <header>
        <div class="header-inner">
            <a href="{{ route('home') }}"
                style="text-decoration: none; display: flex; align-items: center; gap: 0.5rem;">
                <img src="{{ asset('images/logo-white.png') }}" alt="Segunor" class="dark-mode-logo"
                    style="height: 2rem; width: auto;" draggable="false" oncontextmenu="return false;">
                <img src="{{ asset('images/logo-dark.png') }}" alt="Segunor" class="light-mode-logo"
                    style="height: 2rem; width: auto;" draggable="false" oncontextmenu="return false;">
                <span
                    style="color: var(--text-muted); font-weight: 400; font-size: 0.75rem; border-left: 1px solid var(--border-color); padding-left: 0.5rem; margin-left: 0.25rem;">Portal
                    de Dados</span>
            </a>
            <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn"
                style="display: inline-flex; align-items: center; gap: 0.4rem;"><svg id="sunIcon" width="14" height="14"
                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg><svg id="moonIcon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    style="display:none;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg><span id="themeLabel">Claro</span></button>
        </div>
    </header>

    <main>
        <div class="container">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('warning'))
                <div class="alert alert-warning">{{ session('warning') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">
                    @foreach($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                </div>
            @endif
            @yield('content')
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; {{ date('Y') }} Segunor — Segurança Privada | Alvará n.º 281/A</p>
            <p style="margin-top: 0.5rem;">
                <a href="{{ route('legal') }}">Política de Privacidade</a> ·
                <a href="{{ route('rgpd.form') }}">Exercício de Direitos RGPD</a>
            </p>
        </div>
    </footer>

    <script>
        function updateThemeBtn(theme) {
            const sun = document.getElementById('sunIcon');
            const moon = document.getElementById('moonIcon');
            const label = document.getElementById('themeLabel');
            if (sun && moon) {
                sun.style.display = theme === 'dark' ? 'block' : 'none';
                moon.style.display = theme === 'light' ? 'block' : 'none';
            }
            if (label) label.textContent = theme === 'dark' ? 'Claro' : 'Escuro';
        }
        function toggleTheme() {
            const html = document.documentElement;
            const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
            updateThemeBtn(next);
        }
        (function () {
            const saved = localStorage.getItem('theme') || 'dark';
            document.documentElement.setAttribute('data-theme', saved);
            updateThemeBtn(saved);
        })();
    </script>
    @yield('scripts')
</body>

</html>