@include('includes.header')

<!-- page title -->
<section class="page-title-section overlay" data-background="images/backgrounds/page-title.jpg">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <ul class="list-inline custom-breadcrumb mb-2">
                    <li class="list-inline-item"><a class="h2 text-primary font-secondary"
                            href="{{ route('home') }}">Home</a></li>
                    <li class="list-inline-item text-white h3 font-secondary nasted">Contact Us</li>
                </ul>
                <p class="text-lighten mb-0">Get in touch with Bright Eagles for program inquiries, partnerships, or to
                    learn how you can support our youth development initiatives.</p>
            </div>
        </div>
    </div>
</section>
<!-- /page title -->

<!-- contact -->
<section class="section bg-gray">
    <div class="container">
        <div class="row">

            <div class="col-lg-12">
                <h2 class="section-title">Get In Touch</h2>
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
            </div>

        </div>
        <div class="row">
            <div class="col-lg-7 mb-4 mb-lg-0">
                <form action="{{ route('contact.send') }}" method="POST">

                    @csrf
                    <div class="form-row">
                        <div class="col-md-6">
                            <input type="text" class="form-control mb-3" id="name" name="name" placeholder="Your Name"
                                required>
                        </div>
                        <div class="col-md-6">
                            <input type="tel" class="form-control mb-3" id="phone" name="phone"
                                placeholder="Phone Number" required>
                        </div>
                    </div>
                    <input type="email" class="form-control mb-3" id="email" name="email" placeholder="Your Email"
                        required>
                    <select class="form-control mb-3" name="subject" required>
                        <option value="" disabled selected>Select Inquiry Type</option>
                        <option value="Program Information">Program Information</option>
                        <option value="Registration">Registration</option>
                        <option value="Partnership">Partnership</option>
                        <option value="Donation">Donation</option>
                        <option value="Volunteering">Volunteering</option>
                        <option value="Other">Other</option>
                    </select>
                    <textarea name="message" id="message" class="form-control mb-3" placeholder="Your Message" rows="5"
                        required></textarea>
                    <button type="submit" class="btn btn-primary btn-block">SEND MESSAGE</button>
                </form>
            </div>
            <div class="col-lg-5">
                <div class="bg-white p-4 rounded shadow-sm mb-4">
                    <h4 class="mb-4">Contact Information</h4>
                    <!-- <div class="d-flex mb-4">
            <i class="ti-location-pin text-primary mt-1 mr-3"></i>
            <div>
              <h5 class="mb-1">Address</h5>
              <p class="mb-0">123 Youth Development Avenue<br>Sandton, Johannesburg<br>South Africa</p>
            </div>
          </div> -->
                    <div class="d-flex mb-4">
                        <i class="ti-mobile text-primary mt-1 mr-3"></i>
                        <div>
                            <h5 class="mb-1">Phone</h5>
                            <p class="mb-0">
                                <a href="tel:+27679117413">+27 67 911 7413</a><br>
                                (Mon-Fri, 8:30am-4:30pm)
                            </p>
                        </div>
                    </div>
                    <div class="d-flex mb-4">
                        <i class="ti-email text-primary mt-1 mr-3"></i>
                        <div>
                            <h5 class="mb-1">Email</h5>
                            <p class="mb-0">
                                <a href="mailto:info@brighteagles.co.za">info@brighteagles.co.za</a><br>
                                <a href="mailto:bookings@brighteagles.co.za">bookings@brighteagles.co.za</a>
                            </p>
                        </div>
                    </div>
                    <div class="d-flex">
                        <i class="ti-time text-primary mt-1 mr-3"></i>
                        <div>
                            <h5 class="mb-1">Operating Hours</h5>
                            <p class="mb-0">
                                Monday-Friday: 8:30am - 4:30pm<br>
                                Saturday: 9:00am - 1:00pm<br>
                                Sunday: Closed
                            </p>
                        </div>
                    </div>
                </div>

                <div class="social-links text-center">
                    <a href="https://facebook.com/brighteagles" class="btn btn-outline-primary btn-sm mx-1 mb-2"
                        target="_blank">
                        <i class="ti-facebook mr-1"></i> Facebook
                    </a>
                    <a href="https://instagram.com/brighteagles" class="btn btn-outline-primary btn-sm mx-1 mb-2"
                        target="_blank">
                        <i class="ti-instagram mr-1"></i> Instagram
                    </a>
                    <a href="https://wa.me/27679117413" class="btn btn-outline-primary btn-sm mx-1 mb-2"
                        target="_blank">
                        <i class="ti-comments mr-1"></i> WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /contact -->

<!-- gmap -->
<!-- <section class="section pt-0"> -->
<!-- Google Map -->
<!-- <div id="map_canvas" data-latitude="-26.105200" data-longitude="28.056700"></div>
</section> -->
<!-- /gmap -->

@include('includes.footer')