@section('meta_title', 'About | Prime Hospital')
@section('meta_description', 'This is a dynamically generated meta description for SEO.')
@section('meta_keywords', 'Laravel, SEO, Dynamic Meta Tags')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

@php
    $images = \App\Models\About::get();
@endphp

<section class="py-10 ">
    <div class="container flex flex-col max-w-screen-lg p-5 px-4 mx-auto space-x-4 sm:flex-row">
        {{-- left part --}}
        <div
            class="w-full sm:w-1/2 flex-col justify-center sm:justify-start items-start relative h-[400px] sm:h-[600px] flex">

            <div class="container relative w-full h-full swiper mySwiper">
                <div class="swiper-wrapper">
                    @if ($images->count() > 0)
                        @foreach ($images as $image)
                            <div class="flex items-center justify-center swiper-slide">
                                <img src="{{ asset($image->image) }}" alt="about image"
                                    class="object-fill w-full h-full p-2">
                            </div>
                        @endforeach
                    @else
                        <div class="flex items-center justify-center swiper-slide">
                            <img src="{{ asset('assets/about/about1.png') }}" alt="about us img1"
                                class="object-fill w-full h-full p-2">
                        </div>
                        <div class="flex items-center justify-center swiper-slide">
                            <img src="{{ asset('assets/about/about2.png') }}" alt="about us img2"
                                class="object-fill w-full h-full p-2">
                        </div>
                    @endif
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

            <div class="hidden lg:-bottom-12 lg:z-10 lg:absolute lg:right-0 lg:block">
                <img src="{{ asset('assets/about/circle.png') }}" />
            </div>

        </div>

        {{-- right part --}}
        <div class="flex-1">
            <span class="text-sm text-blue-600 inter-font" data-aos="fade-up" data-aos-duration="1200">About Us</span>
            <h1 class="mb-4 text-2xl font-semibold sm:text-4xl inter-font" data-aos="fade-up" data-aos-duration="1300">
                Prime Hospital and Medical Center - Pasig Inc.</h1>
            <h2 class="mb-2 text-sm font-bold tracking-widest text-blue-600 inter-font" data-aos="fade-up"
                data-aos-duration="1200" data-aos-delay="50">VISION</h2>
            <p class="mb-4" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">A leading modern tertiary
                hospital and valued partner in the community for excellence in patient-centered healthcare by 2030.</p>
            <h2 class="mb-2 text-sm font-bold tracking-widest text-blue-600 inter-font" data-aos="fade-up"
                data-aos-duration="1200" data-aos-delay="250">MISSION</h2>
            <p class="mb-4" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="300">To provide high quality
                healthcare through compassionate, patient-centered, cost-effective, and accessible state-of-the-art
                facilities and services.</p>
            <h2 class="mb-2 text-sm font-bold tracking-widest text-blue-600 inter-font" data-aos="fade-up"
                data-aos-duration="1200" data-aos-delay="350">CORE VALUES</h2>

            <div class="flex flex-col justify-between w-full sm:flex-row">
                <div class="flex flex-col space-y-2">
                    <div class="flex space-x-2" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="400">
                        <span class="flex-1 font-bold">Proactive:</span>
                        <span class="flex-1 ">Dynamic, exhibits initiative</span>
                    </div>
                    <div class="flex space-x-2" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="500">
                        <span class="flex-1 font-bold">Relevant:</span>
                        <span class="flex-1">Being an important pillar in the community; providing up-to-date care to
                            patients</span>
                    </div>
                    <div class="flex space-x-2" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="600">
                        <span class="flex-1 font-bold">Innovation:</span>
                        <span class="flex-1 ">The ability to create new and original ideas based on the needs of the
                            community</span>
                    </div>
                    <div class="flex space-x-2" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="500">
                        <span class="flex-1 font-bold">Modern:</span>
                        <span class="flex-1">Providing the latest and best care available relevant to the needs of each
                            patient</span>
                    </div>
                    <div class="flex space-x-2" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="500">
                        <span class="flex-1 font-bold">Exemplary:</span>
                        <span class="flex-1">Exhibiting the best of its kind</span>
                    </div>
                </div>
            </div>

            @if (!Request::routeIs('companyProfile'))
                <a href="{{ route('companyProfile') }}"
                    class="flex items-center gap-2 px-6 py-3 mt-10 text-white transition-all duration-300 bg-blue-600 rounded-full w-fit group hover:bg-blue-700 hover:px-6">
                    More About Us
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round"
                        class="transition-all duration-300 group-hover:mr-2 group-hover:ml-2 group-hover:scale-125">
                        <path d="M5 12h14M12 5l7 7-7 7" />
                    </svg>
                </a>
            @endif
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.mySwiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,

            // If you need pagination
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // If you need navigation buttons
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // Autoplay the slides
            autoplay: {
                delay: 3000, // 3 seconds
                disableOnInteraction: false,
            },
        });
    });
</script>