@props(['title' => null, 'description' => null])
<!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="description" content="{{ $description ?? config('niyarasa.brand_tagline') }}">
    <title>{{ $title ? $title.' — ' : '' }}{{ config('niyarasa.brand_name') }}</title>
    <meta name="view-transition" content="same-origin">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <noscript><style>[data-reveal] > *, [data-reveal-self] { opacity: 1 !important; transform: none !important; }</style></noscript>
    <script>window.NIYARASA = { currencySymbol: @json(config('niyarasa.currency.symbol')) };</script>
</head>
<body class="bg-ivory font-sans text-ink antialiased">
    {{-- Shared gradient defs for <x-icon gradient> — defined once here
         instead of duplicated inside every icon instance. Zero-size and
         aria-hidden: it renders nothing on its own, only supplies paint
         servers that other inline <svg>s reference via url(#id). --}}
    <svg width="0" height="0" class="absolute" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="icon-gold-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#c9a661" />
                <stop offset="50%" stop-color="#e4c98e" />
                <stop offset="100%" stop-color="#c9a661" />
            </linearGradient>
            <linearGradient id="icon-instagram-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#f9ce34" />
                <stop offset="50%" stop-color="#ee2a7b" />
                <stop offset="100%" stop-color="#6228d7" />
            </linearGradient>
        </defs>
    </svg>

    <x-frontend.header />

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

    <x-frontend.footer />

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                window.Swal.fire({
                    icon: 'success',
                    title: @json(session('success')),
                    toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true,
                });
            });
        </script>
    @endif
</body>
</html>
