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

<div class="hero" style="padding: 60px 0; background: linear-gradient(rgba(0, 77, 64, 0.9), rgba(0, 105, 92, 0.9)), url('assets/images/campus.jpg');">
    <div class="container">
        <h1>Contact Us</h1>
        <p>We are here to help you with your admission queries.</p>
    </div>
</div>

<div class="container" style="padding: 60px 15px;">
    <div style="display: flex; flex-wrap: wrap; gap: 40px;">
        
        <div style="flex: 1; min-width: 300px;">
            <h2 style="color: var(--primary-color); margin-bottom: 30px;">Get in Touch</h2>
            
            <div style="margin-bottom: 30px; display: flex;">
                <div style="width: 50px; height: 50px; background: #e0f2f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); margin-right: 20px;">
                    <i class="fas fa-map-marker-alt fa-lg"></i>
                </div>
                <div>
                    <h4 style="margin: 0 0 5px;">Visit Us</h4>
                    <p style="margin: 0; color: #666;">1km Defence Road, Lahore, Pakistan</p>
                </div>
            </div>

            <div style="margin-bottom: 30px; display: flex;">
                <div style="width: 50px; height: 50px; background: #e0f2f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); margin-right: 20px;">
                    <i class="fas fa-phone fa-lg"></i>
                </div>
                <div>
                    <h4 style="margin: 0 0 5px;">Call Us</h4>
                    <p style="margin: 0; color: #666;">+92 42 111 865 865</p>
                    <p style="margin: 0; color: #666;">+92 321 1234567</p>
                </div>
            </div>

            <div style="margin-bottom: 30px; display: flex;">
                <div style="width: 50px; height: 50px; background: #e0f2f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); margin-right: 20px;">
                    <i class="fas fa-envelope fa-lg"></i>
                </div>
                <div>
                    <h4 style="margin: 0 0 5px;">Email Us</h4>
                    <p style="margin: 0; color: #666;">admissions@uol.edu.pk</p>
                    <p style="margin: 0; color: #666;">info@uol.edu.pk</p>
                </div>
            </div>
            
            <div style="margin-top: 40px;">
                <h3 style="margin-bottom: 20px;">Admission Office Hours</h3>
                <p><strong>Monday - Friday:</strong> 8:00 AM - 5:00 PM</p>
                <p><strong>Saturday:</strong> 9:00 AM - 1:00 PM</p>
                <p><strong>Sunday:</strong> Closed</p>
            </div>
        </div>

        <div style="flex: 1; min-width: 300px;">
            <div class="card">
                <h3 style="color: var(--primary-color); margin-bottom: 20px;">Send a Message</h3>
                <form>
                    <div class="form-group">
                        <label>Your Name</label>
                        <input type="text" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Email Address</label>
                        <input type="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Subject</label>
                        <input type="text" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Message</label>
                        <textarea class="form-control" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn-primary btn-block">Send Message</button>
                </form>
            </div>
        </div>

    </div>
</div>

<div style="width: 100%; height: 400px; background-color: #eee;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3405.663186177726!2d74.23891731510344!3d31.395874581410976!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3919018a8ea548c1%3A0x4a52db69c2c814f!2sThe%20University%20of%20Lahore!5e0!3m2!1sen!2s!4v1634567890123!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

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