@extends('layout.front.master')

@section('content')
<div role="main" class="main">

    {{-- Hero Section --}}
    <section class="section bg-primary curved-border position-relative border-0 m-0" style="min-height: 60vh;">
        <div class="container pt-5 mt-5">
            <div class="row justify-content-center pt-5 mt-5">
                <div class="col-lg-8 text-center pt-3">
                    <h1 class="text-color-light font-weight-extra-bold text-10 line-height-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ __('Contact Us') }}</h1>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                        <p class="text-color-light opacity-6 text-4 pb-3 mb-4">{{ __('Get in touch with us') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Contact Form Section --}}
    <section class="section section-height-5 bg-primary curved-border curved-border-top overflow-hidden border-0 m-0">
        <div class="custom-animated-circles custom-animated-circles-pos-2">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div class="container pb-5 mb-5">
            <div class="row pb-2 mb-4">
                <div class="col text-center">
                    <h2 class="text-color-light font-weight-bold text-8 mb-2">{{ __('Send Us a Message') }}</h2>
                    <p class="text-color-light opacity-6 text-4">{{ __('We\'d love to hear from you. Send us a message and we\'ll respond as soon as possible.') }}</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <form class="contact-form custom-form-style-1 form-errors-light" action="{{ route('front.contact.store') }}" method="POST">
                        @csrf
                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>{{ __('Success!') }}</strong> {{ __('Your message has been sent to us.') }}
                        </div>

                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your message.') }}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>

                        <div class="row">
                            <div class="form-group col-lg-6 mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control" name="name" placeholder="{{ __('Your Name') }}" required>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your phone.') }}" maxlength="100" class="form-control" name="phone" id="phone" placeholder="{{ __('Phone') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="email" value="" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control" name="email" placeholder="{{ __('Email') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter the subject.') }}" maxlength="100" class="form-control" name="subject" id="subject" placeholder="{{ __('Subject') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-4">
                                <textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="8" class="form-control" name="message" id="message" placeholder="{{ __('Your Message') }}" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col text-center">
                                <input type="submit" value="{{ __('SEND MESSAGE') }}" class="btn btn-dark btn-modern custom-secondary-font text-3 px-5 py-3" data-loading-text="{{ __('Loading...') }}">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- Contact Information --}}
    <section class="section m-0 border-0">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-4 text-center mb-4 mb-md-0">
                    <div class="feature-box feature-box-style-2">
                        <div class="feature-box-icon">
                            <i class="fas fa-map-marker-alt text-color-primary text-10"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-bold mb-2">{{ __('Address') }}</h4>
                            <p class="mb-0">{{ config('site.contact.address', '123 Porto Drive, Suite 10B, Vista, New York, 99123') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center mb-4 mb-md-0">
                    <div class="feature-box feature-box-style-2">
                        <div class="feature-box-icon">
                            <i class="fas fa-phone text-color-primary text-10"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-bold mb-2">{{ __('Phone') }}</h4>
                            <p class="mb-0"><a href="tel:{{ config('site.contact.phone') }}">{{ config('site.contact.phone') }}</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="feature-box feature-box-style-2">
                        <div class="feature-box-icon">
                            <i class="fas fa-envelope text-color-primary text-10"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-bold mb-2">{{ __('Email') }}</h4>
                            <p class="mb-0"><a href="mailto:{{ config('site.contact.email') }}">{{ config('site.contact.email') }}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection