<!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>@yield('title', config('app.name', 'Mangolê'))</title>
    <meta name="description" content="@yield('description', 'Mangolê — O teu supermercado de confiança em Angola. Encontre produtos frescos, campanhas e lojas perto de si.')">
    <meta property="og:site_name" content="Mangolê">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="@yield('title', config('app.name', 'Mangolê'))">
    <meta property="og:description" content="@yield('description', 'Mangolê — O teu supermercado de confiança em Angola.')">
    @hasSection('og_image')
    <meta property="og:image" content="@yield('og_image')">@endif
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="@yield('title', config('app.name', 'Mangolê'))">
    <meta name="twitter:description" content="@yield('description', 'Mangolê — O teu supermercado de confiança em Angola.')">
    @hasSection('twitter_image')
    <meta name="twitter:image" content="@yield('twitter_image')">@endif
    <link rel="canonical" href="{{ url()->current() }}">
    @stack('seo')
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicon-16x16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/apple-touch-icon.png') }}">
    @fonts
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @endif
    @livewireStyles
</head>

<body class="min-h-screen bg-white font-sans text-gray-900 antialiased flex flex-col">
    <x-navbar />

    <main class="flex-1">
        @if(session('card_success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 6000)" class="sticky top-16 z-40 bg-accent text-brand-900 text-center py-3 px-4 text-sm font-semibold">
            {{ session('card_success') }}
            <button @click="show = false" class="ml-4 inline-flex items-center text-brand-900/60 hover:text-brand-900" type="button">&times;</button>
        </div>
        @endif
        @yield('content')
    </main>

    <x-footer />

    <x-back-to-top />

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

</html>