@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')


<section class="py-10">
    <div class="container max-w-screen-lg mx-auto px-4 flex flex-col 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">
          <h1 class="text-2xl sm:text-4xl block sm:hidden font-semibold mb-4 inter-font text-center w-full ">24/7 Emergency Care</h1>
          <img src="{{ asset('assets/about/about1.png') }}" alt="about us img1" class=" object-contain size-96 p-2"
          data-aos="zoom-in"
          data-aos-duration="1200"

          >
          <img src="{{ asset('assets/about/about2.png') }}" alt="about us img1" class="hidden sm:block object-contain size-96 absolute bottom-0 right-0  p-2"
            data-aos="fade-up"
          data-aos-duration="1200"
          >
          <img src="{{ asset('assets/about/circle.png') }}" alt="about us img1" class="scale-50 hidden sm:block sm:scale-75 md:scale-100 object-contain size-44 absolute bottom-[38%] right-[10%] mt-20 p-2"
            data-aos="zoom-in"
          data-aos-duration="1200"
          >
        </div>
        
        {{-- right part --}}
        <div class="flex-1">
            <span class="text-blue-600 text-sm inter-font"
              data-aos="fade-up"
              data-aos-duration="1200"
            >About Us</span>
            <h1 class="text-2xl sm:text-4xl font-semibold mb-4 inter-font"
             data-aos="fade-up"
              data-aos-duration="1300"
            >Prime Hospital and Medical Center - Pasig Inc.</h1>
            <h2 class="text-sm tracking-widest text-blue-600 font-bold mb-2 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="text-sm tracking-widest text-blue-600 font-bold mb-2 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="text-sm tracking-widest text-blue-600 font-bold mb-2 inter-font"
            data-aos="fade-up"
            data-aos-duration="1200"
                data-aos-delay="350"
            >CORE VALUES</h2>

            <div class="flex flex-col sm:flex-row justify-between w-full">
                <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="font-bold flex-1">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="font-bold flex-1">Relevant:</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="600">
                        <span class="font-bold flex-1">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="font-bold flex-1">Modern:</span>
                        <span class="flex-1">Exhibiting the best of its kind</span>
                    </div>
                    <div class="flex space-x-2"
                    data-aos="fade-up"
                    data-aos-duration="1200"
                    data-aos-delay="500">
                        <span class="font-bold flex-1">Exemplary:</span>
                        <span class="flex-1">Being an important pillar in the community; providing up-to-date care to patients</span>
                    </div>
                </div>
            </div>

            @if(!Request::routeIs('companyProfile'))
    <a href="{{ route('companyProfile') }}" class="bg-blue-600 mt-10 w-fit text-white px-6 group py-3 rounded-full hover:bg-blue-700 flex items-center gap-2 hover:px-6 transition-all duration-300">
        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="group-hover:mr-2 group-hover:ml-2 transition-all duration-300 group-hover:scale-125">
            <path d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
    </a>
@endif

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