<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="row g-0">
                    <div class="col-md-5 bg-primary text-white p-5 d-flex flex-column justify-content-between" style="background: linear-gradient(135deg, #1a2940 0%, #2f4858 100%) !important;">
                        <div>
                            <h2 class="fw-bold font-outfit mb-3">Get In Touch</h2>
                            <p class="text-white-50 text-sm">Have questions about university registration, scholarships, or mentoring? Our support team is here to help you.</p>
                        </div>
                        
                        <div class="contact-info-list my-4">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fa-solid fa-envelope fs-5 me-3 text-warning"></i>
                                <span class="text-sm">support@boafo.org</span>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <i class="fa-solid fa-phone fs-5 me-3 text-warning"></i>
                                <span class="text-sm">+233 (0) 50 123 4567</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="fa-solid fa-location-dot fs-5 me-3 text-warning"></i>
                                <span class="text-sm">Accra, Ghana</span>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <a href="#" class="btn btn-sm btn-icon text-white bg-white-10"><i class="fa-brands fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-sm btn-icon text-white bg-white-10"><i class="fa-brands fa-twitter"></i></a>
                            <a href="#" class="btn btn-sm btn-icon text-white bg-white-10"><i class="fa-brands fa-instagram"></i></a>
                        </div>
                    </div>

                    <div class="col-md-7 p-5 bg-white">
                        <h3 class="fw-bold font-outfit text-dark mb-4">Send Us A Message</h3>
                        
                        <form action="<?= APP_URL ?>/contact" method="POST">
                            <?= csrf_field() ?>
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label text-sm fw-medium">Your Name</label>
                                    <input type="text" class="form-control rounded-3" id="name" name="name" required placeholder="John Doe">
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label text-sm fw-medium">Email Address</label>
                                    <input type="email" class="form-control rounded-3" id="email" name="email" required placeholder="john@example.com">
                                </div>
                                <div class="col-12">
                                    <label for="subject" class="form-label text-sm fw-medium">Subject</label>
                                    <input type="text" class="form-control rounded-3" id="subject" name="subject" required placeholder="How can we help you?">
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label text-sm fw-medium">Message</label>
                                    <textarea class="form-control rounded-3" id="message" name="message" rows="4" required placeholder="Type your message here..."></textarea>
                                </div>
                                <div class="col-12 mt-4">
                                    <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm w-100 py-2 font-outfit fw-bold">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
