<!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', 'INTERIA') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />

    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        /* ===== BRAND COLOR - SOFT PEACH/AMBER ===== */
        :root {
            --brand-primary: #fed7aa;
            --brand-primary-dark: #fdba74;
            --brand-primary-light: #fff7ed;
            --brand-secondary: #fef9c3;
            --brand-accent: #fde68a;
            --brand-glow: rgba(253, 186, 116, 0.3);
            --brand-text: #78350f; /* Dark amber for readability */
        }

        /* Brand Gradient - Soft */
        .brand-gradient {
            background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Primary Gradient - Soft Peach/Yellow */
        .gradient-primary {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            box-shadow: 0 4px 15px rgba(253, 186, 116, 0.3);
            color: var(--brand-text) !important;
        }

        .gradient-primary:hover {
            background: linear-gradient(135deg, #fde68a 0%, #fdba74 50%, #fef9c3 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(253, 186, 116, 0.4);
            color: var(--brand-text) !important;
        }

        /* Secondary Gradient */
        .gradient-secondary {
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
            color: var(--brand-text) !important;
        }


        /* Animasi */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
            50% { box-shadow: 0 0 0 8px rgba(253, 186, 116, 0); }
        }

        .animate-fade-in { animation: fadeIn 0.3s ease forwards; }
        .animate-pulse-glow { animation: pulse 2s infinite; }

        /* Custom Scrollbar - Soft Theme */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #fdba74; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #f97316; }

        /* Selection color */
        ::selection { background: #fed7aa; color: #78350f; }

        /* Card hover effect */
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px #fed7aa;
        }

        /* Button styles */
        .btn-primary {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            color: #78350f; /* very dark amber */
            font-weight: 700;
            padding: 10px 20px;
            border-radius: 12px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(253, 186, 116, 0.3);
            border: 1px solid #fde68a;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #fde68a 0%, #fdba74 50%, #fef9c3 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(253, 186, 116, 0.4);
        }

        /* Badge styles */
        .badge-orange {
            background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa;
        }

        /* Link styles */
        .link-orange { color: #f97316; transition: all 0.2s ease; }
        .link-orange:hover { color: #ea580c; text-decoration: underline; }
    </style>

    @stack('styles')
</head>

<body class="font-sans antialiased bg-white text-stone-800">
    <div class="min-h-screen">

        @include('layouts.navigation')

        <!-- Page Heading -->
        @isset($header)
        <header class="bg-white/90 backdrop-blur-md shadow-md border-b border-orange-100">
            <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
        @endisset

        <!-- Page Content -->
        <main class="py-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

                <!-- Flash Messages - More Vibrant -->
                @if(session('success'))
                <div class="mb-6 p-4 bg-gradient-to-r from-emerald-500 to-green-600 text-white rounded-xl shadow-lg animate-fade-in relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -mr-10 -mt-10"></div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle mr-3 text-xl"></i>
                            <span class="font-medium">{{ session('success') }}</span>
                        </div>
                        <button onclick="this.parentElement.parentElement.remove()" class="text-white/80 hover:text-white transition">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                @endif

                @if(session('error'))
                <div class="mb-6 p-4 bg-gradient-to-r from-rose-500 to-red-600 text-white rounded-xl shadow-lg animate-fade-in relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -mr-10 -mt-10"></div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-circle mr-3 text-xl"></i>
                            <span class="font-medium">{{ session('error') }}</span>
                        </div>
                        <button onclick="this.parentElement.parentElement.remove()" class="text-white/80 hover:text-white transition">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                @endif

                {{ $slot }}

            </div>
        </main>

    </div>

    @stack('scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto dismiss flash messages after 5 seconds
            const flashMessages = document.querySelectorAll('.animate-fade-in');
            flashMessages.forEach(message => {
                setTimeout(() => {
                    message.style.transition = 'opacity 0.3s ease';
                    message.style.opacity = '0';
                    setTimeout(() => {
                        if (message.parentElement) message.remove();
                    }, 300);
                }, 5000);
            });
        });
    </script>

</body>

</html>