@extends('layouts.frontend')

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

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-br from-indigo-900 to-indigo-700 py-24 text-white text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-grid-white/[0.05] pointer-events-none"></div>
        <div class="max-w-4xl mx-auto px-4 relative">
            <h1 class="text-4xl md:text-6xl font-extrabold mb-6 animate-fade-in-up">
                {{ $page->title }}
            </h1>
            <p class="text-xl text-indigo-100 max-w-2xl mx-auto font-light leading-relaxed">
                {{ $page->meta_description }}
            </p>
        </div>
    </section>

    <!-- Page Content -->
    <article class="max-w-4xl mx-auto px-4 py-20">
        <div class="prose prose-lg max-w-none prose-indigo prose-headings:font-bold prose-a:text-indigo-600 prose-img:rounded-2xl prose-img:shadow-xl">
            {!! $page->content !!}
        </div>
    </article>
@endsection