<x-layouts.public>
    <div class="py-8">
        <h1 class="mb-6 text-3xl font-bold text-navy dark:text-gold">{{ $page->getTitle() }}</h1>
        <div class="prose max-w-none rounded-lg bg-white p-8 shadow-md dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
            @if ($page->getContent())
                {!! clean($page->getContent()) !!}
            @else
                <p class="text-charcoal dark:text-zinc-400">{{ __('pages.content_coming_soon') }}</p>
            @endif
        </div>
        <p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">
            {{ __('pages.last_updated') }}: {{ $page->updated_at->format('M d, Y') }}
        </p>
    </div>
</x-layouts.public>
