@extends('layouts.master')

@section('title', $page->meta_title ?? $page->title)

@section('content')
<div class="tw-bg-gray-50 tw-py-12">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card border-0 shadow-sm tw-rounded-xl tw-overflow-hidden">
                    <div class="card-body tw-p-8 lg:tw-p-12">
                        <h1 class="tw-text-3xl lg:tw-text-4xl tw-font-bold tw-text-gray-900 tw-mb-8 tw-border-b tw-pb-4">
                            {{ $page->title }}
                        </h1>
                        
                        <div class="tw-prose tw-prose-lg tw-max-w-none tw-text-gray-700">
                            {!! $page->content !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Basic Typography for Dynamic Content */
    .tw-prose h2 { font-size: 1.5rem; font-weight: bold; margin-top: 2rem; margin-bottom: 1rem; }
    .tw-prose h3 { font-size: 1.25rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.75rem; }
    .tw-prose p { margin-bottom: 1rem; line-height: 1.7; }
    .tw-prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
    .tw-prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
    .tw-prose a { color: #0d6efd; text-decoration: underline; }
</style>
@endpush