<!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() }}">

    @php
        $metaTitle = isset($title) ? $title.', Money-Wise' : 'Money-Wise, The smarter way to build wealth across Africa';
        $metaDesc = $description ?? 'Judgement-free financial tools, learning and coaching. Take control of your money, get out of debt and build wealth that lasts, the Money-Wise way.';
        $metaImage = ($ogImage ?? null) ?: asset('images/stock/hero-confidence.jpg');
        $metaUrl = url()->current();
    @endphp

    <title>{{ $metaTitle }}</title>
    <meta name="description" content="{{ $metaDesc }}">
    <link rel="canonical" href="{{ $metaUrl }}">

    {{-- Open Graph / social sharing --}}
    <meta property="og:site_name" content="Money-Wise">
    <meta property="og:type" content="{{ $ogType ?? 'website' }}">
    <meta property="og:title" content="{{ $metaTitle }}">
    <meta property="og:description" content="{{ $metaDesc }}">
    <meta property="og:url" content="{{ $metaUrl }}">
    <meta property="og:image" content="{{ $metaImage }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $metaTitle }}">
    <meta name="twitter:description" content="{{ $metaDesc }}">
    <meta name="twitter:image" content="{{ $metaImage }}">

    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="min-h-screen bg-white">
    <x-impersonation-banner />
    <x-site.nav />

    <main>
        {{ $slot }}
    </main>

    <x-site.footer />

    <x-site.tools-dock />
    <x-site.floating-actions />

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