<?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>Services - 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>
        .services-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.74)),
                url('images/hero-image.jpg') center/cover no-repeat;
        }
        .services-hero::before,
        .services-hero::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .services-hero::before {
            width: 260px;
            height: 260px;
            top: -80px;
            right: -50px;
        }
        .services-hero::after {
            width: 190px;
            height: 190px;
            bottom: -60px;
            left: -35px;
        }
        .services-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);
        }
        .services-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;
        }
        .service-metric {
            background: rgba(255, 255, 255, 0.96);
            border-radius: 22px;
            padding: 1.3rem;
            height: 100%;
            box-shadow: 0 16px 34px rgba(31, 51, 73, 0.08);
        }
        .service-metric__icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 140, 66, 0.15), rgba(30, 95, 116, 0.14));
            color: #12344d;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        .services-section-intro {
            max-width: 760px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .service-card-pro {
            background: #fff;
            border-radius: 28px;
            padding: 1.8rem;
            height: 100%;
            box-shadow: 0 20px 46px rgba(31, 51, 73, 0.08);
            border: 1px solid rgba(18, 52, 77, 0.06);
        }
        .service-card-pro__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .service-card-pro__icon {
            width: 64px;
            height: 64px;
            min-width: 64px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 140, 66, 0.16), rgba(21, 152, 149, 0.16));
            color: #12344d;
            font-size: 1.45rem;
            line-height: 1;
            flex-shrink: 0;
            overflow: visible;
        }

        .service-card-pro__icon i {
            color: inherit !important;
            margin: 0 !important;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .service-card-pro__tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0.4rem 0.75rem;
            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.05em;
        }
        .service-list {
            list-style: none;
            padding: 0;
            margin: 1.15rem 0 0;
        }
        .service-list li {
            display: flex;
            gap: 10px;
            margin-bottom: 0.9rem;
            color: #395267;
            font-weight: 500;
        }
        .service-list i {
            color: #159895;
            margin-top: 0.2rem;
        }
        .services-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);
        }
        .services-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);
        }
        .services-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;
        }
        .services-process {
            background: #fff;
            border-radius: 28px;
            padding: 2rem;
            box-shadow: 0 18px 42px rgba(31, 51, 73, 0.08);
        }
        .services-process__step {
            position: relative;
            padding-left: 4.5rem;
            min-height: 64px;
        }
        .services-process__number {
            position: absolute;
            left: 0;
            top: 0;
            width: 52px;
            height: 52px;
            border-radius: 18px;
            background: linear-gradient(135deg, #ff8c42 0%, #e85d2a 100%);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            box-shadow: 0 14px 30px rgba(232, 93, 42, 0.22);
        }
        .services-cta {
            background: linear-gradient(135deg, #12344d 0%, #1e5f74 55%, #159895 100%);
            color: #fff;
            border-radius: 30px;
            padding: 2.3rem;
            box-shadow: 0 26px 56px rgba(18, 52, 77, 0.2);
        }
        @media (max-width: 991.98px) {
            .services-hero {
                min-height: auto;
                padding: 2rem 0;
            }
            .services-hero__card,
            .services-highlight,
            .services-process,
            .services-cta {
                padding: 1.5rem;
            }
        }
        @media (max-width: 767.98px) {
            .services-hero {
                padding: 1.2rem 0 1.5rem;
                min-height: auto;
            }
            .services-hero__card,
            .service-card-pro,
            .services-highlight,
            .services-process,
            .services-cta {
                border-radius: 22px;
            }
            .services-hero__card {
                padding: 1.2rem;
            }
            .services-hero__eyebrow {
                font-size: 0.66rem;
                letter-spacing: 0.06em;
                padding: 0.48rem 0.75rem;
                margin-bottom: 0.85rem;
            }
            .services-hero h1 {
                font-size: 1.78rem;
                line-height: 1.15;
                margin-bottom: 0.85rem !important;
            }
            .services-hero .lead {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 1rem !important;
                color: rgba(255, 255, 255, 0.92);
            }
            .services-hero .btn {
                min-height: 40px;
                padding: 0.58rem 0.9rem !important;
                font-size: 0.84rem;
                border-radius: 12px;
                flex: 1 1 auto;
            }
            .service-metric {
                border-radius: 18px;
                padding: 1rem 0.9rem;
            }
            .service-metric__icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                font-size: 1.05rem;
                margin-bottom: 0.8rem;
            }
            .service-metric h3 {
                font-size: 0.98rem;
                line-height: 1.2;
            }
            .service-metric p {
                font-size: 0.78rem;
                line-height: 1.45;
            }
            .services-section-intro {
                margin-bottom: 2rem;
            }
            .services-section-intro h2 {
                font-size: 1.55rem;
                line-height: 1.2;
                margin-bottom: 0.75rem !important;
            }
            .services-section-intro .lead {
                font-size: 0.94rem;
                line-height: 1.6;
            }
            .service-card-pro {
                padding: 1.15rem;
            }
            .service-card-pro__top {
                align-items: center;
                margin-bottom: 0.85rem;
            }
            .service-card-pro__icon {
                width: 52px;
                height: 52px;
                border-radius: 16px;
                font-size: 1.15rem;
            }
            .service-card-pro__tag {
                font-size: 0.64rem;
                padding: 0.38rem 0.6rem;
            }
            .service-card-pro h3 {
                font-size: 1.18rem;
                margin-bottom: 0.75rem !important;
            }
            .service-card-pro p {
                font-size: 0.9rem;
                line-height: 1.6;
            }
            .service-list {
                margin-top: 1rem;
            }
            .service-list li {
                gap: 9px;
                margin-bottom: 0.72rem;
                font-size: 0.88rem;
                line-height: 1.5;
            }
            .service-list i {
                font-size: 0.9rem;
                margin-top: 0.24rem;
            }
            .services-highlight,
            .services-process,
            .services-cta {
                padding: 1.25rem;
            }
            .services-highlight h2,
            .services-process h2,
            .services-cta h2 {
                font-size: 1.45rem;
                line-height: 1.22;
            }
            .services-highlight__item {
                gap: 0.85rem;
                padding: 1rem;
                border-radius: 18px;
            }
            .services-highlight__icon {
                width: 48px;
                height: 48px;
                border-radius: 15px;
                font-size: 1rem;
            }
            .services-highlight__item h3 {
                font-size: 1rem;
                margin-bottom: 0.35rem !important;
            }
            .services-highlight__item p {
                font-size: 0.86rem;
                line-height: 1.55;
            }
            .services-process__step {
                padding-left: 3.65rem;
                min-height: 58px;
            }
            .services-process__number {
                width: 42px;
                height: 42px;
                border-radius: 14px;
                font-size: 0.92rem;
            }
            .services-process__step h3 {
                font-size: 1rem;
                margin-bottom: 0.3rem !important;
            }
            .services-process__step p,
            .services-cta p {
                font-size: 0.88rem;
                line-height: 1.58;
            }
            .services-cta .badge {
                font-size: 0.68rem;
                padding: 0.45rem 0.7rem !important;
            }
            .services-cta .btn {
                min-height: 40px;
                font-size: 0.84rem;
                border-radius: 12px;
                padding: 0.56rem 0.9rem !important;
                flex: 1 1 auto;
            }
        }
    </style>
</head>
<body>
    <?php include 'includes/header.php'; ?>

    <section class="services-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    <div class="services-hero__card text-center text-lg-start text-white">
                        <div class="row align-items-center g-4">
                            <div class="col-lg-7">
                                <span class="services-hero__eyebrow"><i class="fas fa-hand-holding-heart"></i>Holistic Elder Care</span>
                                <h1 class="display-5 fw-bold mb-3">Services Built Around Health, Comfort, and Everyday Dignity</h1>
                                <p class="lead mb-4">Oldage Home combines medical support, daily assistance, wellness programs, and family-centered care to create a calm, secure, and uplifting living experience for every resident.</p>
                                <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-start">
                                    <?php if (isLoggedIn()): ?>
                                        <a href="book-services.php" class="btn btn-primary">Book a Service</a>
                                        <a href="contact.php" class="btn btn-outline-light">Talk to Our Team</a>
                                    <?php else: ?>
                                        <a href="register.php" class="btn btn-primary">Start Your Journey</a>
                                        <a href="contact.php" class="btn btn-outline-light">Request a Callback</a>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <div class="service-metric text-dark">
                                            <div class="service-metric__icon"><i class="fas fa-user-nurse"></i></div>
                                            <h3 class="h5 fw-bold mb-1">24/7 Care</h3>
                                            <p class="mb-0 text-muted small">Responsive staff support throughout the day and night.</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="service-metric text-dark">
                                            <div class="service-metric__icon"><i class="fas fa-shield-heart"></i></div>
                                            <h3 class="h5 fw-bold mb-1">Safe Support</h3>
                                            <p class="mb-0 text-muted small">Care plans shaped around comfort, safety, and trust.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="services-section-intro">
                <h2 class="fw-bold mb-3">A Complete Care Experience Under One Roof</h2>
                <p class="text-muted lead mb-0">Each service is designed to support physical health, emotional well-being, social engagement, and a steady sense of routine for residents and their families.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-heartbeat"></i></div>
                            <span class="service-card-pro__tag">Clinical Care</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Medical Care</h3>
                        <p class="text-muted mb-0">Round-the-clock clinical supervision with on-site nurses, routine health tracking, medication oversight, and prompt emergency support.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Daily health monitoring and wellness checks</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Medication administration and review</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Emergency response and doctor coordination</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Specialized geriatric attention</span></li>
                        </ul>
                    </article>
                </div>

                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-utensils"></i></div>
                            <span class="service-card-pro__tag">Nutrition</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Nutrition and Dining</h3>
                        <p class="text-muted mb-0">Balanced meals prepared with care, served in a comfortable dining environment with attention to personal health needs and preferences.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Fresh, balanced daily meals</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Diabetic, low-salt, and other dietary accommodations</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Special menus for celebrations and festivals</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Snacks and hydration support throughout the day</span></li>
                        </ul>
                    </article>
                </div>

                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-users"></i></div>
                            <span class="service-card-pro__tag">Engagement</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Social Activities</h3>
                        <p class="text-muted mb-0">Programs that keep residents active, connected, and mentally refreshed through meaningful group participation and joyful routines.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Games, group sessions, and themed events</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Arts, crafts, and hobby activities</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Music, storytelling, and entertainment</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Community outings and festive celebrations</span></li>
                        </ul>
                    </article>
                </div>

                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-spa"></i></div>
                            <span class="service-card-pro__tag">Daily Living</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Personal Care</h3>
                        <p class="text-muted mb-0">Respectful day-to-day assistance that helps residents maintain independence, comfort, hygiene, and personal dignity.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Bathing, grooming, and dressing support</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Mobility and transfer assistance</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Laundry and room support services</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Routine-based care for better daily comfort</span></li>
                        </ul>
                    </article>
                </div>

                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-brain"></i></div>
                            <span class="service-card-pro__tag">Emotional Wellness</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Mental Health Support</h3>
                        <p class="text-muted mb-0">Counseling and emotional care designed to support confidence, reduce stress, and encourage cognitive engagement.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Supportive counseling and emotional check-ins</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Memory enhancement and cognitive activity programs</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Stress management and calming practices</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Guidance for families during transitions</span></li>
                        </ul>
                    </article>
                </div>

                <div class="col-lg-4 col-md-6 facility-item">
                    <article class="service-card-pro">
                        <div class="service-card-pro__top">
                            <div class="service-card-pro__icon"><i class="fas fa-hand-holding-heart"></i></div>
                            <span class="service-card-pro__tag">Family Partnership</span>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Family Support</h3>
                        <p class="text-muted mb-0">Clear communication and family-friendly processes that help loved ones feel informed, supported, and welcome.</p>
                        <ul class="service-list">
                            <li><i class="fas fa-check-circle"></i><span>Regular care updates and communication</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Visitation planning and coordination</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Family counseling and care discussions</span></li>
                            <li><i class="fas fa-check-circle"></i><span>Respite and transitional care guidance</span></li>
                        </ul>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="services-highlight">
                <div class="row g-4 align-items-stretch">
                    <div class="col-lg-5">
                        <h2 class="fw-bold mb-3">Why Families Trust Oldage Home</h2>
                        <p class="text-muted mb-0">Our care model blends professional support with a warm atmosphere, helping residents feel secure while families stay confident in the quality of care being delivered.</p>
                    </div>
                    <div class="col-lg-7">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="services-highlight__item">
                                    <div class="services-highlight__icon"><i class="fas fa-award"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Trusted Standards</h3>
                                        <p class="mb-0 text-muted">Consistent care routines and dependable service quality built on experience and compassion.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="services-highlight__item">
                                    <div class="services-highlight__icon"><i class="fas fa-clock"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">24/7 Availability</h3>
                                        <p class="mb-0 text-muted">Continuous support so residents and their loved ones never feel alone or uncertain.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="services-highlight__item">
                                    <div class="services-highlight__icon"><i class="fas fa-user-md"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Experienced Team</h3>
                                        <p class="mb-0 text-muted">Compassionate caregivers and staff who understand elderly care in both practical and human ways.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="services-highlight__item">
                                    <div class="services-highlight__icon"><i class="fas fa-home"></i></div>
                                    <div>
                                        <h3 class="h5 fw-bold mb-2">Home-Like Comfort</h3>
                                        <p class="mb-0 text-muted">A setting designed to feel calm, welcoming, and dignified rather than institutional.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="row g-4 align-items-stretch">
                <div class="col-lg-6">
                    <div class="services-process h-100">
                        <h2 class="fw-bold mb-4">How We Support New Residents</h2>
                        <div class="services-process__step mb-4">
                            <div class="services-process__number">1</div>
                            <h3 class="h5 fw-bold mb-2">Initial Conversation</h3>
                            <p class="mb-0 text-muted">We listen to your needs, explain our care options, and understand the level of support required.</p>
                        </div>
                        <div class="services-process__step mb-4">
                            <div class="services-process__number">2</div>
                            <h3 class="h5 fw-bold mb-2">Care Planning</h3>
                            <p class="mb-0 text-muted">Our team helps shape a care approach based on health needs, daily preferences, and comfort priorities.</p>
                        </div>
                        <div class="services-process__step">
                            <div class="services-process__number">3</div>
                            <h3 class="h5 fw-bold mb-2">Smooth Onboarding</h3>
                            <p class="mb-0 text-muted">We guide families and residents through a calm transition into daily life at Oldage Home.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="services-cta h-100 d-flex flex-column justify-content-between">
                        <div>
                            <span class="badge bg-light text-dark px-3 py-2 mb-3 rounded-pill">Ready to Take the Next Step?</span>
                            <h2 class="fw-bold mb-3">Talk to Our Team About the Right Care Plan</h2>
                            <p class="mb-0 text-white-50">Whether you are exploring long-term support, short-term care, or simply need guidance, we are here to help you choose confidently.</p>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mt-4">
                            <?php if (isLoggedIn()): ?>
                                <a href="book-services.php" class="btn btn-light">Book Services</a>
                                <a href="dashboard.php" class="btn btn-outline-light">View Dashboard</a>
                            <?php else: ?>
                                <a href="contact.php" class="btn btn-light">Contact Us</a>
                                <a href="register.php" class="btn btn-outline-light">Create Account</a>
                            <?php endif; ?>
                        </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>