<?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>Oldage Home - Compassionate Elderly Care</title>
    <meta name="description" content="Oldage Home provides exceptional elderly care with medical services, nutritious meals, and engaging activities in a warm, professional environment.">
    <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>
        .preloader {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
        }
        .preloader.hidden { opacity: 0; visibility: hidden; }
        .preloader-content { text-align: center; color: white; }
        .preloader-spinner {
            width: 60px; height: 60px; border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;
        }
        @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
        .preloader-text { font-size: 1.2rem; font-weight: 500; margin-bottom: 10px; }
        .preloader-subtext { font-size: 0.9rem; opacity: 0.8; }
        .home-hero-copy { max-width: 640px; }
        @media (max-width: 767.98px) {
            .home-hero-copy { max-width: 100%; margin: 0 auto; }
            .hero-carousel .carousel-caption { width: 100%; }
            .hero-carousel .carousel-caption .home-hero-copy h1 { font-size: 1.55rem; line-height: 1.16; text-wrap: balance; }
            .hero-carousel .carousel-caption .home-hero-copy p { font-size: 0.92rem; line-height: 1.55; max-width: 94%; margin-left: auto; margin-right: auto; }
            .hero-carousel .carousel-caption .home-hero-copy .btn {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 44px;
                text-align: center;
                margin-right: 0 !important;
                margin-bottom: 10px;
            }
            .hero-carousel .carousel-caption .home-hero-copy .btn:last-child {
                margin-bottom: 0;
            }
        }
    </style>
</head>
<body>
    <div class="preloader" id="preloader">
        <div class="preloader-content">
            <div class="preloader-spinner"></div>
            <div class="preloader-text">Welcome to Oldage Home</div>
            <div class="preloader-subtext">Preparing your experience...</div>
        </div>
    </div>

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

    <section class="hero-carousel">
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active" style="background-image: url('images/hero-image.jpg'); background-attachment: fixed;">
                    <div class="container">
                        <div class="carousel-caption">
                            <div class="home-hero-copy">
                                <h1 class="display-4 fw-bold text-white mb-4">Caring for Your Oldage Home</h1>
                                <p class="lead text-white mb-4">Providing compassionate care and comprehensive facilities for elderly men and women in a warm, professional environment.</p>
                                <?php if (isLoggedIn()): ?>
                                    <a href="book-services.php" class="btn btn-primary btn-lg me-3">Book Services</a>
                                    <a href="dashboard.php" class="btn btn-outline-light btn-lg">My Dashboard</a>
                                <?php else: ?>
                                    <a href="register.php" class="btn btn-primary btn-lg me-3">Get Started</a>
                                    <a href="login.php" class="btn btn-outline-light btn-lg">Login</a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url('images/nurse1.jpg'); background-attachment: fixed;">
                    <div class="container">
                        <div class="carousel-caption">
                            <div class="home-hero-copy">
                                <h1 class="display-4 fw-bold text-white mb-4">24/7 Medical Excellence</h1>
                                <p class="lead text-white mb-4">Professional healthcare services with qualified medical staff ensuring your well-being around the clock.</p>
                                <a href="services.php" class="btn btn-primary btn-lg me-3">Our Services</a>
                                <a href="contact.php" class="btn btn-outline-light btn-lg">Contact Us</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url('images/senior-gathering.jpg'); background-attachment: fixed;">
                    <div class="container">
                        <div class="carousel-caption">
                            <div class="home-hero-copy">
                                <h1 class="display-4 fw-bold text-white mb-4">Active &amp; Engaged Lifestyle</h1>
                                <p class="lead text-white mb-4">Join our vibrant community with recreational activities, social events, and meaningful connections.</p>
                                <a href="facilities.php" class="btn btn-primary btn-lg me-3">Explore Facilities</a>
                                <a href="gallery.php" class="btn btn-outline-light btn-lg">View Gallery</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></button>
        </div>
    </section>

    <section class="stats-section">
        <div class="container">
            <div class="stats-strip">
                <div class="row g-3">
                    <div class="col-md-3 col-6">
                        <div class="stat-item">
                            <div class="stat-icon"><i class="fas fa-smile-beam"></i></div>
                            <div class="stat-number">500+</div>
                            <div class="stat-label">Happy Residents</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stat-item">
                            <div class="stat-icon"><i class="fas fa-award"></i></div>
                            <div class="stat-number">15+</div>
                            <div class="stat-label">Years Experience</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stat-item">
                            <div class="stat-icon"><i class="fas fa-user-nurse"></i></div>
                            <div class="stat-number">50+</div>
                            <div class="stat-label">Care Professionals</div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="stat-item">
                            <div class="stat-icon"><i class="fas fa-clock"></i></div>
                            <div class="stat-number">24/7</div>
                            <div class="stat-label">Care Available</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row text-center mb-5"><div class="col"><h2 class="fw-bold text-primary mb-3">Care in Action</h2><p class="text-muted lead">Real moments of support and compassionate care for our residents.</p></div></div>
            <div class="row g-4">
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm overflow-hidden"><img src="images/care-moment.jpg" class="card-img-top" alt="Caregiver assisting resident" onerror="this.src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=400&fit=crop&crop=faces'"><div class="card-body"><h5 class="card-title fw-bold">Personal Support</h5><p class="card-text text-muted">Gentle help with daily routines, mobility, and comfort for every resident.</p></div></div></div>
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm overflow-hidden"><img src="images/caregiver1.jpg" class="card-img-top" alt="Caregiver with smiling resident" onerror="this.src='https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&h=400&fit=crop&crop=faces'"><div class="card-body"><h5 class="card-title fw-bold">Compassionate Team</h5><p class="card-text text-muted">Our team offers warm attention and companionship every day.</p></div></div></div>
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm overflow-hidden"><img src="images/caregiver2.jpg" class="card-img-top" alt="Nurse checking resident health" onerror="this.src='https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=400&fit=crop&crop=faces'"><div class="card-body"><h5 class="card-title fw-bold">Health Monitoring</h5><p class="card-text text-muted">Routine health checks and medical coordination for peace of mind.</p></div></div></div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row text-center mb-5"><div class="col"><h2 class="fw-bold text-primary mb-3">Our Comprehensive Services</h2><p class="text-muted lead">Tailored care programs designed to meet all your needs with compassion and excellence</p></div></div>
            <div class="row g-4">
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm service-card"><div class="card-body text-center"><div class="service-icon"><i class="fas fa-heartbeat fa-4x text-primary mb-4"></i></div><h5 class="card-title fw-bold">Medical Care</h5><p class="card-text">24/7 medical supervision with qualified healthcare professionals ensuring your well-being.</p><a href="services.php" class="btn btn-outline-primary mt-3">Learn More</a></div></div></div>
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm service-card"><div class="card-body text-center"><div class="service-icon"><i class="fas fa-utensils fa-4x text-primary mb-4"></i></div><h5 class="card-title fw-bold">Nutrition &amp; Dining</h5><p class="card-text">Balanced, nutritious meals prepared with care for optimal health and enjoyment.</p><a href="services.php" class="btn btn-outline-primary mt-3">Learn More</a></div></div></div>
                <div class="col-md-4"><div class="card h-100 border-0 shadow-sm service-card"><div class="card-body text-center"><div class="service-icon"><i class="fas fa-users fa-4x text-primary mb-4"></i></div><h5 class="card-title fw-bold">Social Activities</h5><p class="card-text">Engaging activities and social programs to keep you active and socially connected.</p><a href="services.php" class="btn btn-outline-primary mt-3">Learn More</a></div></div></div>
            </div>
            <div class="text-center mt-5"><a href="services.php" class="btn btn-primary btn-lg px-5 py-3">View All Services</a></div>
        </div>
    </section>

    <?php if (isLoggedIn()): ?>
    <section class="cta-section">
        <div class="container">
            <h2 class="fw-bold mb-3">Ready to Book a Service?</h2>
            <p class="mb-4 lead">Browse our available services and schedule appointments with ease. Your well-being is our priority.</p>
            <a href="book-services.php" class="btn btn-light btn-lg me-3">Book Services Now</a>
            <a href="dashboard.php" class="btn btn-outline-light btn-lg">View My Bookings</a>
        </div>
    </section>
    <?php endif; ?>

    <section class="py-5">
        <div class="container">
            <div class="row text-center mb-5"><div class="col"><h2 class="fw-bold text-primary mb-3">Our Modern Facilities</h2><p class="text-muted lead">State-of-the-art amenities designed for comfort, safety, and quality of life</p></div></div>
            <div class="row g-4">
                <div class="col-md-6"><div class="card border-0 shadow-sm h-100"><div class="position-relative overflow-hidden"><img src="images/room-interior.jpg" class="card-img-top" alt="Comfortable rooms" onerror="this.src='https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&h=400&fit=crop&crop=center'"><div class="card-img-overlay d-flex align-items-end"><div class="facility-home-overlay w-100"><h5 class="card-title fw-bold mb-2">Comfortable Accommodations</h5><p class="card-text small mb-0">Spacious, well-furnished rooms designed for comfort and accessibility.</p></div></div></div></div></div>
                <div class="col-md-6"><div class="card border-0 shadow-sm h-100"><div class="position-relative overflow-hidden"><img src="images/dining-hall.jpg" class="card-img-top" alt="Dining and care" onerror="this.src='https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=600&h=400&fit=crop&crop=center'"><div class="card-img-overlay d-flex align-items-end"><div class="facility-home-overlay w-100"><h5 class="card-title fw-bold mb-2">Recreational Areas</h5><p class="card-text small mb-0">Beautiful gardens and activity spaces for relaxation and enjoyment.</p></div></div></div></div></div>
            </div>
            <div class="text-center mt-5"><a href="facilities.php" class="btn btn-primary btn-lg px-5 py-3">Explore All Facilities</a></div>
        </div>
    </section>

    <section class="home-testimonials py-5">
        <div class="container">
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-8">
                    <span class="home-testimonials__eyebrow">Testimonials</span>
                    <h2 class="fw-bold mb-3">What Our Residents and Families Say</h2>
                    <p class="text-muted lead mb-0">Real stories that reflect the warmth, trust, and everyday comfort people experience at Oldage Home.</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    <div id="testimonialsCarousel" class="carousel slide home-testimonials__carousel" data-bs-ride="carousel" data-bs-interval="6000">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <article class="home-testimonial-card mx-auto">
                                    <div class="home-testimonial-card__quote"><i class="fas fa-quote-left"></i></div>
                                    <p class="home-testimonial-card__text">The care and attention I receive here is exceptional. The staff treats me like family, and I feel truly valued every single day.</p>
                                    <div class="home-testimonial-card__footer">
                                        <div class="home-testimonial-card__stars">
                                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                                        </div>
                                        <div class="home-testimonial-card__author">
                                            <img src="images/testimonial1.jpg" alt="Margaret Johnson" onerror="this.src='https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=84&h=84&fit=crop&crop=face'">
                                            <div>
                                                <h6>Margaret Johnson</h6>
                                                <small>Resident for 3 years</small>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div class="carousel-item">
                                <article class="home-testimonial-card mx-auto">
                                    <div class="home-testimonial-card__quote"><i class="fas fa-quote-left"></i></div>
                                    <p class="home-testimonial-card__text">The facilities are top-notch, the activities keep me engaged, and the medical care gives my family complete peace of mind.</p>
                                    <div class="home-testimonial-card__footer">
                                        <div class="home-testimonial-card__stars">
                                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                                        </div>
                                        <div class="home-testimonial-card__author">
                                            <img src="images/testimonial2.jpg" alt="Robert Smith" onerror="this.src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=84&h=84&fit=crop&crop=face'">
                                            <div>
                                                <h6>Robert Smith</h6>
                                                <small>Resident for 2 years</small>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div class="carousel-item">
                                <article class="home-testimonial-card mx-auto">
                                    <div class="home-testimonial-card__quote"><i class="fas fa-quote-left"></i></div>
                                    <p class="home-testimonial-card__text">I feel safe, respected, and genuinely cared for. This has become a true home away from home with a warm and welcoming community.</p>
                                    <div class="home-testimonial-card__footer">
                                        <div class="home-testimonial-card__stars">
                                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                                        </div>
                                        <div class="home-testimonial-card__author">
                                            <img src="images/testimonial3.jpg" alt="Eleanor Davis" onerror="this.src='https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=84&h=84&fit=crop&crop=face'">
                                            <div>
                                                <h6>Eleanor Davis</h6>
                                                <small>Resident for 1 year</small>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                        <button class="carousel-control-prev home-testimonials__control" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></button>
                        <button class="carousel-control-next home-testimonials__control" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></button>
                        <div class="carousel-indicators home-testimonials__indicators mt-4 justify-content-center d-flex">
                            <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="0" class="active"></button>
                            <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="1"></button>
                            <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="2"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5"><a href="testimonials.php" class="btn btn-primary btn-lg px-5 py-3">Read More Testimonials</a></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>
    <script>
        window.addEventListener('load', function() {
            const preloader = document.getElementById('preloader');
            if (preloader) {
                setTimeout(function() { preloader.classList.add('hidden'); }, 1000);
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const heroCarousel = document.getElementById('heroCarousel');
            if (heroCarousel) {
                new bootstrap.Carousel(heroCarousel, { interval: 5000, pause: 'hover', wrap: true, keyboard: true });
            }
            const testimonialsCarousel = document.getElementById('testimonialsCarousel');
            if (testimonialsCarousel) {
                new bootstrap.Carousel(testimonialsCarousel, { interval: 6000, pause: 'hover', wrap: true });
            }
        });
    </script>
</body>
</html>

