@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', config('site.contact.page_subtitle') . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email') . ' | ' . config('site.contact.address'))
@section('keywords', config('site.seo.keywords') . ', contacto, cotización, consulta, presupuesto, teléfono, email, dirección')

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

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', __('Contacto') . ' | ' . config('site.name'))
@section('twitter_description', config('site.contact.page_subtitle'))
@section('twitter_image', asset(config('site.og.image')))

@section('content')

<div>

    {{-- Dynamic Header --}}
    @php
        $pageTitle = __('Contacto');
        $breadcrumbItems = [
            ['url' => url('/'), 'label' => __('Inicio')],
            ['url' => null, 'label' => __('Contacto')]
        ];
        $pageSubtitle = config('site.contact.page_subtitle');
        $backgroundImage = asset('cd-project/img/demos/construction/backgrounds/background-2.jpg');
    @endphp
    @include('modules.cd-base.frontend.partials.dynamic-header', [
        'pageTitle' => $pageTitle,
        'breadcrumbItems' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle,
        'backgroundImage' => $backgroundImage
    ])

    <div class="container container-xl-custom pt-4 pb-5 pb-sm-0 my-5">
        <div class="row pb-2 mb-5">
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">
                <div class="row">
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('LLÁMANOS') }}</h3>
                        <a href="tel:{{ config('site.contact.phone_number', '+5493813674900') }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/phone.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ config('site.contact.phone') }}
                        </a>
                    </div>
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('ENVÍANOS UN EMAIL') }}</h3>
                        <a href="mailto:{{ config('site.contact.email') }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/email.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ config('site.contact.email') }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1600">
                <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('ENCUÉNTRANOS') }}</h3>
                <span class="d-flex align-items-center text-color-dark font-weight-bold text-3-5">
                    <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/location.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                    {{ config('site.contact.address') }}
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1400">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ __('Envíanos un Mensaje') }}</h2>
                <p class="text-3-5 font-weight-light mb-5-5">{{ __('Esta es una demostración del sistema autoadministrable Construction. Completa el formulario para explorar las funcionalidades del sistema de contacto integrado.') }}</p>
                <form class="contact-form form-style-3" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf
                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('¡Éxito!') }}</strong> {{ __('Tu mensaje ha sido enviado correctamente.') }}
                    </div>

                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('¡Error!') }}</strong> {{ __('Hubo un error al enviar tu mensaje.') }}
                        <span class="mail-error-message text-1 d-block"></span>
                    </div>

                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Por favor ingresa tu nombre.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="name" placeholder="{{ __('Tu Nombre') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="email" value="" data-msg-required="{{ __('Por favor ingresa tu dirección de email.') }}" data-msg-email="{{ __('Por favor ingresa una dirección de email válida.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="email" placeholder="{{ __('Tu Dirección de Email') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6 mb-3-5">
                            <input type="tel" value="" maxlength="20" class="form-control text-3 h-auto py-3-5" name="phone" placeholder="{{ __('Teléfono (Opcional)') }}">
                        </div>
                        <div class="form-group col-md-6 mb-3-5">
                            <select class="form-control text-3 h-auto py-3-5" name="subject" required>
                                <option value="">{{ __('Selecciona un asunto') }}</option>
                                <option value="cotizacion">{{ __('Cotización de Proyecto') }}</option>
                                <option value="consulta-general">{{ __('Consulta General') }}</option>
                                <option value="servicios">{{ __('Información sobre Servicios') }}</option>
                                <option value="proyecto">{{ __('Información sobre Proyectos') }}</option>
                                <option value="otros">{{ __('Otros') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <textarea maxlength="5000" data-msg-required="{{ __('Por favor ingresa tu mensaje.') }}" rows="8" class="form-control text-3 h-auto py-3-5" name="message" placeholder="{{ __('Cuéntanos sobre tu proyecto o consulta...') }}" required></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col">
                            <button type="submit" class="btn btn-primary btn-modern font-weight-semibold text-3-5 btn-px-4 btn-py-2 d-inline-flex align-items-center" data-loading-text="{{ __('Enviando...') }}">
                                {{ __('Enviar Mensaje') }}
                                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
                            </button>
                        </div>
                    </div>
                </form>

                {{-- Career Section --}}
                <div class="contact-career-section mt-5 pt-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">
                    <div class="card border-0 shadow-modern bg-color-grey-scale-1 p-4">
                        <p class="text-color-dark font-weight-medium text-3-5 mb-0 text-center">
                            {{ __('¿Quieres conocer más sobre el sistema?') }}
                            <br>
                            <a href="mailto:{{ config('site.contact.email') }}?subject={{ urlencode('Consulta sobre Construction') }}" class="text-decoration-underline text-color-primary text-color-hover-primary font-weight-semibold">
                                {{ __('Contáctanos') }}
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1800">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ __('Información del Demo') }}</h2>
                <p class="text-3-5 font-weight-light mb-4">{{ __('Esta es una demostración del sistema autoadministrable Construction con CMS integrado. Explora todas las funcionalidades disponibles en el panel de administración.') }}</p>
                <div class="mb-4">
                    <div class="mb-3">
                        <h5 class="font-weight-bold text-color-dark mb-2">{{ __('Horarios de Atención') }}</h5>
                        <p class="mb-1"><strong>{{ __('Lunes a Viernes:') }}</strong> 9:00 - 18:30</p>
                        <p class="mb-0"><strong>{{ __('Sábados y Domingos:') }}</strong> {{ __('Cerrado') }}</p>
                    </div>
                    <hr class="my-4">
                    <h5 class="font-weight-bold text-color-dark mb-3">{{ __('Síguenos') }}</h5>
                    <ul class="social-icons social-icons-clean social-icons-medium">
                        @foreach(config('site.social_media') as $key => $social)
                            @if($social['active'])
                                <li class="social-icons-{{ $key }}">
                                    <a href="{{ $social['url'] }}" target="_blank" title="{{ $social['title'] }}">
                                        <i class="{{ $social['icon'] }}"></i>
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                {{-- Google Maps Embed --}}
                <div class="google-map-wrapper" style="position: relative; width: 100%; height: 450px; overflow: hidden; border-radius: 4px;">
                    <div class="d-flex align-items-center justify-content-center h-100 bg-light border rounded">
                        <div class="text-center p-5">
                            <i class="fas fa-map-marker-alt text-color-primary text-10 mb-3"></i>
                            <p class="text-color-dark font-weight-medium text-4 mb-0">{{ __('Demo del Sistema Construction') }}</p>
                            <p class="text-color-grey text-3-5 mt-2 mb-0">{{ __('Esta es una demostración del sistema autoadministrable') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-relative pb-5 d-none d-xl-block">
        <div class="position-absolute transform3dy-n50 left-0">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="1500ms">
                <div class="custom-square-1 bg-primary mt-0 mb-5"></div>
            </div>
        </div>
    </div>

</div>

@endsection