@extends('layouts.public')

@section('title', $page['title'] . ' | ' . $siteSettings['name'])

@section('content')
<div class="py-16 bg-[#FAF8F3] min-h-[70vh] flex items-center">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        <!-- Floating Glassmorphic Styled Card -->
        <div class="bg-white rounded-3xl p-8 sm:p-16 shadow-xl border border-slate-100/80 space-y-8 relative overflow-hidden">
            <!-- Top elegant gold indicator line -->
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-primary to-accent" style="background-image: linear-gradient(to right, var(--primary), var(--accent));"></div>
            
            <!-- Page Header -->
            <div class="space-y-3">
                <a href="{{ route('home') }}" class="inline-flex items-center text-xs font-semibold text-accent uppercase tracking-wider hover:opacity-80 transition-opacity" style="color: var(--accent);">
                    &larr; Back to Home
                </a>
                <h1 class="font-display font-black text-3xl sm:text-5xl text-slate-800 tracking-tight leading-tight pt-2">
                    {{ $page['title'] }}
                </h1>
                <div class="w-16 h-1 bg-accent rounded" style="background-color: var(--accent);"></div>
            </div>

            <!-- Page Body Content -->
            <div class="prose prose-slate max-w-none text-slate-600 leading-relaxed font-light text-base space-y-6">
                @foreach(explode("\n\n", $page['content']) as $paragraph)
                    @if(preg_match('/^\d+\.\s+/', $paragraph))
                        <!-- Numbered list format -->
                        <div class="pl-4 space-y-2">
                            @foreach(explode("\n", $paragraph) as $line)
                                <p class="font-light">{!! nl2br(e($line)) !!}</p>
                            @endforeach
                        </div>
                    @else
                        <p class="font-light">{!! nl2br(e($paragraph)) !!}</p>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection