@props(['title' => config('app.name')])
<!DOCTYPE html>
<html class="light" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{{ $title }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')
</head>
<body class="bg-surface font-body text-on-surface antialiased min-h-screen flex flex-col">

    @if(session('success'))
        <div class="fixed top-4 right-4 z-[100] bg-secondary-container text-on-secondary-container px-6 py-3 rounded-sm shadow-lg text-sm font-label" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="fixed top-4 right-4 z-[100] bg-error-container text-on-error-container px-6 py-3 rounded-sm shadow-lg text-sm font-label" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)">
            {{ session('error') }}
        </div>
    @endif

    {{ $slot }}

    <div class="fixed inset-0 -z-10 opacity-30 pointer-events-none overflow-hidden">
        <div class="absolute -top-[10%] -left-[5%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px]"></div>
        <div class="absolute -bottom-[10%] -right-[5%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px]"></div>
    </div>

    @stack('scripts')

    @include('partials.translate')
    @include('partials.livechat')
</body>
</html>
