<?php require_once __DIR__ . '/includes/auth.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Staff - Oldage Home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <style>
        .staff-hero {
            position: relative;
            overflow: hidden;
            min-height: 62vh;
            display: flex;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(18, 52, 77, 0.92), rgba(30, 95, 116, 0.76)),
                url('images/nurse1.jpg') center/cover no-repeat;
        }
        .staff-hero::before,
        .staff-hero::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .staff-hero::before {
            width: 260px;
            height: 260px;
            top: -80px;
            right: -40px;
        }
        .staff-hero::after {
            width: 190px;
            height: 190px;
            bottom: -55px;
            left: -30px;
        }
        .staff-hero__card {
            position: relative;
            z-index: 1;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
            border: 1px solid rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 30px;
            padding: 2.3rem;
            box-shadow: 0 28px 64px rgba(5, 18, 31, 0.28);
        }
        .staff-hero__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            color: #12344d;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }
        .staff-metric {
            background: rgba(255, 255, 255, 0.96);
            border-radius: 22px;
            padding: 1.25rem;
            height: 100%;
            box-shadow: 0 16px 34px rgba(31, 51, 73, 0.08);
        }
        .staff-metric__icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 140, 66, 0.16), rgba(21, 152, 149, 0.15));
            color: #12344d;
            font-size: 1.15rem;
            margin-bottom: 0.9rem;
        }
        .staff-section-intro {
            max-width: 760px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .staff-section-title {
            margin-bottom: 1.4rem;
        }
        .staff-section-tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 0.45rem 0.78rem;
            border-radius: 999px;
            background: rgba(18, 52, 77, 0.06);
            color: #12344d;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.9rem;
        }
        .staff-lead-card {
            background: #fff;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 48px rgba(31, 51, 73, 0.08);
            border: 1px solid rgba(18, 52, 77, 0.06);
            height: 100%;
        }
        .staff-lead-card__image {
            width: 100%;
            height: 360px;
            object-fit: cover;
        }
        .staff-lead-card__content {
            padding: 1.7rem;
        }
        .staff-role {
            color: #e85d2a;
            font-weight: 700;
            margin-bottom: 0.85rem;
        }
        .staff-mini-card {
            background: #fff;
            border-radius: 24px;
            padding: 1.35rem;
            height: 100%;
            box-shadow: 0 16px 38px rgba(31, 51, 73, 0.08);
            border: 1px solid rgba(18, 52, 77, 0.05);
            text-align: center;
        }
        .staff-mini-card__image {
            width: 118px;
            height: 118px;
            border-radius: 22px;
            object-fit: cover;
            margin: 0 auto 1rem;
            display: block;
            box-shadow: 0 14px 30px rgba(18, 52, 77, 0.12);
        }
        .staff-highlight {
            background: linear-gradient(135deg, #f5f9fc 0%, #eef5f9 100%);
            border-radius: 30px;
            padding: 2rem;
            box-shadow: inset 0 0 0 1px rgba(18, 52, 77, 0.05);
        }
        .staff-highlight__item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.2rem;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.9);
            height: 100%;
            box-shadow: 0 12px 26px rgba(31, 51, 73, 0.06);
        }
        .staff-highlight__icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #12344d 0%, #1e5f74 100%);
            color: #fff;
            font-size: 1.15rem;
            flex-shrink: 0;
        }
        .staff-cta {
            background: linear-gradient(135deg, #12344d 0%, #1e5f74 55%, #159895 100%);
            color: #fff;
            border-radius: 30px;
            padding: 2.3rem;
            box-shadow: 0 24px 54px rgba(18, 52, 77, 0.18);
        }
        @media (max-width: 991.98px) {
            .staff-hero {
                min-height: auto;
                padding: 2rem 0;
            }
            .staff-hero__card,
            .staff-highlight,
            .staff-cta {
                padding: 1.5rem;
            }
            .staff-lead-card__image {
                height: 300px;
            }
        }
        @media (max-width: 767.98px) {
            .staff-hero {
                padding: 1.2rem 0 1.5rem;
            }
            .staff-hero__card,
            .staff-lead-card,
            .staff-mini-card,
            .staff-highlight,
            .staff-cta {
                border-radius: 22px;
            }
            .staff-hero__card {
                padding: 1.2rem;
            }
            .staff-hero__eyebrow {
                font-size: 0.66rem;
                padding: 0.48rem 0.72rem;
                margin-bottom: 0.85rem;
            }
            .staff-hero h1 {
                font-size: 1.78rem;
                line-height: 1.15;
                margin-bottom: 0.8rem !important;
            }
            .staff-hero .lead {
                font-size: 0.95rem;
                line-height: 1.58;
                margin-bottom: 1rem !important;
            }
            .staff-hero .btn {
                flex: 1 1 auto;
            }
            .staff-metric {
                padding: 1rem 0.92rem;
                border-radius: 18px;
            }
            .staff-metric__icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                font-size: 1rem;
            }
            .staff-lead-card__image {
                height: 260px;
            }
            .staff-lead-card__content,
            .staff-highlight,
            .staff-cta {
                padding: 1.25rem;
            }
            .staff-mini-card {
                padding: 1.15rem;
            }
            .staff-mini-card__image {
                width: 96px;
                height: 96px;
                border-radius: 18px;
            }
            .staff-highlight__item {
                gap: 0.85rem;
                padding: 1rem;
                border-radius: 18px;
            }
            .staff-highlight__icon {
                width: 48px;
                height: 48px;
                border-radius: 15px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <?php include 'includes/header.php'; ?>

    <section class="staff-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    <div class="staff-hero__card text-white text-center text-lg-start">
                        <div class="row align-items-center g-4">
                            <div class="col-lg-7">
                                <span class="staff-hero__eyebrow"><i class="fas fa-user-nurse"></i>Care Professionals</span>
                                <h1 class="display-5 fw-bold mb-3">Meet the Compassionate Team Behind Everyday Comfort and Care</h1>
                                <p class="lead mb-4">Our staff brings together clinical expertise, warm communication, and a deep respect for every resident’s dignity, comfort, and quality of life.</p>
                                <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-start">
                                    <a href="contact.php" class="btn btn-primary">Talk to Our Team</a>
                                    <a href="services.php" class="btn btn-outline-light">Explore Services</a>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <div class="staff-metric text-dark">
                                            <div class="staff-metric__icon"><i class="fas fa-user-doctor"></i></div>
                                            <h3 class="h5 fw-bold mb-1">Clinical Expertise</h3>
                                            <p class="mb-0 text-muted small">Qualified professionals with elderly care experience.</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="staff-metric text-dark">
                                            <div class="staff-metric__icon"><i class="fas fa-heart"></i></div>
                                            <h3 class="h5 fw-bold mb-1">Warm Support</h3>
                                            <p class="mb-0 text-muted small">A people-first approach in every interaction.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="staff-section-intro">
                <h2 class="fw-bold mb-3">A Team Built on Skill, Respect, and Daily Dedication</h2>
                <p class="text-muted lead mb-0">From leadership and nursing to therapy, hospitality, and resident support, each team member plays an important role in making Oldage Home feel safe, calm, and genuinely caring.</p>
            </div>

            <div class="staff-section-title text-center">
                <span class="staff-section-tag"><i class="fas fa-crown"></i>Leadership Team</span>
                <h3 class="fw-bold mb-2">Experienced Professionals Guiding Our Mission</h3>
                <p class="text-muted">A leadership group focused on quality care, operational excellence, and a strong resident experience.</p>
            </div>

            <div class="row g-4 mb-5">
                <div class="col-lg-4">
                    <article class="staff-lead-card">
                        <img src="images/director.jpg" alt="Dr. Sarah Anderson" class="staff-lead-card__image" onerror="this.src='https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=800&h=900&fit=crop&crop=faces'">
                        <div class="staff-lead-card__content">
                            <h4 class="fw-bold mb-1">Dr. Sarah Anderson</h4>
                            <div class="staff-role">Executive Director</div>
                            <p class="mb-0 text-muted">With more than 20 years in geriatric care, Dr. Anderson leads our team with empathy and clarity, ensuring every resident receives thoughtful, high-quality support.</p>
                        </div>
                    </article>
                </div>
                <div class="col-lg-4">
                    <article class="staff-lead-card">
                        <img src="images/medical-director.jpg" alt="Dr. Michael Brown" class="staff-lead-card__image" onerror="this.src='https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=800&h=900&fit=crop&crop=faces'">
                        <div class="staff-lead-card__content">
                            <h4 class="fw-bold mb-1">Dr. Michael Brown</h4>
                            <div class="staff-role">Medical Director</div>
                            <p class="mb-0 text-muted">Board-certified in geriatric medicine, Dr. Brown oversees clinical care and works closely with our nursing and therapy teams to support resident well-being every day.</p>
                        </div>
                    </article>
                </div>
                <div class="col-lg-4">
                    <article class="staff-lead-card">
                        <img src="images/activities-director.jpg" alt="Ms. Jennifer Chen" class="staff-lead-card__image" onerror="this.src='https://images.unsplash.com/photo-1594824475317-9f9f1c4b8a7d?w=800&h=900&fit=crop&crop=faces'">
                        <div class="staff-lead-card__content">
                            <h4 class="fw-bold mb-1">Ms. Jennifer Chen</h4>
                            <div class="staff-role">Director of Activities</div>
                            <p class="mb-0 text-muted">Jennifer designs programs that keep residents socially active, emotionally engaged, and connected through meaningful daily routines and special events.</p>
                        </div>
                    </article>
                </div>
            </div>

            <div class="staff-section-title text-center">
                <span class="staff-section-tag"><i class="fas fa-hands-helping"></i>Care Team</span>
                <h3 class="fw-bold mb-2">Daily Support From Skilled and Compassionate Specialists</h3>
                <p class="text-muted">A multidisciplinary team that helps residents stay safe, comfortable, active, and independent as much as possible.</p>
            </div>

            <div class="row g-4 mb-5">
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/nurse1.jpg" alt="Registered nurses" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1584515933487-779824d29309?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Registered Nurses</h5>
                        <p class="text-muted mb-0">Round-the-clock nursing support with experience in geriatric care and health monitoring.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/caregiver1.jpg" alt="Certified nursing assistants" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Care Assistants</h5>
                        <p class="text-muted mb-0">Hands-on support for hygiene, mobility, meals, and daily comfort with patience and respect.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/therapist1.jpg" alt="Physical therapists" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1612277795421-9bc7706a4a9f?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Physical Therapists</h5>
                        <p class="text-muted mb-0">Mobility-focused sessions and rehabilitation support that encourage strength and confidence.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/therapist2.jpg" alt="Occupational therapists" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Occupational Therapists</h5>
                        <p class="text-muted mb-0">Practical support that helps residents maintain daily routines and functional independence.</p>
                    </article>
                </div>
            </div>

            <div class="staff-section-title text-center">
                <span class="staff-section-tag"><i class="fas fa-building"></i>Support Staff</span>
                <h3 class="fw-bold mb-2">The People Who Keep Everyday Life Running Smoothly</h3>
                <p class="text-muted">Behind the scenes, our support teams help create a clean, welcoming, and well-organized environment for residents and families.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/chef.jpg" alt="Executive chef" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1600565193348-f74bd3c7ccdf?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Executive Chef</h5>
                        <p class="text-muted mb-0">Nutritious menus and resident-friendly meals tailored for comfort, taste, and dietary needs.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/housekeeping.jpg" alt="Housekeeping team" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Housekeeping Team</h5>
                        <p class="text-muted mb-0">Clean, comfortable living spaces that help residents feel settled, secure, and at ease.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/maintenance.jpg" alt="Maintenance staff" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Maintenance Staff</h5>
                        <p class="text-muted mb-0">Reliable facility upkeep focused on safety, cleanliness, and uninterrupted daily routines.</p>
                    </article>
                </div>
                <div class="col-lg-3 col-md-6">
                    <article class="staff-mini-card">
                        <img src="images/admin.jpg" alt="Administrative team" class="staff-mini-card__image" onerror="this.src='https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&h=500&fit=crop&crop=faces'">
                        <h5 class="fw-bold mb-2">Administrative Team</h5>
                        <p class="text-muted mb-0">Coordination, communication, and operational support that keeps resident services organized.</p>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="staff-highlight">
                <div class="row g-4 align-items-stretch">
                    <div class="col-lg-5">
                        <h2 class="fw-bold mb-3">Why Families Feel Confident in Our Team</h2>
                        <p class="text-muted mb-0">Our culture is built around continuous learning, respectful communication, and a shared commitment to making residents feel safe, understood, and genuinely cared for.</p>
                    </div>
                    <div class="col-lg-7">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="staff-highlight__item">
                                    <div class="staff-highlight__icon"><i class="fas fa-graduation-cap"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Ongoing Training</h3>
                                        <p class="mb-0 text-muted">Our staff stays current with best practices in elderly care, safety, and resident engagement.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="staff-highlight__item">
                                    <div class="staff-highlight__icon"><i class="fas fa-heart"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Compassion First</h3>
                                        <p class="mb-0 text-muted">We value empathy, patience, and a respectful approach in every part of resident care.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="staff-highlight__item">
                                    <div class="staff-highlight__icon"><i class="fas fa-users"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Team-Based Care</h3>
                                        <p class="mb-0 text-muted">Collaboration between departments helps each resident receive thoughtful, personalized support.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="staff-highlight__item">
                                    <div class="staff-highlight__icon"><i class="fas fa-shield-heart"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Resident Safety</h3>
                                        <p class="mb-0 text-muted">Our team stays focused on physical safety, emotional comfort, and everyday peace of mind.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="staff-cta text-center text-lg-start">
                <div class="row align-items-center g-4">
                    <div class="col-lg-8">
                        <h2 class="fw-bold mb-3">Want to Learn More About the People Caring for Your Loved One?</h2>
                        <p class="mb-0 text-white-50">Our team is happy to answer questions about care routines, medical support, daily life, and how we work together to create a calm and supportive environment.</p>
                    </div>
                    <div class="col-lg-4">
                        <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-end">
                            <a href="contact.php" class="btn btn-light">Contact Us</a>
                            <a href="services.php" class="btn btn-outline-light">View Services</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <?php include 'includes/footer.php'; ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>