@extends('layouts.public') {{-- Usa o layout público --}}

{{-- Passa o título dinâmico para o layout --}}
{{-- A variável $title foi definida no PageController --}}
@section('title', $title ?? $page->title) {{-- Usa $title se existir, senão o título da página --}}

@section('content')
{{-- Container principal --}}
<div class="bg-white dark:bg-gray-800 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> {{-- Container mais estreito para leitura --}}

        {{-- Título da Página --}}
        <h1
            class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 border-b pb-4 border-gray-200 dark:border-gray-700">
            {{ $page->title }}
        </h1>

        {{-- Conteúdo da Página (Renderiza HTML) --}}
        {{-- A classe 'prose' do Tailwind ajuda a estilizar o HTML gerado pelo WYSIWYG --}}
        {{-- dark:prose-invert adapta para o modo escuro --}}
        {{-- max-w-none remove a largura máxima padrão do prose --}}
        <div class="prose prose-lg dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
            {!! $page->content !!} {{-- ESSENCIAL: Usa {!! !!} para renderizar o HTML do editor --}}
            {{-- CUIDADO: Use apenas se confiar que o HTML é seguro (foi inserido pelo admin) --}}
        </div>

        {{-- Informações adicionais (opcional) --}}
        <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400">
            Última atualização: {{ $page->updated_at->format('d/m/Y') }}
        </div>

    </div>
</div>
@endsection
{{-- Adicione @push('scripts') aqui se esta página precisar de JS específico --}}