@extends('front.layouts.master')
@section('content')
    <!-- banner section start -->

    <section id="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="inner-breadcrumb">
                        <h2>About Us</h2>
                        <ul>
                            <li><a href="{{ route('front.home') }}">Home</a></li>
                            <li>
                                <p>About Us</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner section end -->
    <section class="about-hero py-2 py-md-5">
        <div class="container">

            <div class="row align-items-center">

                <div class="aboutus-section-content col-lg-6">

                    <div class="section-title-box ">
                    <span>    {!! $pageContent->title ?? '' !!}</span>
                    </div>
                    <p class="hero-text mb-0">
                        {!! $pageContent->description ?? '' !!}
                    </p>

                   <a  href="{{ route('front.book-appointment') }}" class="btn btn-main fw-semibold mb-4 mb-md-0">
                            {!! $pageContent->about_us_button_title ?? 'Book An Appointment' !!}
                        </a>

                </div>

                <div class="col-lg-6">
                    <img src="{{ !empty($pageContent->image) ? image($pageContent->image, PAGE_PATH) : asset('front/assets/img/about-hero.png') }}"
                        class="img-fluid rounded-4 shadow-sm" alt="">
                </div>

            </div>

        </div>
    </section>
    <section class="our-story py-5">
        <div class="container">

            <div class="row align-items-center g-5">

                <div class="col-lg-5">

                    <div class="story-image-wrapper">

                        <img src="{{ !empty($pageContent->team_story_images) ? image($pageContent->team_story_images, PAGE_PATH) : asset('front/assets/img/doc-team.jpg') }}" class="img-fluid rounded-4 story-image" alt="{{ $pageContent->team_story_title ?? 'Our Story' }}">

                        <div class="experience-box">
                            <h3>{{$pageContent->experience_count ?? '36'}}+</h3>
                            <span>Years of Surgical Excellence</span>
                        </div>

                    </div>

                </div>

                <div class="col-lg-7">

                    <span class="section-tag">
                       {{ $pageContent->team_story_title ?? 'Our Story' }}
                    </span>

                    <h2 class="pb-3">
                        {{ $pageContent->team_story_heading ?? 'Dedicated to Improving Lives Through Quality Healthcare' }}
                    </h2>

                    <p>
                        {{ $pageContent->team_story_description ?? 'We are committed to delivering compassionate, ethical, and patient-focused healthcare through experienced medical professionals and modern treatment approaches. Our goal is to provide every patient with personalized care in a safe and supportive environment.' }}
                    </p>

                    
                    <div class="story-highlight">

                        <i class="fa-solid fa-quote-left"></i>

                        <p>
                            {{ $pageContent->team_story_notes ?? 'Our purpose is not only to treat illnesses but to build lasting relationships based on trust, care, and medical excellence.' }}
                           
                        </p>

                    </div>

                </div>

            </div>

        </div>
    </section>
    <section class="why-trust-us py-5">
    <div class="container">

        <div class="text-center section-heading mx-auto mb-5">
            <span class="section-tag">{{$pageContent->why_choose_about_us_title ?? 'Why Choose Us'}}</span>

            <h2 class="section-title mt-1">
                {{$pageContent->why_choose_about_us_heading ?? 'Why Thousands of Patients Trust Our Care'}}
            </h2>

            <p>
                {{$pageContent->why_choose_about_us_heading_description ?? 'We combine medical expertise, advanced technology, and compassionate care to provide the highest standards of treatment and patient satisfaction.'}}
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-user-doctor"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step1_about_us_title ?? 'Experienced Specialists'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step1_about_us_description ?? 'Highly qualified doctors and specialists delivering expert care across multiple disciplines.'}}
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-laptop-medical"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step2_about_us_title ?? 'Modern Technology'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step2_about_us_description ?? 'Advanced diagnostic and treatment equipment ensuring accurate and efficient healthcare.'}}
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-heart-pulse"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step3_about_us_title ?? 'Patient-Centered Care'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step3_about_us_description ?? 'Personalized treatment plans focused on comfort, safety, and long-term wellbeing.'}}
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-shield-heart"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step4_about_us_title ?? 'Safety & Quality'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step4_about_us_description ?? 'Strict clinical standards and quality protocols maintained at every stage of care.'}}
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-clock"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step5_about_us_title ?? 'Timely Support'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step5_about_us_description ?? 'Prompt consultations, diagnostics, and treatment to help patients recover faster.'}}
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="trust-card">
                    <div class="trust-icon">
                        <i class="fa-solid fa-hand-holding-heart"></i>
                    </div>

                    <h5>{{$pageContent->why_choose_us_step6_about_us_title ?? 'Compassionate Approach'}}</h5>

                    <p>
                        {{$pageContent->why_choose_us_step6_about_us_description ?? 'Dedicated healthcare professionals committed to supporting patients and families.'}}
                    </p>
                </div>
            </div>

        </div>

    </div>
</section>
<section class="medical-excellence py-5">
    <div class="container">

        <div class="row align-items-center g-5">

            <div class="col-lg-6">

                <div class="medical-image-wrap">
                <img src="{{ !empty($pageContent->quality_image) ? image($pageContent->quality_image, PAGE_PATH) : asset('front/assets/img/doc-team.jpg') }}" class="img-fluid rounded-4 story-image" alt="{{$pageContent->quality_title ?? 'Medical Excellence'}}">

                    <div class="quality-badge">
                        <i class="fa-solid fa-award"></i>
                        <div>
                            <h5>Quality Healthcare</h5>
                            <span>Committed to Clinical Excellence</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-lg-6">

                <span class="section-tag">
                    {{$pageContent->quality_title ?? 'Medical Excellence'}}
                </span>

                <h2 class="section-title mt-1
                ">
                   {{$pageContent->quality_heading ?? 'Delivering Safe, Advanced & Patient-Focused Healthcare'}}
                </h2>

                <p class="mb-4">
                    {{$pageContent->quality_description ?? 'Our hospital is dedicated to providing the highest quality medical care through a combination of experienced healthcare professionals, state-of-the-art technology, and a patient-centered approach. We prioritize safety, innovation, and compassionate care to ensure the best outcomes for our patients.'}}
                </p>

                <div class="quality-list">
                    @php
                        $qualityPoints = preg_split('/\r\n|\r|\n/', $pageContent->quality_points);
                    @endphp

                    @foreach($qualityPoints as $point)
                        @if(trim($point))
                            <div class="quality-item">
                                <i class="fa-solid fa-circle-check"></i>
                                <span>{{ $point }}</span>
                            </div>
                        @endif
                    @endforeach
                </div>

            </div>

        </div>

    </div>
</section>
<section class="impact-section py-5">
    <div class="container">

        <div class="text-center mb-5">
            <span class="section-tag">
               {{$pageContent->trusted_patient_title ?? 'Our Impact'}}
            </span>

            <h2 class="section-title mt-1">
                {{$pageContent->trusted_patient_heading ?? 'Trusted By Thousands Of Patients'}}
               
            </h2>

            <p class="section-desc">
                {{$pageContent->trusted_patient_description ?? 'Our commitment to quality healthcare has helped us earn the trust of patients and families over the years.'}}
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-3 col-md-6">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fa-solid fa-user-group"></i>
                    </div>

                    <h3>{{$pageContent->patient_treated_count ?? '25'}}K+</h3>
                    <p>Patients Treated</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fa-solid fa-user-doctor"></i>
                    </div>

                    <h3>{{$pageContent->medical_experts_count ?? '35'}}K+</h3>
                    <p>Minimally Invasive Surgeries Performed</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fa-solid fa-stethoscope"></i>
                    </div>

                    <h3>{{$pageContent->experience_count ?? '15'}}+</h3>
                    <p>Years Experience</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fa-solid fa-award"></i>
                    </div>
                    <h3>{{$pageContent->patient_satisfaction_percentage ?? '24×7'}}</h3>
                    <p>ICU Support</p>
                </div>
            </div>

        </div>

    </div>
</section>
@if(isset($boardOfDirectors) && count($boardOfDirectors) > 0)
<section class="team-section py-5">
    <div class="container">

        <div class="text-center mb-5">
            <span class="section-tag">
                {{ $pageContent->doctor_title ?? 'Our Medical Team' }}
            </span>

            <h2 class="section-title mt-1">
                {{ $pageContent->doctor_heading ?? 'Meet Our Experts' }}
            </h2>

            <p class="section-desc">
                {{ $pageContent->doctor_subheading ?? 'Our experienced doctors and specialists are committed to providing exceptional healthcare with compassion and expertise.' }}
            </p>
        </div>

        <div class="row g-4">
            @foreach($boardOfDirectors as $director)
               <div class="col-lg-3 col-sm-6 d-flex mb-4">
                <div class="doctor-list-new w-100 h-100">
                        <a href="{{ route('front.doctor-detail', $director->doctor_slug) }}" class="doctor-link">
                            <div class="doctor-list-box">
                                <div class="doctor-bg">
                                    <img src="{!! image($director->image, DOCTOR_PATH) !!}"
                                         alt="{{ $director->name }}" class="img-fluid">
                                </div>

                                <div class="doctor-list text-center">
                                    <h4>{{ $director->name }}</h4>

                                    <div class="degree-box">
                                        <p>{{ $director->designations }}</p>
                                    </div>
                                    {{-- <div class="degree-box">
                                        <p>{{ $director->services }}</p>
                                    </div> --}}
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</section>
@endif
  
@endsection