@extends('frontend.layout.navbar')
@section('title', 'Our Works')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/banner-ourworks.png') }}" 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-[3rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-36 p-4 bg-black bg-opacity-60 flex items-center justify-start border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="mb-3 text-3xl font-bold tracking-wider text-white lg:text-5xl">Our Works</p>
                        <p class="text-xs text-white">Home > Our Works </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-16 text-center" data-aos="fade-right">
            <img src="{{ asset('img/section-ourworks.png') }}">
            <p class="text-3xl font-bold tracking-wider lg:text-4xl">Empowering Lives, Building Futures</p>
        </div>
        <div class ="flex flex-col justify-center gap-2 p-5 mt-16 md:gap-44 md:flex-row" data-aos="fade-right">
            <div class="">
                <p class="flex items-center gap-5 mb-10">
                    <img src="{{ asset('img/bullet-icon.webp') }}" class="w-16 mr-2">
                    <span class="text-xl font-bold">Koop Damayan Program</span>
                </p>
                <p class="flex items-center gap-5 mb-10">
                    <img src="{{ asset('img/bullet-icon.webp') }}" class="w-16 mr-2 ">
                    <span class="text-xl font-bold">Tulay sa Kinabukasan</span>
                </p>
                <p class="flex items-center gap-5 mb-10">
                    <img src="{{ asset('img/bullet-icon.webp') }}" class="w-16 mr-2 ">
                    <span class="text-xl font-bold">Kaakbay sa Kalusugan</span>
                </p>
            </div>
            <div class="">
                <p class="flex items-center gap-5 mb-10">
                    <img src="{{ asset('img/bullet-icon.webp') }}" class="w-16 mr-2 ">
                    <span class="text-xl font-bold">Koopreneur Program </span>
                </p>
                <p class="flex items-center gap-5 mb-10">
                    <img src="{{ asset('img/bullet-icon.webp') }}" class="w-16 mr-2 ">
                    <span class="text-xl font-bold">Kaagapay Program</span>
                </p>
                <div class="flex flex-col items-center ">
                    <a href="{{ url('coreprograms') }}"
                        class="flex  items-center justify-center gap-5 mb-10 bg-[#fbae42] h-[4rem] rounded-xl w-[15rem] md:w-[23rem]">
                        Learn More
                    </a>

                </div>
            </div>




        </div>
        <hr class="border-2 border-gray-300">
        <div class="p-5" overflow-hidden>
            <div class="mt-5 " data-aos="fade-left">
                <p class="text-3xl text-[#96c130] font-bold  ">Our Program are focused on three key areas:</p>
                <p class="mt-5 text-sm leading-6"> </p>
            </div>
            <div class="grid grid-cols-1 gap-10 mt-16 lg:grid-cols-3 " data-aos="fade-left">
                <div class="flex flex-col items-center justify-center"><img src="{{ asset('img/img-education.png') }}"
                        class="md:w-[25rem]">
                    <p class="mt-10 text-[#4873a9] font-bold">Education</p>
                </div>
                <div class="flex flex-col items-center justify-center"><img src="{{ asset('img/img-health.png') }}"
                        class="md:w-[25rem]">
                    <p class="mt-10 text-[#4873a9] font-bold">Health and Wellness</p>
                </div>

                <div class="flex flex-col items-center justify-center"><img src="{{ asset('img/img-livelihood.png') }}"
                        class="md:w-[25rem]">
                    <p class="mt-10 text-[#4873a9] font-bold">Livelihood Creation</p>
                </div>

            </div>
        </div>
        <div clas="p-5 " data-aos="fade-down">
            <div class="mt-20 text-center">
                <p class="text-4xl font-bold tracking-wider"> AFI Official Video</p>
                <p class="mt-5 leading-6"></p>
            </div>

            <div class="flex justify-center p-5">
                <!-- Replace 'exampleVideoID' with your actual YouTube video ID -->
                <iframe class="w-full h-auto lg:h-[50rem]" src="https://www.youtube.com/embed/EGMJNzWqb_A"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>

            </div>
        </div>
    </div>

@endsection