@extends('theme::layouts.app', ['title' => $page->title])

@section('content')
    <div class="max-w-3xl mx-auto px-6 py-12 lg:py-20">
        {{-- Breadcrumb --}}
        <nav class="flex items-center gap-2 text-xs font-medium text-text-muted mb-8 overflow-x-auto whitespace-nowrap">
            <a class="hover:text-primary transition-colors" href="{{ url('/') }}">@lang('general.Home')</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-gray-200">{{ $page->title }}</span>
        </nav>

        {{-- Header --}}
        <header class="mb-8 border-b border-gray-100 dark:border-gray-800 pb-8">
            <h1 class="text-4xl md:text-5xl font-bold text-text-main dark:text-white tracking-tight mb-4">
                {{ $page->title }}
            </h1>
            <div class="flex items-center gap-4 mt-2">
                <span class="text-sm text-text-muted">@lang('general.Last updated'): {{ $page->updated_at ? $page->updated_at->format('F d, Y') : now()->format('F d, Y') }}</span>
            </div>
        </header>

        {{-- Content --}}
        <article class="prose max-w-none dark:prose-invert text-text-main dark:text-gray-300">
            {!! $page->content !!}
        </article>
    </div>
@endsection