<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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', ($branding['site_name'] ?? config('app.name')) . ' - ' . (($branding['tagline'] ?? '') ?: 'Study Abroad Experts'))</title>
    <meta name="description" content="@yield('meta_description', ($branding['site_name'] ?? 'GPS Migration') . ' helps students get admission in top universities worldwide. Free counseling, visa support, and more.')" />
    <link rel="canonical" href="{{ url()->current() }}" />
    @if(!empty($branding['favicon_url']))
        <link rel="icon" href="{{ $branding['favicon_url'] }}" />
    @endif

    <meta property="og:title" content="@yield('title', $branding['site_name'] ?? config('app.name'))" />
    <meta property="og:description" content="@yield('meta_description', '')" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="website" />
    @if(!empty($branding['logo_url']))
        <meta property="og:image" content="{{ $branding['logo_url'] }}" />
    @endif
    @hasSection('og_image')
        <meta property="og:image" content="@yield('og_image')" />
    @endif

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
    @php
        $theme = $generalSettings['theme'] ?? [];
        $brandPrimary = $theme['primary'] ?? '#1d4ed8';
        $brandSecondary = $theme['secondary'] ?? '#0f172a';
        $brandAccent = $theme['accent'] ?? '#e1252b';
        $headGradientFrom = $theme['head_gradient_from'] ?? '#1e3a8a';
        $headGradientTo = $theme['head_gradient_to'] ?? '#0f172a';
    @endphp
    <style>
        :root {
            --brand-primary: {{ $brandPrimary }};
            --brand-secondary: {{ $brandSecondary }};
            --brand-accent: {{ $brandAccent }};
            --brand-highlight: {{ $brandAccent }};
            --page-head-gradient-from: {{ $headGradientFrom }};
            --page-head-gradient-to: {{ $headGradientTo }};
            --page-head-gradient: linear-gradient(145deg, var(--page-head-gradient-from) 0%, color-mix(in srgb, var(--page-head-gradient-from) 45%, var(--page-head-gradient-to)) 56%, var(--page-head-gradient-to) 100%);
            --brand-bg-soft: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
            --brand-border-soft: color-mix(in srgb, var(--brand-primary) 22%, #ffffff);
            --brand-ink-soft: color-mix(in srgb, var(--brand-secondary) 35%, #ffffff);

            --site-red: var(--brand-accent);
            --site-red-dark: color-mix(in srgb, var(--brand-accent) 85%, #000000);
            --site-blue: var(--brand-primary);
            --site-ink: var(--brand-secondary);
            --site-muted: var(--brand-ink-soft);
            --country-brand: var(--brand-primary);
            --country-ink: var(--brand-secondary);
            --country-muted: var(--brand-ink-soft);
            --ss-ink: var(--brand-secondary);
            --ss-muted: var(--brand-ink-soft);
            --ss-red: var(--brand-accent);
        }

        body { font-family: 'Inter', sans-serif; }
        html { scroll-behavior: smooth; }

        .public-theme .bg-blue-600 { background-color: var(--brand-primary) !important; }
        .public-theme .bg-blue-700 { background-color: color-mix(in srgb, var(--brand-primary) 84%, #000000) !important; }
        .public-theme .bg-blue-100,
        .public-theme .bg-blue-50,
        .public-theme .bg-indigo-100,
        .public-theme .bg-indigo-50,
        .public-theme .bg-purple-100,
        .public-theme .bg-purple-50 { background-color: var(--brand-bg-soft) !important; }
        .public-theme .text-blue-600,
        .public-theme .text-blue-500,
        .public-theme .text-blue-400,
        .public-theme .text-indigo-700,
        .public-theme .text-indigo-600,
        .public-theme .text-purple-700,
        .public-theme .text-purple-600,
        .public-theme .text-blue-700 { color: var(--brand-primary) !important; }
        .public-theme .text-blue-300,
        .public-theme .text-blue-200,
        .public-theme .text-blue-100 { color: color-mix(in srgb, #ffffff 86%, var(--brand-primary)) !important; }
        .public-theme .border-blue-200,
        .public-theme .border-blue-100,
        .public-theme .border-indigo-200,
        .public-theme .border-indigo-100,
        .public-theme .border-purple-200,
        .public-theme .border-purple-100 { border-color: var(--brand-border-soft) !important; }
        .public-theme .hover\:bg-blue-700:hover { background-color: color-mix(in srgb, var(--brand-primary) 84%, #000000) !important; }
        .public-theme .hover\:text-blue-600:hover,
        .public-theme .hover\:text-blue-500:hover,
        .public-theme .hover\:text-indigo-600:hover,
        .public-theme .hover\:text-purple-600:hover { color: var(--brand-primary) !important; }
        .public-theme .hover\:bg-blue-100:hover,
        .public-theme .hover\:bg-blue-50:hover,
        .public-theme .hover\:bg-indigo-100:hover,
        .public-theme .hover\:bg-indigo-50:hover,
        .public-theme .hover\:bg-purple-100:hover,
        .public-theme .hover\:bg-purple-50:hover { background-color: var(--brand-bg-soft) !important; }
        .public-theme .focus\:ring-blue-500:focus { --tw-ring-color: color-mix(in srgb, var(--brand-primary) 34%, transparent) !important; }
        .public-theme .focus\:border-blue-500:focus { border-color: var(--brand-primary) !important; }
        .public-theme .text-red-700,
        .public-theme .text-red-600,
        .public-theme .text-red-500 { color: var(--brand-highlight) !important; }
        .public-theme .bg-red-600,
        .public-theme .bg-red-700 { background-color: var(--brand-highlight) !important; }
        .public-theme .hover\:bg-red-700:hover,
        .public-theme .hover\:bg-red-600:hover { background-color: color-mix(in srgb, var(--brand-highlight) 84%, #000000) !important; }
        .public-theme .from-blue-900 { --tw-gradient-from: var(--page-head-gradient-from) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--page-head-gradient-from) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
        .public-theme .to-blue-700 { --tw-gradient-to: var(--page-head-gradient-to) var(--tw-gradient-to-position) !important; }
        .public-theme .accent { color: var(--brand-highlight) !important; }
    </style>

    @include('partials.public-phone-inputs')
    @stack('styles')
</head>
<body class="public-theme bg-white text-gray-800 antialiased">

@include('partials.navbar')

@yield('content')

@include('partials.footer')

@php
    $waNumber = preg_replace('/\\D+/', '', $siteSettings['whatsapp_number'] ?? '');
    $waLink = $waNumber ? ('https://wa.me/' . $waNumber) : 'https://wa.me/+8801XXXXXXXXX';
@endphp
<a href="{{ $waLink }}" target="_blank"
   class="fixed bottom-24 right-5 md:bottom-8 z-50 w-14 h-14 bg-green-500 hover:bg-green-600 rounded-full shadow-xl flex items-center justify-center transition-transform hover:scale-110"
   title="Chat on WhatsApp">
    <svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
        <path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.556 4.124 1.528 5.862L0 24l6.29-1.506A11.954 11.954 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.882a9.875 9.875 0 01-5.031-1.378l-.36-.214-3.733.894.928-3.638-.235-.374A9.867 9.867 0 012.12 12c0-5.45 4.43-9.882 9.88-9.882 5.449 0 9.879 4.432 9.879 9.882 0 5.449-4.43 9.882-9.879 9.882z"/>
    </svg>
</a>

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