<?php include('../header/header.php'); ?>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5 animate-on-scroll" data-animation="animate__fadeInUp">
            <h2 class="fw-bold">Get In Touch</h2>
            <div class="bg-primary mx-auto" style="width: 50px; height: 3px;"></div>
            <p class="text-muted mt-3">Have questions? We'd love to hear from you.</p>
        </div>
        
        <div class="row g-5">
            <div class="col-md-6 animate-on-scroll" data-animation="animate__fadeInLeft">
                <div class="card border-0 shadow-sm p-4">
                    <form>
                        <div class="mb-3">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" placeholder="name@example.com">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Subject</label>
                            <input type="text" class="form-control" placeholder="How can we help?">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Message</label>
                            <textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
                        </div>
                        <button type="button" class="btn btn-primary w-100 py-2 fw-bold">Send Message</button>
                    </form>
                </div>
            </div>
            
            <div class="col-md-6 animate-on-scroll" data-animation="animate__fadeInRight">
                <div class="mb-5">
                    <h4 class="fw-bold mb-4">Contact Information</h4>
                    <div class="d-flex mb-3">
                        <i class="fas fa-map-marker-alt text-primary fa-lg me-3 mt-1"></i>
                        <p class="mb-0">Nairobi CBD, Kenya</p>
                    </div>
                    <div class="d-flex mb-3">
                        <i class="fas fa-phone-alt text-primary fa-lg me-3 mt-1"></i>
                        <p class="mb-0">+254701932255</p>
                    </div>
                    <div class="d-flex mb-3">
                        <i class="fas fa-envelope text-primary fa-lg me-3 mt-1"></i>
                        <p class="mb-0">info@hessarcollege.edu</p>
                    </div>
                </div>

                <div class="mb-5">
                    <h4 class="fw-bold mb-4">Our Services</h4>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Computer Repairing</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Network Installation</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Printing & Stationaries</li>
                    </ul>
                </div>
                
                <h4 class="fw-bold mb-4">Our Location</h4>
                <div class="ratio ratio-16x9 rounded shadow-sm overflow-hidden">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15955.255554101!2d36.81432497645161!3d-1.2863897746408287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d57187e145%3A0x633116892e8a1563!2sNairobi%20Central%2C%20Nairobi!5e0!3m2!1sen!2ske!4v1711360000000!5m2!1sen!2ske" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include('../footer/footer.php'); ?>
