<!DOCTYPE html>
<html class="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        @include('partials.website-meta', [
            'title' => ($page->seo_title ?: $page->title).' - '.config('app.name', 'urless'),
            'description' => $page->seo_description,
            'canonical' => $canonicalUrl,
            'ogTitle' => $page->seo_title ?: $page->title,
            'ogDescription' => $page->seo_description,
        ])
        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <style>
            :root {
                --primary: #4f46e5;
                --primary-dark: #4338ca;
                --surface: #f8fafc;
                --on-surface: #0f172a;
                --secondary: #64748b;
                --line: #e2e8f0;
            }

            .font-headline { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }
            .font-body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
            .text-primary { color: var(--primary); }
            .text-secondary { color: var(--secondary); }
            .bg-primary { background-color: var(--primary); }
            .border-line { border-color: var(--line); }
            .hover\:text-primary:hover { color: var(--primary); }
            .hover\:bg-primary-dark:hover { background-color: var(--primary-dark); }

            .material-symbols-outlined {
                font-family: "Material Symbols Outlined";
                font-weight: normal;
                font-style: normal;
                font-size: 24px;
                line-height: 1;
                letter-spacing: normal;
                text-transform: none;
                display: inline-block;
                white-space: nowrap;
                word-wrap: normal;
                direction: ltr;
                -webkit-font-feature-settings: "liga";
                -webkit-font-smoothing: antialiased;
                font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
                vertical-align: middle;
            }

            .glass-nav {
                background: rgba(255, 255, 255, 0.82);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
            }

            .cms-page-content {
                color: #334155;
                font-size: 1.02rem;
                line-height: 1.85;
            }

            .cms-page-content h1,
            .cms-page-content h2,
            .cms-page-content h3 {
                color: #0f172a;
                font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
                font-weight: 900;
                line-height: 1.18;
                margin-bottom: 1rem;
                margin-top: 2rem;
            }

            .cms-page-content h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); }
            .cms-page-content h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
            .cms-page-content h3 { font-size: 1.5rem; }
            .cms-page-content p,
            .cms-page-content ul,
            .cms-page-content ol,
            .cms-page-content blockquote { margin-bottom: 1.25rem; }
            .cms-page-content ul,
            .cms-page-content ol { padding-left: 1.5rem; }
            .cms-page-content ul { list-style: disc; }
            .cms-page-content ol { list-style: decimal; }
            .cms-page-content a { color: var(--primary); font-weight: 800; text-decoration: underline; }
            .cms-page-content img { border-radius: 0.5rem; width: 100%; }

            {{ $page->custom_css }}
        </style>
    </head>
    <body class="bg-slate-50 font-body text-slate-950 antialiased">
        @php
            $websiteSettings = app(\App\Services\WebsiteSettings::class)->settings();
            $ctaUrl = $websiteSettings['header_cta_url'] ?: route('register');
            $ctaLabel = $websiteSettings['header_cta_label'] ?: 'Get Started';
        @endphp

        <nav class="glass-nav fixed top-0 z-50 w-full border-b border-line">
            @include('partials.website-announcement')
            <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6">
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    @include('partials.website-brand', [
                        'class' => 'font-headline text-2xl font-extrabold text-slate-950',
                        'imageClass' => 'h-8 max-w-36 object-contain',
                    ])
                </a>

                <div class="hidden items-center gap-8 lg:flex">
                    <a href="{{ route('pages.public', 'about') }}" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">About</a>
                    <a href="{{ route('home') }}#features" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">Features</a>
                    <a href="{{ route('home') }}#monetization" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">Monetization</a>
                    <a href="{{ route('home') }}#pricing" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">Pricing</a>
                    <a href="{{ route('home') }}#faq" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">FAQ</a>
                    <a href="{{ route('blog.index') }}" class="text-sm font-bold text-slate-700 transition-colors hover:text-primary">Blog</a>
                </div>

                <div class="flex items-center gap-3">
                    @auth
                        <a href="{{ route('dashboard') }}" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-extrabold text-white shadow-lg shadow-indigo-500/20 transition-all hover:bg-primary-dark active:scale-95">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="hidden px-3 py-2 text-sm font-bold text-slate-700 transition-colors hover:text-primary sm:inline-flex">Login</a>
                        <a href="{{ $ctaUrl }}" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-extrabold text-white shadow-lg shadow-indigo-500/20 transition-all hover:bg-primary-dark active:scale-95">{{ $ctaLabel }}</a>
                    @endauth
                </div>
            </div>
        </nav>

        <main class="px-4 pb-24 pt-36 sm:px-6">
            <article class="cms-page-content mx-auto max-w-7xl">
                {!! $page->content !!}
            </article>
        </main>

        @if ($page->custom_js)
            <script>
                {!! $page->custom_js !!}
            </script>
        @endif
        @include('partials.website-footer')
        @include('partials.website-body-scripts')
    </body>
</html>
