@extends('layout.front.master')

@section('title', __('Contacto'))
@php
    $contactDescription = config('site.contact.meta_description', 'Escribime para consultas sobre proyectos, colaboraciones o simplemente para conectar.');
    if (config('site.contact.phone')) {
        $contactDescription .= ' | ' . config('site.contact.phone');
    }
    if (config('site.contact.email')) {
        $contactDescription .= ' | ' . config('site.contact.email');
    }
@endphp
@section('description', $contactDescription)
@section('keywords', config('site.seo.keywords') . ', contacto ' . strtolower(config('site.name')) . ', consulta profesional, propuestas de colaboración, contratar profesional, proyectos personales')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contacto'))
@section('og_description', config('site.contact.meta_description', 'Escribime para consultas sobre proyectos, colaboraciones o simplemente para conectar.'))
@section('og_image', brand_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.meta_description', 'Escribime para consultas sobre proyectos, colaboraciones o simplemente para conectar.'))
@section('twitter_image', brand_twitter_image())

@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 rounded-pill text-uppercase font-weight-semibold px-3 py-2" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    <span class="d-inline-flex py-1 px-2">{{ __('Contacto') }}</span>
                </span>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <h2 class="font-weight-bold line-height-2 mb-3 mt-3 pe-lg-5 me-lg-5" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2.2rem, 5vw, 3.8rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">{{ config('site.contact.page_title', 'Escribime.') }}</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" style="color: rgba(255, 255, 255, 0.75) !important; line-height: 1.6;">{{ config('site.contact.page_subtitle', 'No vendo servicios acá. Pero si tenés un proyecto interesante, una idea que vale la pena, o simplemente querés conectar — escribime.') }}</p>
                </div>
            </div>
        </div>
        <div class="row pt-lg-2 pb-5">
            <div class="col-lg-7">
                <p class="mb-5 font-weight-semibold d-flex align-items-center" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif !important;">
                    <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-primary me-2'}" />
                    {{ config('site.contact.availability_text', '¿Querés saber más? Escribime.') }}
                </p>

                <form class="contact-form js-recaptcha-form pt-3" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf
                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('¡Gracias!') }}</strong> {{ config('site.contact.success_message', 'Tu mensaje se envió correctamente. Te responderé pronto.') }}
                    </div>

                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('Error') }}</strong> {{ config('site.contact.error_message', 'Hubo un error al enviar tu mensaje. Por favor, inténtalo nuevamente.') }}
                        <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">{{ __('Tu Nombre') }} *</label>
                            <input type="text" value="" placeholder="{{ __('Ingresá tu nombre') }}" data-msg-required="{{ __('Por favor ingresá tu nombre.') }}" 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') }} *</label>
                            <input type="email" value="" placeholder="{{ __('Ingresá tu email') }}" data-msg-required="{{ __('Por favor ingresá tu email.') }}" data-msg-email="{{ __('Por favor ingresá un email válido.') }}" 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">{{ __('Teléfono') }} <span class="text-2 text-color-grey">(opcional)</span></label>
                            <input type="tel" value="" placeholder="{{ __('Ingresá tu teléfono') }}" 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', 'Tipo de Proyecto') }} <span class="text-2 text-color-grey">(opcional)</span></label>
                            <input type="text" value="" placeholder="{{ config('site.contact.company_placeholder', 'Proyecto, colaboración, idea, 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">{{ __('Mensaje') }} *</label>
                            <textarea maxlength="5000" placeholder="{{ __('Contame sobre tu proyecto o consulta...') }}" rows="8" class="form-control text-3 h-auto border-width-2 border-radius-2 border-color-grey-200 py-2" name="message" required data-msg-required="{{ __('Por favor ingresá tu mensaje.') }}"></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>{{ __('Enviar mensaje') }} <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-glass-1 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 mb-2" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif !important;">{{ config('site.contact.location_label', 'Ubicación') }}</strong>
                            <p class="mb-0 text-3-5 line-height-7" style="color: rgba(255, 255, 255, 0.75) !important;">{{ config('site.contact.address.line1') }}</p>
                            @if(config('site.contact.address.line2'))
                            <p class="mb-0 text-3-5 line-height-7" style="color: rgba(255, 255, 255, 0.75) !important;">{{ config('site.contact.address.line2') }}</p>
                            @endif
                            @if(config('site.contact.address.map_url'))
                                <p class="mb-0 text-3-5 line-height-7 mt-1"><a href="{{ config('site.contact.address.map_url') }}" target="_blank" class="text-color-secondary text-color-hover-primary font-weight-bold text-decoration-underline">{{ __('Ver en mapa') }}</a></p>
                            @endif
                            @endif

                            <strong class="d-block text-4-5 mb-2 mt-5" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif !important;">{{ __('Email') }}</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-bold text-decoration-underline">{{ config('site.contact.email') }}</a></p>

                            @if(config('site.contact.phone'))
                            <strong class="d-block text-4-5 mb-2 mt-4" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif !important;">{{ __('Teléfono') }}</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-bold text-decoration-underline">{{ config('site.contact.phone') }}</a></p>
                            @endif

                            <div class="mt-5">
                                <strong class="d-block text-4-5 mb-3" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif !important;">{{ config('site.contact.social_label', 'Seguime') }}</strong>
                                <ul class="social-icons social-icons-clean social-icons-medium">
                                    @foreach(config('site.social_media') as $key => $social)
                                        @if(is_array($social) && ($social['active'] ?? false) && 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'] }} text-color-light text-color-hover-primary"></i>
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>

                            <p class="mt-5 text-3 text-center mb-0" style="color: rgba(255, 255, 255, 0.5) !important;">
                                * {{ config('site.contact.response_time', 'Típicamente respondo dentro de 24-48 horas. ¡Espero escucharte!') }}
                            </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