@extends('components.layouts.app')

@section('title', $page->getTranslation('meta_title', app()->getLocale()) ?: $page->getTranslation('title',
    app()->getLocale()))

    @push('meta')
        @if ($page->getTranslation('meta_description', app()->getLocale()))
            <meta name="description" content="{{ $page->getTranslation('meta_description', app()->getLocale()) }}">
        @endif
        @if ($page->getTranslation('meta_keywords', app()->getLocale()))
            <meta name="keywords" content="{{ $page->getTranslation('meta_keywords', app()->getLocale()) }}">
        @endif
        <meta property="og:title" content="{{ $page->getTranslation('title', app()->getLocale()) }}">
        <meta property="og:description"
            content="{{ $page->getTranslation('meta_description', app()->getLocale()) ?: Str::limit(strip_tags($page->getTranslation('content', app()->getLocale())), 160) }}">
        <meta property="og:type" content="website">
    @endpush

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-primary to-primary-dark text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-5xl font-bold mb-6">
                {{ $page->getTranslation('title', app()->getLocale()) }}
            </h1>
            @if ($page->getTranslation('excerpt', app()->getLocale()))
                <p class="text-xl mb-8 max-w-2xl mx-auto">
                    {{ $page->getTranslation('excerpt', app()->getLocale()) }}
                </p>
            @endif
        </div>
    </section>

    <!-- Content Section -->
    <section class="bg-white py-12">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="prose rich-content max-w-none">
                <x-page-rich-content :content="$page->getTranslation('content', app()->getLocale())" />
            </div>
        </div>
    </section>

    <!-- Call to Action Section -->
    <section class="bg-gray-50 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">{{ __('Get Started Today') }}</h2>
            <p class="text-gray-600 mb-6">{{ __('Join us and be part of our community') }}</p>
            <a href="{{ route('departments.index') }}"
                class="inline-block bg-primary text-white px-8 py-3 rounded-lg hover:bg-primary-dark transition">
                {{ __('Explore Departments') }}
            </a>
        </div>
    </section>
@endsection