@extends('frontend.layout.navbar')
@section('title', 'Contact Us')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/contact/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-[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">Contact Us</p>
                        <p class="text-xs text-white">Home > Contact Us</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl mx-auto">
        <div class="flex flex-col items-center justify-center p-5 " data-aos="fade-up">
            <img src="{{ asset('img/section-bubble-1.webp') }}">
            <p class="text-xl ">"There are many ways you can support Asiapro Foundation"</p>
            </dicv>

        </div>
        <div class="grid grid-cols-1 p-5 mt-20 lg:grid-cols-2 " data-aos="fade-right">
            <div>
                <p class="text-xl text-[#86c102] font-semibold">We are looking for volunteers in the <br> following fields:
                </p>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">

                    <p class="font-bold">Health Services</p>
                </div>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">

                    <p class="font-bold">Financial Literacy</p>
                </div>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">

                    <p class="font-bold">Enterprise Development</p>
                </div>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">
                    <p class="font-bold">Marketing and Communication / Social Media influencers</p>
                </div>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">

                    <p class="font-bold">Community Organizing</p>
                    </p>
                </div>
                <div class="flex items-center gap-4 p-5">
                    <img src="{{ asset('img/icon-yellow.png') }}" class="h-[3rem] w-[3rem] md:h-auto mdw-auto">

                    <p class="font-bold">Resource Mobilization</p>
                    </p>
                </div>

            </div>
            <div>
                <img src="{{ asset('img/contact/img-feat.webp') }}">
            </div>
        </div>
        <div class="relative w-full h-full mb-10 overflow-hidden">
            <div data-aos="fade-left">
                <img src="{{ asset('img/contact/bg-contactdetails.webp') }}"
                    class="absolute inset-0 object-cover w-full h-full ">
                <div class="relative grid p-5 mt-20 grid-cls-1 lg:grid-cols-2">
                    <div>
                        <p class="text-xl font-bold">Get In Touch
                        </p>
                        <p class="mt-2"> We're here to help! Whether you have a question, want to get involved, or simply
                            want to share your
                            thoughts, we're happy to hear from you.</p>
                        <p class="mt-10 text-xl font-bold">Contact Information
                        </p>
                        <div class="mt-10 ">

                            <p class="flex items-center gap-5"> <i class='text-2xl bx bx-location-plus'></i> <span
                                    class="font-bold">
                                    Main Office</span></p>
                            <p class="md:ml-10">1st Workers Center, No.70 San Rafael St. Brgy. Kapitolyo, Pasig City, Metro
                                Manila
                                Philippines</p>
                            <p class="flex items-center gap-5 mt-4"> <i class='text-2xl bx bxs-envelope'></i></i> <span
                                    class="font-bold">
                                    Email Us</span></p>
                            <p class="md:ml-10">asiaprofoundation.info@gmail.com</p>
                            <p class="flex items-center gap-5 mt-4"> <i class='text-2xl bx bx-phone-call'></i> <span
                                    class="font-bold">
                                    Give us a call</span></p>
                            <p class="md:ml-10">0998-5910611</p>
                            <p class="mt-20 text-xl text-[#80bb02] font-semibold"> We Look forward to hearing from you!</p>
                        </div>



                    </div>
                    <div class="flex items-center justify-center">
                        <img src="{{ asset('img/contact/logo.webp') }}" class="">
                    </div>
                </div>
            </div>
        </div>
        <iframe class="w-full h-[30rem]  mb-10"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.434289229848!2d121.05830682590414!3d14.574312027718149!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c86beff7c831%3A0x8b65c2b5f8712ffa!2sAsiapro%20Cooperative!5e0!3m2!1sen!2sph!4v1731916172134!5m2!1sen!2sph"
            style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
        </iframe>

    </div>
   
    
     <div class="mt-10 bg-[#86c100]">
    <div class="py-10 overflow-hidden relative">
        <!-- Scrollable Container -->
        <div class="flex items-center gap-10 text-5xl font-semibold whitespace-nowrap overflow-x-auto scroll-container">
            <p class="text-[#0d78bc]">COOPERATIVE</p>
            <p class="text-[#0d78bc]">●</p>
            <p class="text-[#b4323b]">COLLABORATIVE</p>
            <p class="text-green-900">●</p>
            <p class="text-[#0d78bc]">CONTRIBUTE</p>
            <p class="text-[#0d78bc]">●</p>
            <p class="text-[#b4323b]">GET INVOLVED</p>
            
            <!-- Repeat content for continuous effect -->
            <p class="text-[#0d78bc]">COOPERATIVE</p>
            <p class="text-[#0d78bc]">●</p>
            <p class="text-[#b4323b]">COLLABORATIVE</p>
            <p class="text-green-900">●</p>
            <p class="text-[#0d78bc]">CONTRIBUTE</p>
            <p class="text-[#0d78bc]">●</p>
            <p class="text-[#b4323b]">GET INVOLVED</p>
        </div>
    </div>
</div>

<!-- Add JavaScript for auto-scrolling and manual swipe functionality -->
<script>
    const scrollContainer = document.querySelector('.scroll-container');
    let isMouseDown = false;
    let startX;
    let scrollLeft;

    // Auto-scroll functionality
    function autoScroll() {
        scrollContainer.scrollLeft += 1;
        if (scrollContainer.scrollLeft >= scrollContainer.scrollWidth - scrollContainer.clientWidth) {
            scrollContainer.scrollLeft = 0; // Reset to the start when the end is reached
        }
    }

    // Start auto-scroll interval
    const autoScrollInterval = setInterval(autoScroll, 20); // Adjust the speed as needed

    // Manual scrolling with mouse drag
    scrollContainer.addEventListener('mousedown', (e) => {
        isMouseDown = true;
        startX = e.pageX - scrollContainer.offsetLeft;
        scrollLeft = scrollContainer.scrollLeft;
        clearInterval(autoScrollInterval); // Stop auto-scroll when manual dragging starts
    });

    scrollContainer.addEventListener('mousemove', (e) => {
        if (!isMouseDown) return;
        e.preventDefault();
        const x = e.pageX - scrollContainer.offsetLeft;
        const walk = x - startX;
        scrollContainer.scrollLeft = scrollLeft - walk;
    });

    scrollContainer.addEventListener('mouseup', () => {
        isMouseDown = false;
        // Restart auto-scroll after mouse release
        setInterval(autoScroll, 20);
    });

    scrollContainer.addEventListener('mouseleave', () => {
        if (isMouseDown) {
            isMouseDown = false;
            setInterval(autoScroll, 20);
        }
    });
</script>


<style>
    /* Hide the scrollbar but allow scrolling */
    .scroll-container {
        scrollbar-width: none; /* For Firefox */
        -ms-overflow-style: none; /* For Internet Explorer 10+ */
    }

    .scroll-container::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }
</style>

    
    
    
    
    
    <div class="relative w-full h-full">
        <img src="{{ asset('img/contact/bg-cta.webp') }}" class="absolute inset-0 object-cover w-full h-[30rem]">
        <div class="relative w-full h-full">

            <div class="flex flex-col items-center justify-center">
                <div class="relative flex flex-col items-center justify-center my-20 ">
                    
                    <img src="{{ asset('img/impact/button-volunteer.png') }}" class="absolute inset-0 w-full h-full">
                    <div class="relative p-6"><a href="{{url('join')}}"
                            class="flex items-center gap-10 text-3xl text-white grace-font"><img
                                src="{{ asset('img/contact/icon.webp') }}" class="w-20">
                            <p>Volunteer</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection