@extends('frontend.layouts.app')

@section('title', $page->meta_title ?: $page->title)
@section('description', $page->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($page->content), 160))
@if($page->featured_image)
    @section('og_image', \App\Services\ImageService::url($page->featured_image, 'large'))
@endif

@section('content')

<article class="bg-white">
    @if($page->featured_image)
    <div class="relative h-[40vh] md:h-[50vh] min-h-[300px]">
        <img src="{{ \App\Services\ImageService::url($page->featured_image, 'large') }}"
             alt="{{ $page->title }}" class="absolute inset-0 w-full h-full object-cover">
        <div class="absolute inset-0 gradient-overlay"></div>
        <div class="absolute inset-x-0 bottom-0 p-6 md:p-12">
            <div class="container mx-auto">
                <h1 class="text-3xl md:text-5xl font-bold text-white">{{ $page->title }}</h1>
            </div>
        </div>
    </div>
    @else
    <div class="container mx-auto px-4 pt-12 pb-6">
        <h1 class="text-3xl md:text-5xl font-bold text-gray-900">{{ $page->title }}</h1>
    </div>
    @endif

    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <div class="prose prose-lg max-w-none prose-headings:font-bold prose-a:text-folgore">
            {!! $page->content !!}
        </div>
    </div>
</article>

@endsection