@extends('layouts.app')

@section('title', $title . ' | Kevron Suites and Apartments')

@section('content')
<section class="section-soft-blue py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumbs -->
        <nav class="flex mb-6 text-xs font-semibold text-slate-400" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-2">
                <li class="inline-flex items-center">
                    <a href="{{ url('/') }}" class="hover:text-blue-900 dark:hover:text-cyan-400">Home</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                        <span class="text-slate-500">Policies</span>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <svg class="w-3 h-3 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                        <span class="text-slate-600 font-bold capitalize">{{ str_replace('-', ' ', $slug) }}</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="bg-white dark:bg-slate-900 rounded border border-slate-200 dark:border-slate-800 p-8 shadow-sm">
            <h1 class="mb-6 font-serif text-slate-900 dark:text-white pb-3 border-b border-slate-100 dark:border-slate-800">
                {{ $title }}
            </h1>
            
            <div class="prose prose-slate dark:prose-invert max-w-none text-xs sm:text-sm text-slate-600 dark:text-slate-400 space-y-4 leading-relaxed font-medium">
                {!! nl2br(e($content)) !!}
            </div>

            <div class="mt-10 pt-6 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-xs text-slate-400">
                <span>Last Updated: May 2026</span>
                <a href="{{ url('/contact') }}" class="text-blue-900 dark:text-cyan-400 font-bold hover:underline">Have questions? Contact Us</a>
            </div>
        </div>
    </div>
</section>
@endsection