<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Our Members</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($heroImage))
<section class="relative bg-cover bg-center h-[400px] flex items-center justify-center"
         style="background-image: url('{{ $heroImage }}');">
    <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 Members
    </h1>
</section>
@endif

<!-- Members Page Section -->
<section class="relative py-16 px-6 lg:px-12 overflow-hidden max-w-7xl 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 mb-12">
        <h2 class="text-4xl lg:text-5xl font-extrabold text-gray-800 mb-6 tracking-tight">
            Meet Our Team
        </h2>
        <div class="w-24 h-1 bg-red-700 rounded-full mb-8"></div>
        <p class="text-gray-700 text-lg lg:text-xl max-w-3xl">
            Dedicated individuals serving with faith, integrity, and commitment.
        </p>
    </div>

    <!-- Members Grid -->
    @if($members->isNotEmpty())
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
        @foreach($members as $member)
        <div class="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-xl transition duration-300">
            <img src="{{ asset($member->image_url) }}"
     alt="{{ $member->name }}"
     class="w-32 h-32 mx-auto rounded-full object-cover mb-4">


            <h3 class="text-xl font-bold text-gray-800">
                {{ $member->name }}
            </h3>

            <p class="text-red-700 font-medium mb-3">
                {{ $member->role }}
            </p>

            @if(!empty($member->bio))
            <p class="text-gray-600 text-sm leading-relaxed">
                {{ $member->bio }}
            </p>
            @endif
        </div>
        @endforeach
    </div>
    @else
        <p class="text-gray-600 text-lg">No members available at the moment.</p>
    @endif

</section>

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

</body>
</html>
