@extends('frontend.layout.navbar')
@section('title', 'AFI Team')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/banner.webp') }}" class="absolute inset-0 object-cover w-full h-full">
        <div class="container relative inset-0 z-0 flex items-center mx-auto pt-[25rem] pb-[5rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-44 p-4 bg-black bg-opacity-60 flex items-center justify-center border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="text-3xl font-bold text-white">About Us,</p>
                        <p class="text-sm text-white">Home > About Us / Board of Trustees</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl mx-auto">
        <div class="flex flex-col items-center justify-center mt-10" data-aos="fade-up">
            <img src="{{ asset('img/section-bot.webp') }}">
            <p class="text-xl font-semibold lg:text-5xl">AFI Team</p>
        </div>
        <div class="grid grid-cols-1 gap-10 my-10 lg:grid-cols-3">
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/new/Ms. Juvy Joy Bitayo.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalbitayo(true)">

                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Juvy Joy Bitayo</p>
                        <p>Senior Program Officer</p>
                    </div>

            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/new/Ms. Mary Joy Sanchez.webp') }}" class="object-scale-down ">
                <button onclick="toggleModaljoy(true)">

                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Mary Joy Sanchez</p>
                        <p>Admin and Compliance Officer</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <div class="relative">
                <img src="{{ asset('img/new/Frame.webp') }}" alt="Program Manager Background" class=" absolute inset-0 w-full h-full ">
                   <div class=" w-full relative flex items-center justify-center py-[12.5rem] px-[5rem]">
                     <p class="font-bold text-center text-gray-200 text-xl">Program Manager</p>
                   </div>
                </div>

                <button onclick="toggleModalTungol(true)">

                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold"></p>
                        <p>Program Manager</p>
                    </div>
                </button>
            </div>
            

        </div>
        <div class="py-20">
            <img src="{{asset('img/new/AFI Team 1.webp')}}">
        </div>


    </div>
    @include('frontend.pages.modal')
@endsection