<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ $content->title ?? 'Our Ministries' }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

{{-- Include Navbar --}}
@include('partials.navbar')

<!-- Minimalist Hero Section -->
@if(isset($content->image_url))
<section class="relative bg-cover bg-center h-[400px] flex items-center justify-center" 
         style="background-image: url('{{ $content->image_url }}');">
    <div class="absolute inset-0 bg-black bg-opacity-40"></div>
    <h1 class="relative text-4xl md:text-5xl lg:text-6xl font-extrabold text-white text-center">
        Our Ministries
    </h1>
</section>
@endif

<!-- Ministries Page Section -->
<section class="relative py-16 px-6 lg:px-12 overflow-hidden max-w-4xl mx-auto">
    <!-- Decorative background elements -->
    <div class="absolute top-0 left-0 w-48 h-48 bg-red-100 rounded-full opacity-20 -translate-x-1/2 -translate-y-1/2"></div>
    <div class="absolute bottom-0 right-0 w-48 h-48 bg-blue-100 rounded-full opacity-15 translate-x-1/3 translate-y-1/3"></div>

    <div class="relative text-left">
        <!-- Section Title -->
        <h2 class="text-4xl lg:text-5xl font-extrabold text-gray-800 mb-6 tracking-tight">
            {{ $content->title ?? 'Our Ministries' }}
        </h2>

        <!-- Decorative Divider -->
        <div class="w-24 h-1 bg-red-700 rounded-full mb-8"></div>

        <!-- Section Content -->
        <div class="text-gray-700 text-lg lg:text-xl leading-relaxed">
            {!! nl2br(e($content->content)) !!}
        </div>

        <!-- Optional Call-to-Action -->
        @if(!empty($content->cta_text) && !empty($content->cta_link))
        <div class="mt-10">
            <a href="{{ $content->cta_link }}" class="inline-block bg-red-700 text-white font-semibold px-6 py-3 rounded-full shadow-lg hover:bg-red-800 transition duration-300">
                {{ $content->cta_text }}
            </a>
        </div>
        @endif
    </div>
</section>

{{-- Include Footer --}}
@include('partials.footer')

</body>
</html>
