@extends('layouts.frontend.app')

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

@section('content')
<div class="container py-5 Contact">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow border-0 rounded-4">
                <div class="card-body p-3 p-lg-5">
                    <h2 class="fw-bold text-center mb-2 mb-lg-4">Contact Us</h2>
                    <p class="text-center text-muted mb-5">
                        Have questions? We'd love to hear from you. Send us a message and we’ll respond as soon as possible.
                    </p>

                    <form class="dynamic-form" method="post" action="{{route('contact.info')}}">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Full Name *</label>
                                <input type="text" name="name" class="form-control rounded-3 shadow-sm" placeholder="Enter your name">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email Address *</label>
                                <input type="email" name="email" class="form-control rounded-3 shadow-sm" placeholder="Enter your email">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Phone Number *</label>
                                <input type="text" name="phone" class="form-control rounded-3 shadow-sm" placeholder="Enter phone number">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Subject *</label>
                                <input type="text" name="subject" class="form-control rounded-3 shadow-sm" placeholder="Subject">
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Message *</label>
                                <textarea name="message" rows="5" class="form-control rounded-3 shadow-sm" placeholder="Type your message here..."></textarea>
                            </div>

                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary  px-5 rounded-pill shadow-sm">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>


@endsection