@extends('website::default.layout.master')

@section('title', 'About Us - ' . ($data['values']['doctor_name'] ?? 'Medolia'))

@section('content')

    <!-- About Us Section -->
    <section class="about-section py-5" id="about">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5 mb-4 mb-lg-0">
                    <div class="about-image-wrapper position-relative">
                        <!-- Main Image -->
                        <div class="about-main-image">
                            <img src="https://html.pixelfit.agency/medolia/assets/images/home-one/about/about-img1.jpg"
                                 alt="Doctor consulting with patient"
                                 class="img-fluid rounded-4">
                        </div>

                        <!--                        &lt;!&ndash; Happy Patients Card &ndash;&gt;-->
                        <!--                        <div class="happy-patients-card">-->
                        <!--                            <div class="happy-patients-number">12K</div>-->
                        <!--                            <div class="happy-patients-text">Happy our<br>Patients</div>-->
                        <!--                        </div>-->

                        <!-- Schedule Hours Card -->
                        <div class="schedule-card">
                            <div class="schedule-header">
                                <div class="schedule-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <h4 class="schedule-title">Schedule Hours</h4>
                            </div>
                            <div class="schedule-list">
                                <div class="schedule-item">
                                    <span class="schedule-day">Mon - Thu</span>
                                    <span class="schedule-time">09:00 - 06:00</span>
                                </div>
                                <div class="schedule-item">
                                    <span class="schedule-day">Saturday</span>
                                    <span class="schedule-time">09:00 - 06:00</span>
                                </div>
                                <div class="schedule-item">
                                    <span class="schedule-day">Sunday</span>
                                    <span class="schedule-time">Off Day</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 offset-md-1">
                    <div class="about-content">
                        <div class="section-badge mb-3">
                            <span class="badge-dot"></span>
                            About Us
                        </div>

                        <h2 class="about-title mb-4">
                            {{ $data['values']['about_title']  }}
                        </h2>

                        <p class="about-description mb-4">
                            {{ $data['values']['about_description']  }}
                        </p>

                        <!-- Service Features -->
                        <div class="service-features mb-4">
                            <div class="service-feature mb-3">
                                <div class="service-icon service-icon-purple">
                                    <i class="fas fa-user-md"></i>
                                </div>
                                <div class="service-content">
                                    <h5 class="service-title">Dedicated Healthcare Provider</h5>
                                    <p class="service-description">We provide personalized, cutting-edge medical care</p>
                                </div>
                            </div>

                            <div class="service-feature mb-3">
                                <div class="service-icon service-icon-pink">
                                    <i class="fas fa-tooth"></i>
                                </div>
                                <div class="service-content">
                                    <h5 class="service-title">Comprehensive Dental Care</h5>
                                    <p class="service-description">We provide personalized, cutting-edge medical care</p>
                                </div>
                            </div>
                        </div>

                        <!-- About More Button and Doctor Info -->
                        <div class="about-actions d-flex align-items-center gap-4">
                            <a href="{{ url("website/preview/$template->slug/about?token=$token") }}" class="btn btn-primary btn-lg about-more-btn">
                                About more
                            </a>

{{--                            <div class="doctor-info d-flex align-items-center">--}}
{{--                                <div class="doctor-avatar me-3">--}}
{{--                                    <img src="https://html.pixelfit.agency/medolia/assets/images/home-one/testimonial/author-img1.jpg"--}}
{{--                                         alt="Dr. Anjelina Watson"--}}
{{--                                         class="rounded-circle">--}}
{{--                                </div>--}}
{{--                                <div class="doctor-details">--}}
{{--                                    <div class="doctor-name fw-bold">Anjelina Watson</div>--}}
{{--                                    <div class="doctor-position text-muted">Managing Director</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="why-choose-us-section py-5" id="why-choose-us">
        <div class="container">
            <div class="row align-items-center mb-5">
                <div class="col-lg-6">
                    <div class="why-choose-content">
                        <div class="section-badge mb-3">
                            <span class="badge-dot"></span>
                            Why Choose us
                        </div>

                        <h2 class="why-choose-title mb-4">
                            Experience Excellence<br>
                            in Medical Care
                        </h2>

                        <p class="why-choose-description mb-4">
                            Expert Receive top-quality medical care advanced treatment
                            compassionate support & personalized healthcare solutions
                            for your overall well-being and recovery.
                        </p>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="video-section position-relative">
                        <div class="video-thumbnail">
                            <img src="https://images.unsplash.com/photo-1631815589968-fdb09a223b1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                                 alt="Medical team in action"
                                 class="img-fluid rounded-4">
                            <div class="video-overlay">
                                <button class="video-play-btn" data-bs-toggle="modal" data-bs-target="#videoModal">
                                    <i class="fas fa-play"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feature Cards -->
            <div class="row g-4">
                <!-- Quick Response Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-purple h-100">
                        <div class="feature-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h4 class="feature-title">Quick Response</h4>
                        <p class="feature-description">
                            Receive top-quality medical care advanced treatment
                        </p>
                    </div>
                </div>

                <!-- Customer Focus Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-pink h-100">
                        <div class="feature-icon">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <h4 class="feature-title">Customer Focus</h4>
                        <p class="feature-description">
                            Patients first personalized and compassionate care
                        </p>
                    </div>
                </div>

                <!-- Expert Doctors Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-yellow h-100">
                        <div class="feature-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <h4 class="feature-title">50+ Expert Doctors</h4>
                        <p class="feature-description">
                            Experience doctor providing specialized quality
                        </p>
                    </div>
                </div>

                <!-- 24/7 Support Card -->
                <div class="col-lg-3 col-md-6">
                    <div class="feature-card feature-card-green h-100">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h4 class="feature-title">24/7 Instant Support</h4>
                        <p class="feature-description">
                            Round-the-clock support for your healthcare
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Modal -->
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Medical Care Video" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection