@extends('layouts.app')

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

@section('content')

    <!-- Page Banner -->
    <section class="py-20 bg-[#f0ebe4] border-b border-gray-200 relative overflow-hidden">
        <div class="container-custom text-center max-w-3xl mx-auto space-y-3">
            <span class="section-subtitle">MAISON ROUGE SOHO</span>
            <h1 class="font-serif text-4xl font-bold text-gray-900">{{ $page->title }}</h1>
        </div>
    </section>

    <!-- Page Body -->
    <section class="py-16 bg-[#f5f0eb] min-h-[60vh]">
        <div class="container-custom max-w-4xl mx-auto">
            
            <div class="p-8 sm:p-12 rounded-3xl bg-white border border-gray-200 shadow-xl space-y-6 text-gray-700 text-sm leading-relaxed">
                @if($page->featured_image)
                    <div class="rounded-2xl overflow-hidden mb-8 border border-gray-200 max-h-96">
                        <img src="{{ $page->featured_image_url }}" alt="{{ $page->title }}" class="w-full h-full object-cover">
                    </div>
                @endif

                <div class="prose max-w-none text-gray-700">
                    {!! $page->content !!}
                </div>
            </div>

        </div>
    </section>

@endsection