<!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>{{ $page->getSeoTitle() }}</title>
    <meta name="description" content="{{ $page->getSeoDescription() }}">
    <meta name="keywords" content="{{ $page->getTranslation('meta_keywords', app()->getLocale()) }}">

    <!-- Open Graph -->
    <meta property="og:title" content="{{ $page->getTranslation('title', app()->getLocale()) }}">
    <meta property="og:description" content="{{ $page->getSeoDescription() }}">
    <meta property="og:url" content="{{ request()->url() }}">
    <meta property="og:type" content="website">
    @if($page->getTranslation('og_image', app()->getLocale()))
        <meta property="og:image" content="{{ $page->getTranslation('og_image', app()->getLocale()) }}">
    @endif

    <!-- Canonical URL -->
    <link rel="canonical" href="{{ $page->getCanonicalUrl() }}">

    <!-- Styles -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Tailwind CSS (optional, remove if Tailwind already built via Vite) -->
    <script src="https://cdn.tailwindcss.com"></script>

    @stack('head')
</head>
<body class="font-sans antialiased">
    <main class="cms-page">
        @foreach($components as $component)
            @if($component->canRender())
                <div class="cms-component" data-component="{{ class_basename($component->component_class) }}">
                    @livewire($component->component_class, [
                        'content' => $component->getTranslations('content')
                    ], key('component-' . $component->id))
                </div>
            @endif
        @endforeach
    </main>

    <!-- Scripts -->
    @stack('scripts')
</body>
</html>
