@extends('layouts.app')

@section('content')

    <!-- Page Title -->
    <div class="page-title">
        <nav class="breadcrumbs">
            <div class="container">
                <ol>
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li class="current">About</li>
                </ol>
            </div>
        </nav>
    </div><!-- End Page Title -->

    <!-- About Section -->
    <section id="about" class="about section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row align-items-center">
                <div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
                    <div class="about-content">
                        <h2>Compassionate Care for Every Family</h2>
                        <p class="lead">Smart Medical Facility helps patients connect with doctors using an easy online system. Patients can search doctors, book appointments, receive updates, and manage their profile in one place.</p>

                        <p>This project is designed for a clean and smooth experience. Doctors can manage their availability, accept or reject appointments, add consultation notes, and view patient history. Admin can manage doctors and patients, approve doctors, and keep the system data organized.</p>

                        <div class="stats-grid">
                            <div class="stat-item">
                                <span class="stat-number" data-purecounter-start="0" data-purecounter-end="15000" data-purecounter-duration="2">15000</span>
                                <span class="stat-label">Patients Treated</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" data-purecounter-start="0" data-purecounter-end="25" data-purecounter-duration="2">25</span>
                                <span class="stat-label">Years Experience</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="2">50</span>
                                <span class="stat-label">Medical Specialists</span>
                            </div>
                        </div><!-- End Stats Grid -->
                    </div><!-- End About Content -->
                </div>

                <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                    <div class="image-wrapper">
                        <img src="assets/img/health/facilities-6.webp" class="img-fluid main-image" alt="Healthcare facility">
                        <div class="floating-image" data-aos="zoom-in" data-aos-delay="400">
                            <img src="assets/img/health/staff-8.webp" class="img-fluid" alt="Medical team">
                        </div>
                    </div><!-- End Image Wrapper -->
                </div>
            </div>

            <div class="values-section" data-aos="fade-up" data-aos-delay="300">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h3>Our Core Values</h3>
                        <p class="section-description">These values shape how we treat patients and how we build our system</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="value-item">
                            <div class="value-icon">
                                <i class="bi bi-heart-pulse"></i>
                            </div>
                            <h4>Compassion</h4>
                            <p>We focus on respectful care and clear communication, so patients feel supported at every step.</p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="value-item">
                            <div class="value-icon">
                                <i class="bi bi-shield-check"></i>
                            </div>
                            <h4>Excellence</h4>
                            <p>We aim for reliable appointments, accurate records, and a smooth experience for patients and doctors.</p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                        <div class="value-item">
                            <div class="value-icon">
                                <i class="bi bi-people"></i>
                            </div>
                            <h4>Integrity</h4>
                            <p>We keep patient data organized and handle every request honestly and responsibly.</p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                        <div class="value-item">
                            <div class="value-icon">
                                <i class="bi bi-lightbulb"></i>
                            </div>
                            <h4>Innovation</h4>
                            <p>We use simple, modern tools to improve scheduling, updates, and day-to-day medical workflow.</p>
                        </div>
                    </div>
                </div><!-- End Values Row -->
            </div><!-- End Values Section -->

        </div>

    </section><!-- /About Section -->

@endsection