<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="@yield('meta_description', 'Dr. Rajan Shah is one of Nepal\'s most renowned gynecologists and IVF specialists, known for his expertise in fertility treatments and advanced reproductive techniques.')">

    <title>@yield('title', 'Dr. Rajan Shah | Gynecologist & IVF Specialist')</title>

    <!-- Fonts -->
    <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&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">

    <!-- Styles / Scripts -->
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    @else
        <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: {
                            sans: ['Inter', 'sans-serif'],
                            heading: ['Plus Jakarta Sans', 'sans-serif'],
                        },
                        colors: {
                            teal: {
                                50: '#fcf3f4',
                                100: '#f8e4e6',
                                200: '#efc3c8',
                                300: '#e2979f',
                                400: '#d0606e',
                                500: '#bc3c4d',
                                600: '#80182a',
                                700: '#751324',
                                800: '#641321',
                                900: '#55151f',
                            },
                            emerald: {
                                500: '#10b981',
                                600: '#059669',
                            }
                        }
                    }
                }
            }
        </script>
    @endif
</head>
<body class="font-sans antialiased text-gray-900 bg-gray-50 flex flex-col min-h-screen">
    
    <x-navbar />

    <main class="flex-grow pt-20">
        @yield('content')
    </main>

    <!-- Flash Messages -->
    @if(session('success') || session('error') || $errors->any())
        <div id="toast-container" class="fixed top-24 right-4 z-50 flex flex-col gap-2">
            @if(session('success'))
                <div class="bg-teal-600 text-white px-6 py-4 rounded-lg shadow-xl flex items-center justify-between min-w-[300px] animate-fade-in-down" id="success-toast">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="font-medium">{{ session('success') }}</span>
                    </div>
                    <button onclick="document.getElementById('success-toast').remove()" class="ml-4 text-teal-100 hover:text-white">
                        <svg class="w-5 h-5" 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"></path></svg>
                    </button>
                </div>
            @endif
            @if(session('error'))
                <div class="bg-red-500 text-white px-6 py-4 rounded-lg shadow-xl flex items-center justify-between min-w-[300px] animate-fade-in-down" id="error-toast">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 mr-2" 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"></path></svg>
                        <span class="font-medium">{{ session('error') }}</span>
                    </div>
                    <button onclick="document.getElementById('error-toast').remove()" class="ml-4 text-red-100 hover:text-white">
                        <svg class="w-5 h-5" 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"></path></svg>
                    </button>
                </div>
            @endif
            @if($errors->any())
                <div class="bg-red-500 text-white px-6 py-4 rounded-lg shadow-xl flex items-center justify-between min-w-[300px] animate-fade-in-down" id="validation-toast">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                        <span class="font-medium">{{ $errors->first() }}</span>
                    </div>
                    <button onclick="document.getElementById('validation-toast').remove()" class="ml-4 text-red-100 hover:text-white">
                        <svg class="w-5 h-5" 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"></path></svg>
                    </button>
                </div>
            @endif
        </div>
        <script>
            setTimeout(() => {
                const toast = document.getElementById('toast-container');
                if (toast) {
                    toast.style.opacity = '0';
                    toast.style.transition = 'opacity 0.5s ease';
                    setTimeout(() => toast.remove(), 500);
                }
            }, 5000);
        </script>
        <style>
            @keyframes fadeInDown {
                0% { opacity: 0; transform: translateY(-20px); }
                100% { opacity: 1; transform: translateY(0); }
            }
            .animate-fade-in-down { animation: fadeInDown 0.3s ease-out forwards; }
        </style>
    @endif

    <x-footer />

    @php
        $whatsappPhone = preg_replace('/[^0-9]/', '', \App\Models\SiteSetting::where('key', 'phone')->value('value') ?? '+9771234567890');
    @endphp
    <!-- WhatsApp Floating Button -->
    <a href="https://wa.me/{{ $whatsappPhone }}" target="_blank" rel="noopener noreferrer" class="fixed bottom-6 right-6 bg-[#25D366] text-white rounded-full p-4 shadow-lg hover:bg-[#128C7E] hover:scale-110 transition-transform duration-300 z-50 flex items-center justify-center group" aria-label="Chat on WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M11.999 0C5.373 0 0 5.373 0 12c0 2.115.55 4.14 1.595 5.92L0 24l6.23-1.636C8.037 23.407 10 24 11.999 24 18.626 24 24 18.627 24 12c0-6.627-5.374-12-12.001-12zm0 22.016c-1.802 0-3.565-.483-5.111-1.4l-.366-.217-3.799.997 1.015-3.702-.238-.378C2.476 15.428 1.984 13.738 1.984 12c0-5.525 4.493-10.016 10.015-10.016 5.523 0 10.016 4.491 10.016 10.016S17.522 22.016 11.999 22.016zm5.503-7.533c-.302-.151-1.785-.882-2.062-.983-.277-.101-.479-.151-.68.151-.202.302-.781.983-.957 1.184-.176.201-.353.226-.655.075-2.079-1.042-3.415-2.221-4.757-4.526-.176-.302.176-.28.473-.873.101-.202.05-.378-.025-.529-.075-.151-.68-1.639-.931-2.244-.244-.59-.494-.51-.68-.52h-.58c-.201 0-.529.076-.806.378-.277.302-1.057 1.033-1.057 2.519 0 1.486 1.083 2.923 1.234 3.124.151.202 2.128 3.251 5.155 4.557 2.164.933 2.915 1.013 3.931.847.674-.11 1.785-.73 2.036-1.436.252-.705.252-1.309.176-1.436-.075-.126-.277-.201-.58-.352z"/>
        </svg>
    </a>

    @stack('scripts')
</body>
</html>
