@extends('layout.front.master')

@section('title', __('Contact'))
@section('description', config('site.contact.page_subtitle', 'Contact Us') . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email'))
@section('keywords', config('site.seo.keywords') . ', contacto, cotización, consulta, presupuesto')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contact'))
@section('og_description', config('site.contact.page_subtitle', 'Contact Us'))
@section('og_image', asset(config('site.og.image')))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Contact'))
@section('twitter_description', config('site.contact.page_subtitle', 'Contact Us'))
@section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))

@section('content')

<div role="main" class="main">

    <div class="container pb-lg-5">
        <div class="row align-items-end py-5">
            <div class="col-lg-7 text-center text-lg-start">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2"><span class="d-inline-flex py-1 px-2">{{ __('Contact Us') }}</span></span>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <h2 class="text-9 text-lg-12 font-weight-semibold line-height-1 mb-3 mt-3 pe-lg-5 me-lg-5">{{ config('site.contact.page_title', "Let's Connect and Create Something Great Together.") }}</h2>
                </div>
            </div>
            <div class="col-lg-5 text-center text-lg-start">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <p class="mb-0">{{ config('site.contact.page_subtitle', "Whether you're interested in a web project, want to collaborate, or just want to say hello, I'd love to hear from you. Drop me a message and let's start a conversation.") }}</p>
                </div>
            </div>
        </div>
        <div class="row pt-lg-2 pb-5">
            <div class="col-lg-7">
                <p class="mb-5 text-dark font-weight-medium d-flex">
                    <img src="{{ asset('template/img/demos/accounting-2/icons/icon-16.svg') }}" width="30" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                    {{ config('site.contact.availability_text', 'Always Open to New Projects - Whether it\'s web development, photography, or just connecting, I\'m here to help.') }}
                </p>

                <form class="contact-form pt-3" 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">
                            <label class="form-label font-weight-bold text-uppercase text-dark mb-1 text-2">{{ __('Your Name') }} *</label>
                            <input type="text" value="" placeholder="{{ __('Enter your name') }}" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="name" required>
                        </div>
                        <div class="form-group col-lg-6">
                            <label class="form-label font-weight-bold text-uppercase text-dark mb-1 text-2">{{ __('Email Address') }}</label>
                            <input type="email" value="" placeholder="{{ __('Enter your e-mail address') }}" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="email" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label class="form-label font-weight-bold text-uppercase text-dark mb-1 text-2">{{ __('Phone Number') }}</label>
                            <input type="tel" value="" placeholder="{{ __('Enter your phone number') }}" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="phone">
                        </div>
                        <div class="form-group col-lg-6">
                            <label class="form-label font-weight-bold text-uppercase text-dark mb-1 text-2">{{ config('site.contact.company_label', 'Project Type') }}</label>
                            <input type="text" value="" placeholder="{{ config('site.contact.company_placeholder', 'Web Development, Photography, Collaboration, etc.') }}" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="company">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col">
                            <label class="form-label font-weight-bold text-uppercase text-dark mb-1 text-2">{{ __('Additional Information') }}</label>
                            <textarea maxlength="5000" placeholder="{{ __('Enter Additional Information or Questions') }}" rows="8" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="message"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col">
                            <button type="submit" class="btn btn-rounded btn-dark box-shadow-7 font-weight-medium btn-swap-1" data-clone-element="1">
                                <span>{{ __('Submit') }} <i class="fa-solid fa-arrow-right ms-2 p-relative left-10"></i></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-5 text-center text-lg-start mt-5 mt-lg-0">
                <div class="appear-animation h-100" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <div class="card p-lg-1 custom-card-1 border-radius-2 bg-color-tertiary border-0 h-100">
                        <div class="card-body overflow-hidden p-lg-5">
                            @if(config('site.contact.address.line1'))
                            <strong class="d-block text-4-5 text-dark mb-1">{{ config('site.contact.location_label', 'Location') }}</strong>
                            <p class="mb-0 text-3-5 line-height-7">{{ config('site.contact.address.line1') }}</p>
                            @if(config('site.contact.address.line2'))
                            <p class="mb-0 text-3-5 line-height-7">{{ config('site.contact.address.line2') }}</p>
                            @endif
                            @if(config('site.contact.address.map_url'))
                                <p class="mb-0 text-3-5 line-height-7"><a href="{{ config('site.contact.address.map_url') }}" target="_blank" class="text-color-secondary text-color-hover-primary font-weight-semi-bold text-decoration-underline">{{ __('Get Directions') }}</a></p>
                            @endif
                            @endif

                            <strong class="d-block text-4-5 text-dark mb-1 mt-5">{{ __('E-mail') }}</strong>
                            <p class="mb-0 text-3-5 line-height-7 pb-3"><a href="mailto:{{ config('site.contact.email') }}" class="text-color-secondary text-color-hover-primary font-weight-semi-bold text-decoration-underline">{{ config('site.contact.email') }}</a></p>

                            @if(config('site.contact.phone'))
                            <strong class="d-block text-4-5 text-dark mb-1 mt-4">{{ __('Phone') }}</strong>
                            <p class="mb-0 text-3-5 line-height-7"><a href="tel:{{ config('site.contact.phone_number') }}" class="text-color-secondary text-color-hover-primary font-weight-semi-bold text-decoration-underline">{{ config('site.contact.phone') }}</a></p>
                            @endif

                            <div class="mt-5">
                                <strong class="d-block text-4-5 text-dark mb-3">{{ config('site.contact.social_label', 'Follow Me') }}</strong>
                                <ul class="social-icons social-icons-clean social-icons-medium">
                                    @foreach(config('site.social_media') as $key => $social)
                                        @if($social['active'] && in_array($key, ['instagram', 'x', 'facebook', 'youtube', 'linkedin']))
                                            <li class="social-icons-{{ $key }}">
                                                <a href="{{ $social['url'] }}" target="_blank" title="{{ $social['title'] }}" class="text-decoration-none">
                                                    <i class="{{ $social['icon'] }}"></i>
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>

                            <p class="mt-5 text-3 text-color-default text-center">
                                * {{ config('site.contact.response_time', 'I typically reply within 24-48 hours. Looking forward to hearing from you!') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="section section-background m-0 p-relative overflow-hidden custom-el-12 border-radius-2 mt-5" style="background-image: url({{ asset('template/img/demos/accounting-2/bg/bg-1.jpg') }});">
            <div class="custom-pos-1 p-absolute">
                <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/svg/curves.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-quaternary opacity-2'}" >
            </div>
            <div class="custom-pos-2 p-absolute">
                <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/bg/bg-2.png') }}" alt="" >
            </div>
        </section>

    </div>

</div>

@endsection