<?php
require_once __DIR__ . '/includes/auth.php';

$successMessage = '';
$errorMessage = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');

    try {
        $conn = getDBConnection();
        $sql = 'INSERT INTO contacts (name, email, phone, subject, message) VALUES (?, ?, ?, ?, ?)';
        $stmt = $conn->prepare($sql);
        $stmt->bind_param('sssss', $name, $email, $phone, $subject, $message);

        if ($stmt->execute()) {
            $successMessage = 'Thank you for your message. We will get back to you soon!';
        } else {
            $errorMessage = 'Sorry, there was an error sending your message. Please try again.';
        }

        $stmt->close();
        $conn->close();
    } catch (Throwable $exception) {
        $errorMessage = 'Sorry, there was an error sending your message. Please try again.';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - 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>
        .contact-hero {
            position: relative;
            overflow: hidden;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(18, 52, 77, 0.92), rgba(30, 95, 116, 0.78)),
                url('images/hero-image.jpg') center/cover no-repeat;
        }
        .contact-hero::before,
        .contact-hero::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .contact-hero::before {
            width: 260px;
            height: 260px;
            top: -80px;
            right: -45px;
        }
        .contact-hero::after {
            width: 190px;
            height: 190px;
            bottom: -55px;
            left: -30px;
        }
        .contact-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.2rem;
            box-shadow: 0 28px 64px rgba(5, 18, 31, 0.28);
        }
        .contact-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;
        }
        .contact-metric {
            background: rgba(255,255,255,0.96);
            border-radius: 22px;
            padding: 1.2rem;
            height: 100%;
            box-shadow: 0 16px 34px rgba(31, 51, 73, 0.08);
        }
        .contact-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;
        }
        .contact-panel,
        .contact-form-card,
        .contact-faq-card,
        .contact-cta {
            background: #fff;
            border-radius: 28px;
            padding: 2rem;
            box-shadow: 0 18px 44px rgba(31, 51, 73, 0.08);
        }
        .contact-form-card {
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            border: 1px solid rgba(18, 52, 77, 0.06);
        }
        .contact-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: 1rem;
        }
        .contact-info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .contact-info-list li {
            display: flex;
            gap: 12px;
            margin-bottom: 1rem;
            color: #3b556a;
            font-weight: 500;
        }
        .contact-info-list i {
            width: 18px;
            margin-top: 0.22rem;
            color: #159895;
            flex-shrink: 0;
        }
        .contact-info-card {
            background: linear-gradient(135deg, #f5f9fc 0%, #eef5f9 100%);
            border: 1px solid rgba(18, 52, 77, 0.05);
            border-radius: 22px;
            padding: 1.15rem;
            height: 100%;
        }
        .contact-info-card__icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #12344d 0%, #1e5f74 100%);
            color: #fff;
            font-size: 1rem;
            margin-bottom: 0.85rem;
        }
        .contact-form-card .form-label {
            font-weight: 600;
            color: #12344d;
        }
        .contact-form-card .form-control,
        .contact-form-card .form-select {
            min-height: 46px;
            border-radius: 16px;
            border-color: rgba(18, 52, 77, 0.12);
            box-shadow: none;
        }
        .contact-form-card textarea.form-control {
            min-height: 120px;
        }
        .contact-form-card .form-control:focus,
        .contact-form-card .form-select:focus {
            border-color: rgba(30, 95, 116, 0.42);
            box-shadow: 0 0 0 0.22rem rgba(30, 95, 116, 0.12);
        }
        .contact-faq-item {
            padding: 1.15rem;
            border-radius: 22px;
            background: rgba(255,255,255,0.9);
            box-shadow: 0 12px 26px rgba(31, 51, 73, 0.06);
            height: 100%;
        }
        .contact-faq-item__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.16));
            color: #12344d;
            font-size: 1.05rem;
            margin-bottom: 0.9rem;
        }
        .contact-cta {
            background: linear-gradient(135deg, #12344d 0%, #1e5f74 55%, #159895 100%);
            color: #fff;
            box-shadow: 0 24px 54px rgba(18, 52, 77, 0.18);
        }
        @media (max-width: 991.98px) {
            .contact-hero {
                min-height: auto;
                padding: 2rem 0;
            }
            .contact-hero__card,
            .contact-panel,
            .contact-form-card,
            .contact-faq-card,
            .contact-cta {
                padding: 1.5rem;
            }
        }
        @media (max-width: 767.98px) {
            html,
            body.contact-page {
                overflow-x: hidden;
            }
            body.contact-page .navbar,
            body.contact-page section {
                width: 100vw;
                max-width: 100vw;
            }
            .contact-hero {
                padding: 1.2rem 0 1.5rem;
            }
            .contact-hero__card,
            .contact-panel,
            .contact-form-card,
            .contact-faq-card,
            .contact-cta {
                border-radius: 22px;
                padding: 1.25rem;
            }
            .contact-hero__eyebrow {
                font-size: 0.66rem;
                padding: 0.48rem 0.72rem;
                margin-bottom: 0.85rem;
            }
            .contact-hero h1 {
                font-size: 1.78rem;
                line-height: 1.15;
                margin-bottom: 0.8rem !important;
            }
            .contact-hero .lead {
                font-size: 0.95rem;
                line-height: 1.58;
                margin-bottom: 1rem !important;
            }
            .contact-hero .btn {
                flex: 1 1 auto;
            }
            .contact-metric {
                padding: 1rem 0.92rem;
                border-radius: 18px;
            }
            .contact-metric__icon,
            .contact-info-card__icon,
            .contact-faq-item__icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                font-size: 0.96rem;
            }
            .contact-info-card,
            .contact-faq-item {
                border-radius: 18px;
                padding: 1rem;
            }
            .contact-form-card .form-control,
            .contact-form-card .form-select {
                min-height: 40px;
                font-size: 0.9rem;
            }
            .contact-form-card textarea.form-control {
                min-height: 96px;
            }
        }
    </style>
</head>
<body class="contact-page">
    <?php include 'includes/header.php'; ?>

    <section class="contact-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    <div class="contact-hero__card text-white text-center text-lg-start">
                        <div class="row align-items-center g-4">
                            <div class="col-lg-7">
                                <span class="contact-hero__eyebrow"><i class="fas fa-headset"></i>Care Support Desk</span>
                                <h1 class="display-5 fw-bold mb-3">We’re Here to Help With Questions, Visits, Admissions, and Care Support</h1>
                                <p class="lead mb-4">Reach out to Oldage Home for guidance about services, resident admission, facility tours, or general support. Our team is happy to assist you with clear next steps.</p>
                                <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-start">
                                    <a href="#contact-form" class="btn btn-primary">Send a Message</a>
                                    <a href="tel:+15551234567" class="btn btn-outline-light">Call Now</a>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <div class="contact-metric text-dark">
                                            <div class="contact-metric__icon"><i class="fas fa-phone-volume"></i></div>
                                            <h3 class="h5 fw-bold mb-1">Fast Response</h3>
                                            <p class="mb-0 text-muted small">Quick help for families, visitors, and new inquiries.</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="contact-metric text-dark">
                                            <div class="contact-metric__icon"><i class="fas fa-map-marked-alt"></i></div>
                                            <h3 class="h5 fw-bold mb-1">Easy Access</h3>
                                            <p class="mb-0 text-muted small">Simple ways to reach us by phone, email, or form.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row g-4 align-items-start">
                <div class="col-lg-5">
                    <div class="contact-panel h-100">
                        <span class="contact-tag"><i class="fas fa-address-book"></i>Contact Details</span>
                        <h2 class="fw-bold mb-3">Get In Touch With Our Team</h2>
                        <p class="text-muted mb-4">Whether you are exploring care options, planning a visit, or have questions about life at Oldage Home, we’re here to help.</p>

                        <ul class="contact-info-list mb-4">
                            <li><i class="fas fa-map-marker-alt"></i><span>123 Care Street, Wellness City, WC 12345</span></li>
                            <li><i class="fas fa-phone"></i><span>(555) 123-4567</span></li>
                            <li><i class="fas fa-envelope"></i><span>info@oldagehome.com</span></li>
                            <li><i class="fas fa-clock"></i><span>Visiting hours: 9:00 AM to 8:00 PM daily</span></li>
                        </ul>

                        <div class="row g-3">
                            <div class="col-sm-6">
                                <div class="contact-info-card">
                                    <div class="contact-info-card__icon"><i class="fas fa-user-clock"></i></div>
                                    <h5 class="fw-bold mb-2">General Support</h5>
                                    <p class="text-muted mb-0">Questions about services, availability, and day-to-day support.</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="contact-info-card">
                                    <div class="contact-info-card__icon"><i class="fas fa-door-open"></i></div>
                                    <h5 class="fw-bold mb-2">Admissions Help</h5>
                                    <p class="text-muted mb-0">Guidance for families planning resident admission and tours.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="contact-form-card" id="contact-form">
                        <span class="contact-tag"><i class="fas fa-paper-plane"></i>Send a Message</span>
                        <h2 class="fw-bold mb-3">Tell Us How We Can Help</h2>
                        <p class="text-muted mb-4">Share your details and message below. Our team will get back to you as soon as possible with the right information or support.</p>

                        <?php if ($successMessage !== ''): ?>
                            <div class="alert alert-success"><?php echo htmlspecialchars($successMessage); ?></div>
                        <?php endif; ?>

                        <?php if ($errorMessage !== ''): ?>
                            <div class="alert alert-danger"><?php echo htmlspecialchars($errorMessage); ?></div>
                        <?php endif; ?>

                        <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" class="contact-form">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Full Name *</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control" id="phone" name="phone">
                                </div>
                                <div class="col-md-6">
                                    <label for="subject" class="form-label">Subject *</label>
                                    <select class="form-select" id="subject" name="subject" required>
                                        <option value="">Select Subject</option>
                                        <option value="General Inquiry">General Inquiry</option>
                                        <option value="Admission">Admission</option>
                                        <option value="Services">Services</option>
                                        <option value="Facilities">Facilities</option>
                                        <option value="Visiting">Visiting</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">Message *</label>
                                    <textarea class="form-control" id="message" name="message" rows="5" required placeholder="Tell us what you would like to know or how we can support you."></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="contact-faq-card">
                <div class="row text-center mb-4">
                    <div class="col">
                        <span class="contact-tag"><i class="fas fa-circle-question"></i>Quick Answers</span>
                        <h2 class="fw-bold mb-2">Frequently Asked Questions</h2>
                        <p class="text-muted mb-0">A few common questions families and visitors often ask before reaching out.</p>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-md-6 col-xl-3">
                        <div class="contact-faq-item">
                            <div class="contact-faq-item__icon"><i class="fas fa-heart-pulse"></i></div>
                            <h5 class="fw-bold mb-2">What services do you offer?</h5>
                            <p class="text-muted mb-0">We provide medical care, personal support, nutrition, activities, therapy, and 24/7 resident assistance.</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="contact-faq-item">
                            <div class="contact-faq-item__icon"><i class="fas fa-file-signature"></i></div>
                            <h5 class="fw-bold mb-2">How do admissions work?</h5>
                            <p class="text-muted mb-0">You can use our admission form or contact us directly to schedule a tour and discuss care requirements.</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="contact-faq-item">
                            <div class="contact-faq-item__icon"><i class="fas fa-user-group"></i></div>
                            <h5 class="fw-bold mb-2">When can families visit?</h5>
                            <p class="text-muted mb-0">Regular visiting hours are from 9:00 AM to 8:00 PM daily, with special arrangements available.</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="contact-faq-item">
                            <div class="contact-faq-item__icon"><i class="fas fa-shield-heart"></i></div>
                            <h5 class="fw-bold mb-2">Do you accept insurance?</h5>
                            <p class="text-muted mb-0">We work with many plans, and our team can help you understand available coverage options.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-5">
        <div class="container">
            <div class="contact-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">Need Personal Guidance Before You Decide?</h2>
                        <p class="mb-0 text-white-50">Our staff can walk you through services, care options, visit planning, and resident admission with calm, practical support.</p>
                    </div>
                    <div class="col-lg-4">
                        <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-end">
                            <a href="admission.php" class="btn btn-light">Admission Help</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>