@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', config('site.contact.page_subtitle') . ' ' . 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') . ' - ' . __('Contacto'))
@section('og_description', config('site.contact.page_subtitle'))
@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') . ' - ' . __('Contacto'))
@section('twitter_description', config('site.contact.page_subtitle'))
@section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))

@section('content')

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

    {{-- Page Header --}}
    <section class="custom-page-header-1 page-header page-header-modern page-header-lg bg-primary border-0 z-index-1 my-0">
        <div class="custom-page-header-1-wrapper overflow-hidden">
            <div class="py-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800" style="background-color: #847266 !important;">
                <div class="container py-3 my-3">
                    <div class="row">
                        <div class="col-md-12 align-self-center p-static text-center">
                            <div class="overflow-hidden mb-2">
                                <h1 class="font-weight-black text-12 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1200">{{ __('Contact') }}</h1>
                            </div>
                        </div>
                        <div class="col-md-12 align-self-center">
                            <div class="overflow-hidden">
                                <ul class="custom-breadcrumb-style-1 breadcrumb breadcrumb-light custom-font-secondary d-block text-center custom-ls-1 text-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1450">
                                    <li class="text-transform-none"><a href="{{ route('front.homepage') }}" class="text-decoration-none">{{ __('Home') }}</a></li>
                                    <li class="text-transform-none active">{{ __('Contact') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="custom-page-wrapper pt-5 pb-1" style="background-color: #efebe4;">
        <div class="spacer py-4 my-5"></div>
        <div class="container container-xl-custom pb-5 mb-5">
            <div class="row pb-3">
                <div class="col-lg-6 position-relative">

                    <div class="overflow-hidden mb-2">
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1500">{{ __('ESTAMOS AQUÍ PARA AYUDARTE') }}</h2>
                    </div>
                    <div class="overflow-hidden mb-4">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1700">{{ __('Contáctanos para más información sobre tu evento') }}</h3>
                    </div>

                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2100">{{ __('Estamos aquí para ayudarte. Si tienes alguna pregunta sobre nuestro mobiliario o servicios para eventos, no dudes en contactarnos.') }}</p>
                    <p class="text-3-5 pb-2 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300">{{ __('Nuestro equipo está disponible para responder tus consultas, brindarte cotizaciones personalizadas y ayudarte a encontrar las mejores soluciones para tu celebración.') }}</p>
                    <div class="row">
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2500">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mb-0">{{ __('Teléfono') }}</h4>
                            <a href="tel:{{ config('site.contact.phone_number') }}" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.phone') }}</a>
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-0">{{ __('WhatsApp') }}</h4>
                            <a href="https://wa.me/{{ str_replace('+', '', config('site.contact.phone_number')) }}" target="_blank" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.phone') }}</a>
                        </div>
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2700">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mt-lg-0 mb-0">{{ __('Ubicación') }}</h4>
                            <p class="mb-0">{{ config('site.contact.address.city', 'San Miguel de Tucumán, Tucumán') }}</p>
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-0">{{ __('Email') }}</h4>
                            <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.email') }}</a>
                        </div>
                        {{-- <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2900">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mt-lg-0 mb-0">{{ __('Horarios de Atención') }}</h4>
                            <p class="mb-0">{{ config('site.contact.schedule', 'Lun - Sáb 9:00am - 6:00pm') }}<br>{{ __('Domingo - CERRADO') }}</p>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="overflow-hidden mb-4 mt-4">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-7 line-height-2 mb-0 pt-3 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="2600">{{ __('Send a Message') }}</h3>
                    </div>
                    <form class="contact-form custom-form-style-1 appear-animation" action="{{ route('front.contact.store') }}" method="POST" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2800">
                        @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 mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control border-radius-0" name="name" id="name" required placeholder="{{ __('Name') }} *">
                            </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 border-radius-0" name="email" id="email" required placeholder="{{ __('E-mail') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your phone number.') }}" maxlength="100" class="form-control border-radius-0" name="phone" id="phone" required placeholder="{{ __('Phone') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-4">
                                <textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="5" class="form-control border-radius-0" name="message" id="message" required placeholder="{{ __('Message') }} *"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-0">
                                <button type="submit" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3" data-loading-text="{{ __('Loading...') }}">{{ __('Enviar') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



</div>

@endsection