<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Numerología - Análisis de Nombres')</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="{{ url('css/numerology.css') }}" rel="stylesheet">

    @stack('styles')
</head>
<body data-api-url="{{ route('numerology.analyze') }}" data-pdf-url="{{ route('numerology.generate-pdf') }}">
    <!-- Main Container -->
    <div class="container-fluid min-vh-100 d-flex flex-column">

        <!-- Header -->
        <header class="py-4 text-center position-relative">
            @auth
            <div class="position-absolute top-0 end-0 pt-3 pe-3">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-white-50 small d-none d-sm-inline">{{ Auth::user()->name }}</span>
                    <form method="POST" action="{{ route('logout') }}" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-outline-light logout-btn" title="Cerrar sesión">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
                                <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                            </svg>
                            <span class="d-none d-sm-inline">Salir</span>
                        </button>
                    </form>
                </div>
            </div>
            @endauth
            <div class="mystical-symbol mb-3">✨</div>
            <h1 class="display-4 mb-2">@yield('header', 'Numerología')</h1>
            <p class="lead text-muted">@yield('subtitle', 'Descubre el significado oculto de tu nombre')</p>
        </header>

        <!-- Main Content -->
        <main class="flex-grow-1 py-5">
            @yield('content')
        </main>

        <!-- Footer -->
        <footer class="py-4 text-center text-muted">
            <small>&copy; {{ date('Y') }} Sistema de Numerología Laravel</small>
        </footer>

    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Custom JavaScript -->
    @stack('scripts')
</body>
</html>
