@extends('master')

@section('title','Contact Us')

@section('content')
<!-- Main Content -->
<main class="flex-grow-1">
    <div class="container py-5">
        <div class="row g-4">
            <!-- Contact Form -->
            <div class="col-lg-6">
                <div class="bg-white rounded shadow p-4 p-md-5 h-100">
                    <h1 class="display-6 fw-bold mb-4">Get in Touch</h1>
                    <p class="text-muted mb-4">Have questions or feedback? We'd love to hear from you. Fill out the form below and we'll get back to you as soon as possible.</p>

                    <form action="/contact" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>

                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <input type="text" class="form-control" id="subject" name="subject" required>
                        </div>

                        <div class="mb-4">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary py-2">Send Message</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="col-lg-6">
                <div class="bg-primary bg-gradient text-white rounded shadow p-4 p-md-5 h-100 d-flex flex-column">
                    <div>
                        <h2 class="fs-2 fw-bold mb-4">Contact Information</h2>
                        <p class="mb-4">We're here to help and answer any questions you might have. We look forward to hearing from you.</p>

                        <div class="mb-4">
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-geo-alt fs-4"></i>
                                </div>
                                <div class="ms-3">
                                    <h3 class="fs-5 fw-semibold">Address</h3>
                                    <p class="mb-0">123 Learning Street, Education City, 12345</p>
                                </div>
                            </div>

                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-telephone fs-4"></i>
                                </div>
                                <div class="ms-3">
                                    <h3 class="fs-5 fw-semibold">Phone</h3>
                                    <p class="mb-0">+1 (123) 456-7890</p>
                                </div>
                            </div>

                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-envelope fs-4"></i>
                                </div>
                                <div class="ms-3">
                                    <h3 class="fs-5 fw-semibold">Email</h3>
                                    <p class="mb-0">info@example.com</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-auto">
                        <h3 class="fs-5 fw-semibold mb-3">Follow Us</h3>
                        <div class="d-flex gap-3">
                            <a href="#" class="text-white fs-5"><i class="bi bi-facebook"></i></a>
                            <a href="#" class="text-white fs-5"><i class="bi bi-twitter"></i></a>
                            <a href="#" class="text-white fs-5"><i class="bi bi-instagram"></i></a>
                            <a href="#" class="text-white fs-5"><i class="bi bi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection