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

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

<!-- Hero Section -->
@if(isset($content['hero_section']))
<section class="relative bg-cover bg-center bg-no-repeat h-[500px] flex items-center" style="background-image: url('{{ $content['hero_section']->image_url }}');">
    <div class="max-w-7xl mx-auto px-6 text-center text-white bg-black bg-opacity-40 py-12 rounded">
        <h2 class="text-4xl md:text-5xl font-bold mb-4">{{ $content['hero_section']->title }}</h2>
        <p class="mb-6 text-lg md:text-xl">{{ $content['hero_section']->content }}</p>
        <a href="#about" class="inline-block bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800">Read More</a>
    </div>
</section>
@endif

<!-- Main Content Section: Cards + About + Members Sidebar -->
<section class="mx-auto px-6 py-12 flex flex-col lg:flex-row gap-8" style="width:1700px;">

    <!-- Left Column: Cards + About -->
    <div class="flex-1 flex flex-col gap-6">
        <!-- Mission / Vision / Ministries Cards Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Mission Card -->
@if(isset($content['mission_section']))
<div class="relative bg-gradient-to-tr from-white to-gray-50 rounded-xl shadow-lg overflow-hidden flex flex-col justify-between p-6">

    <div class="relative z-10">
        <h3 class="text-2xl font-bold mb-3">
            {{ $content['mission_section']->title }}
        </h3>

        <p class="text-gray-700 mb-6" style="margin-bottom:50px; padding-right:35px;">
            {{ $content['mission_section']->content }}
        </p>
    </div>

    <a href="/ministries"
       class="absolute bottom-4 left-4 bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition duration-300 z-10">
        Read More
    </a>

    @if(!empty($content['mission_section']->image_url))
        <img 
            src="{{ url($content['mission_section']->image_url) }}" {{-- absolute URL --}}
            alt="{{ $content['mission_section']->title }}"
            class="absolute bottom-0 right-0 w-32 h-32 object-contain opacity-20 z-0"
            onerror="this.style.display='none'"
        >
    @endif

</div>
@endif



            <!-- Vision Card -->
            @if(isset($content['vision_section']))
            <div class="relative bg-gradient-to-tr from-white to-gray-50 rounded-xl shadow-lg overflow-hidden flex flex-col justify-between p-6">
                <div class="relative z-10">
                    <h3 class="text-2xl font-bold mb-3">{{ $content['vision_section']->title }}</h3>
                    <p class="text-gray-700 mb-6" style="margin-bottom:50px; padding-right:35px;">{{ $content['vision_section']->content }}</p>
                </div>
                <a href="/about" class="absolute bottom-4 left-4 bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition duration-300 z-10">
                    Read More
                </a>
                @if($content['vision_section']->image_url)
                <img src="{{ $content['vision_section']->image_url }}" alt="{{ $content['vision_section']->title }}" 
                     class="absolute bottom-0 right-0 w-32 h-32 object-contain opacity-20 z-0">
                @endif
            </div>
            @endif

            <!-- Ministries Card -->
            @if(isset($content['ministries_section']))
            <div class="relative bg-gradient-to-tr from-white to-gray-50 rounded-xl shadow-lg overflow-hidden flex flex-col justify-between p-6">
                <div class="relative z-10">
                    <h3 class="text-2xl font-bold mb-3">{{ $content['ministries_section']->title }}</h3>
                    <p class="text-gray-700 mb-6" style="margin-bottom:50px; padding-right:35px;">{{ $content['ministries_section']->content }}</p>
                </div>
                <a href="/plans" class="absolute bottom-4 left-4 bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition duration-300 z-10">
                    Read More
                </a>
                @if($content['ministries_section']->image_url)
                <img src="{{ $content['ministries_section']->image_url }}" alt="{{ $content['ministries_section']->title }}" 
                     class="absolute bottom-0 right-0 w-32 h-32 object-contain opacity-20 z-0">
                @endif
            </div>
            @endif
        </div>

        <!-- About Section -->
        @if(isset($content['about_section']))
        <section id="about" class="relative bg-gray-50 py-12 px-6 lg:px-12 overflow-hidden">
            <!-- 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 max-w-4xl mx-auto text-left" style="margin-lft:-45px;">
                <!-- Section Title -->
                <h3 class="text-3xl lg:text-4xl font-extrabold text-gray-800 mb-4 tracking-tight">
                    {{ $content['about_section']->title }}
                </h3>

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

                <!-- Section Content -->
                <p class="text-gray-700 text-lg lg:text-xl leading-relaxed">
                    {{ $content['about_section']->content }}
                </p>

                <!-- Optional Call-to-Action Button -->
                <div class="mt-8">
                    <a href="#contact" 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">
                        Contact Us
                    </a>
                </div>
            </div>
        </section>
        @endif


    </div>

<!-- RIGHT SIDEBAR -->
@if($members->isNotEmpty())
<aside class="w-[450px] flex flex-col gap-6">

    <!-- TEAM CARD -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition">

        <!-- Header -->
        <div class="px-6 pt-6 pb-4 border-b">
            <h3 class="text-xl font-extrabold text-gray-800">
                Our Team
            </h3>
            <div class="w-12 h-1 bg-red-700 rounded-full mt-3"></div>
        </div>

        <!-- Members -->
        <div class="p-6 flex flex-col gap-4">
            @foreach($members->take(4) as $member)
            <div
                class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-transparent hover:border-red-200 hover:bg-white transition">

                <img src="{{ asset($member->image_url) }}"
                     class="w-14 h-14 rounded-full object-cover ring-2 ring-white shadow">

                <div>
                    <h4 class="font-semibold text-gray-800 leading-tight">
                        {{ $member->name }}
                    </h4>
                    <p class="text-sm text-gray-600">
                        {{ $member->role }}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- POLICIES CARD -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition">

        <!-- Header -->
        <div class="px-6 pt-6 pb-4 border-b">
            <h3 class="text-xl font-extrabold text-gray-800">
                Policies & Governance
            </h3>
            <div class="w-12 h-1 bg-red-700 rounded-full mt-3"></div>
        </div>

        <!-- Content -->
        <div class="p-6">
            <p class="text-sm text-gray-600 mb-6 leading-relaxed">
                Our policies reflect our commitment to safety, integrity, and responsible leadership.
            </p>

            <div class="flex flex-col gap-3">
                <a href="/whistleblowing-policy"
                   class="group flex items-center justify-between p-4 rounded-xl bg-gray-50 border border-gray-200 hover:border-red-600 hover:bg-white transition">
                    <span class="font-medium text-gray-800 group-hover:text-red-700">
                        Whistleblowing Policy
                    </span>
                    <span class="text-gray-400 group-hover:text-red-700 transition">
                        →
                    </span>
                </a>

                <a href="/safeguarding-policy"
                   class="group flex items-center justify-between p-4 rounded-xl bg-gray-50 border border-gray-200 hover:border-red-600 hover:bg-white transition">
                    <span class="font-medium text-gray-800 group-hover:text-red-700">
                        Safeguarding Policy
                    </span>
                    <span class="text-gray-400 group-hover:text-red-700 transition">
                        →
                    </span>
                </a>
            </div>
        </div>
    </div>

</aside>
@endif



</section>

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

</body>
</html>
