@extends('layout.front.master')

@section('content')

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

    {{-- Page Header — unified style with About + modules --}}
    <section class="page-header page-header-modern custom-bg-color-1 page-header-lg mb-0">
        <div class="container">
            <div class="row py-lg-5 text-center text-lg-start">
                <div class="col-lg-8 order-2 order-lg-1 align-self-center p-static">
                    <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'bottom', 'speed': 0.4, 'transition': true, 'transitionDuration': 1000}">
                        <h1 class="text-color-dark font-weight-semi-bold text-lg-12 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                            <mark class="bg-transparent d-inline-block p-0 mark mark-color mark-color-tertiary">{{ __('Contact Us') }}</mark>
                        </h1>
                    </div>
                </div>
                <div class="col-lg-4 order-1 order-lg-2 align-self-center">
                    <ul class="breadcrumb d-flex justify-content-center justify-content-lg-end text-4-5">
                        <li><a href="{{ front_homepage_url() }}" class="text-color-dark text-color-hover-primary text-transform-none text-decoration-none">{{ __('Home') }}</a></li>
                        <li class="active text-color-primary text-transform-none">{{ __('Contact Us') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- Intro Section --}}
    <div class="container py-5">
        <div class="row py-5 text-center text-xl-start align-items-center">
            <div class="col-xl-6">
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                    <span class="bg-gradient text-light d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium mb-2">{{ config('site.contact.page_badge', __('Hablemos')) }}</span>
                    <h3 class="custom-font-1">{{ config('site.contact.page_heading', __('¿Listos para potenciar tu marca? Conversemos.')) }}</h3>
                    <p class="text-dark text-4-5 line-height-9 pt-2">
                        {{ config('site.contact.page_subtitle', __('Estamos para ayudarte. Ya sea para iniciar un nuevo proyecto, repensar tu estrategia de marca o consultarnos sobre nuestros servicios, nuestro equipo está disponible para escucharte.')) }}
                    </p>

                    <ul class="list list-unstyled mx-auto mx-lg-0 my-4 pt-2 pb-1">
                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <a href="mailto:{{ config('site.contact.email') }}" class="d-inline-flex align-items-center text-decoration-none text-dark text-color-hover-primary font-weight-semibold text-6">{{ config('site.contact.email') }}</a>
                        </li>
                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <a href="tel:{{ config('site.contact.phone') }}" class="d-inline-flex align-items-center text-decoration-none text-dark text-color-hover-primary font-weight-semibold text-6">{{ config('site.contact.phone') }}</a>
                        </li>
                    </ul>

                    @foreach(config('site.social_media') as $key => $social)
                        @if(is_array($social) && ($social['active'] ?? false))
                            <a href="{{ $social['url'] }}" target="_blank" class="btn btn-modern btn-effect-4 btn-rounded btn-dark btn-social bg-hover-primary text-transform-none text-4 py-2 font-weight-medium mb-2">
                                {{ ucfirst($key) }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
            <div class="col-xl-6">
                <div class="row pt-5 py-xl-0">
                    {{-- Office 1 --}}
                    <div class="col-lg-6 pb-4">
                        <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'top', 'speed': 6.0, 'transition': true, 'transitionDuration': 1000}">
                            <div class="card custom-bg-color-1 border-0 custom-border-radius-1">
                                <div class="card-body">
                                    @php $officeImg1 = config('site.contact.office_image_1', 'cd-project/img/demos/marketing-1/generic/generic-9.jpg'); @endphp
                                    <img class="img-fluid custom-border-radius-1 mb-4" src="{{ filter_var($officeImg1, FILTER_VALIDATE_URL) ? $officeImg1 : asset($officeImg1) }}" alt="Office">

                                    <div class="overflow-hidden">
                                        <h2 class="text-color-dark font-weight-semi-bold line-height-3 text-4-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">
                                            {{ config('site.contact.address', '123 Street Name') }}<br> 
                                            <span class="text-4">{{ config('site.contact.city', 'Los Angeles, CA') }}</span>
                                        </h2>
                                    </div>
                                    @if(config('site.contact.map_url'))
                                        <div class="overflow-hidden">
                                            <a href="{{ config('site.contact.map_url') }}" target="_blank" class="d-inline-block pt-2 font-weight-semi-bold border-color-primary text-decoration-none text-3-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">
                                                <i class="fa-solid fa-location-dot text-4 ps-1"></i> {{ __('Get Directions') }}
                                            </a>
                                        </div>
                                    @endif
                                    <ul class="list list-unstyled text-color-dark font-weight-semi-bold text-3-5 pt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-2">
                                            <span class="opacity-6 font-weight-medium">{{ __('E-mail:') }}</span> 
                                            <a href="mailto:{{ config('site.contact.email') }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.email') }}</a>
                                        </li>
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-0">
                                            <span class="opacity-6 font-weight-medium">{{ __('Phone:') }}</span> 
                                            <a href="tel:{{ config('site.contact.phone') }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.phone') }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Office 2 (opcional) --}}
                    @if(config('site.contact.secondary_address'))
                    <div class="col-lg-6">
                        <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'bottom', 'speed': 6.0, 'transition': true, 'transitionDuration': 1000}">
                            <div class="card custom-bg-color-1 border-0 custom-border-radius-1">
                                <div class="card-body">
                                    @php $officeImg2 = config('site.contact.office_image_2', 'cd-project/img/demos/marketing-1/generic/generic-10.jpg'); @endphp
                                    <img class="img-fluid custom-border-radius-1 mb-4" src="{{ filter_var($officeImg2, FILTER_VALIDATE_URL) ? $officeImg2 : asset($officeImg2) }}" alt="Office">

                                    <div class="overflow-hidden">
                                        <h2 class="text-color-dark font-weight-semi-bold line-height-3 text-4-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">
                                            {{ config('site.contact.secondary_address') }}<br> 
                                            <span class="text-4">{{ config('site.contact.secondary_city', 'New York, NY') }}</span>
                                        </h2>
                                    </div>
                                    @if(config('site.contact.secondary_map_url'))
                                        <div class="overflow-hidden">
                                            <a href="{{ config('site.contact.secondary_map_url') }}" target="_blank" class="d-inline-block pt-2 font-weight-semi-bold border-color-primary text-decoration-none text-3-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">
                                                <i class="fa-solid fa-location-dot text-4 ps-1"></i> {{ __('Get Directions') }}
                                            </a>
                                        </div>
                                    @endif
                                    <ul class="list list-unstyled text-color-dark font-weight-semi-bold text-3-5 pt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-2">
                                            <span class="opacity-6 font-weight-medium">{{ __('E-mail:') }}</span> 
                                            <a href="mailto:{{ config('site.contact.secondary_email', config('site.contact.email')) }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.secondary_email', config('site.contact.email')) }}</a>
                                        </li>
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-0">
                                            <span class="opacity-6 font-weight-medium">{{ __('Phone:') }}</span> 
                                            <a href="tel:{{ config('site.contact.secondary_phone', config('site.contact.phone')) }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.secondary_phone', config('site.contact.phone')) }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Contact Form Section --}}
    <section class="section bg-gradient border-0 m-0">
        <div class="container py-5">
            <div class="row">
                <div class="col">
                    <h3 class="text-10 text-light">{{ __('Send a Message') }}</h3>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <form class="contact-form js-recaptcha-form form-style-4 form-style-4-border-light-2 form-errors-light pe-lg-5" 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>{{ __('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 mt-2 d-block"></span>
                        </div>
                        <div class="row mb-2 mx-0">
                            <input type="text" class="form-control text-3-5 text-color-light px-1 py-3" name="name" placeholder="{{ __('* Full Name') }}" data-msg-required="{{ __('This field is required.') }}" id="name" required />
                        </div>
                        <div class="row mx-0 mb-3">
                            <input type="email" class="form-control text-3-5 text-color-light px-1 py-3" name="email" placeholder="{{ __('* Email Address') }}" data-msg-required="{{ __('This field is required.') }}" id="email" required />
                        </div>
                        <div class="row mb-4 mx-0">
                            <textarea name="message" id="message" rows="4" class="form-control form-control text-3-5 text-color-light px-1" placeholder="{{ __('* Message') }}"></textarea>
                        </div>
                        <input type="submit" class="btn btn-modern btn-effect-4 btn-rounded btn-dark text-transform-none text-3 font-weight-medium mt-2 mb-2" value="{{ __('Send Message') }}" />
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- Google Maps --}}
    @if(config('site.contact.map_url') || config('site.contact.latitude'))
    <div id="googlemaps" class="google-map m-0" style="height: 500px;" data-latitude="{{ config('site.contact.latitude', '40.7128') }}" data-longitude="{{ config('site.contact.longitude', '-74.0060') }}"></div>
    @endif

</div>

@endsection