@extends('layout.front.master')
@section('title', 'Contacto | ' . config('site.name'))
@section('og_title', 'Contacto | ' . config('site.name'))
@section('og_description', 'Contáctanos para consultas sobre proyectos de construcción, cotizaciones y servicios de Constructora Gama S.A.')
@section('og_url', url()->current())
@section('twitter_title', 'Contacto | ' . config('site.name'))
@section('twitter_description', 'Contáctanos para consultas sobre proyectos de construcción, cotizaciones y servicios de Constructora Gama S.A.')

@section('content')

{{-- Dynamic Header --}}
@php
    $backgroundImage = asset('cd-project/img/demos/digital-agency-2/bg/bg-12.jpg');
@endphp
@include('modules.cd-base.frontend.partials.dynamic-header', ['backgroundImage' => $backgroundImage])

<section class="section border-0 my-0">
    <div class="container container-xl-custom py-0">
    <div class="row">
        <div class="col-lg-8">
            <h3 class="font-weight-bold text-5 mb-3">{{ __('Envíanos un Mensaje') }}</h3>
            <p class="text-3-5 font-weight-light mb-4">¿Tienes un proyecto en mente? Estamos aquí para ayudarte a hacer realidad tus ideas. Completa el formulario y nos pondremos en contacto contigo a la brevedad.</p>
            <form id="contactForm" action="{{ route('front.contact.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name" class="font-weight-bold">{{ __('Nombre') }} *</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email" class="font-weight-bold">{{ __('Email') }} *</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="phone" class="font-weight-bold">{{ __('Teléfono') }}</label>
                            <input type="tel" class="form-control" id="phone" name="phone">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="subject" class="font-weight-bold">{{ __('Asunto') }} *</label>
                            <select class="form-control" id="subject" 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>
                <div class="form-group">
                    <label for="message" class="font-weight-bold">{{ __('Mensaje') }} *</label>
                    <textarea class="form-control" id="message" name="message" rows="5" required placeholder="{{ __('Cuéntanos sobre tu proyecto o consulta...') }}"></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-lg px-4 py-3">
                    <i class="fas fa-paper-plane me-2"></i>{{ __('Enviar Mensaje') }}
                </button>
            </form>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h4 class="font-weight-bold text-5 mb-4">{{ __('Información de Contacto') }}</h4>

                    <div class="mb-4">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-phone text-color-primary text-4 me-3"></i>
                            <div>
                                <h5 class="font-weight-bold mb-1">{{ __('Teléfono') }}</h5>
                                <p class="mb-0">
                                    <a href="tel:{{ config('site.contact.phone_number', '+5493813674900') }}" class="text-decoration-none">
                                        {{ config('site.contact.phone') }}
                                    </a>
                                </p>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-envelope text-color-primary text-4 me-3"></i>
                            <div>
                                <h5 class="font-weight-bold mb-1">{{ __('Email') }}</h5>
                                <p class="mb-0">
                                    <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none">
                                        {{ config('site.contact.email') }}
                                    </a>
                                </p>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-map-marker-alt text-color-primary text-4 me-3"></i>
                            <div>
                                <h5 class="font-weight-bold mb-1">{{ __('Dirección') }}</h5>
                                <p class="mb-0">{{ config('site.address.full') ?? config('site.contact.address') }}</p>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h5 class="font-weight-bold mb-3">{{ __('Horarios de Atención') }}</h5>
                    <div class="mb-2">
                        <span class="font-weight-bold">{{ __('Lunes a Viernes:') }}</span>
                        <span class="ms-2">{{ __('9:00 - 18:30') }}</span>
                    </div>
                    <div class="mb-2">
                        <span class="font-weight-bold">{{ __('Sábados y Domingos:') }}</span>
                        <span class="ms-2">{{ __('Cerrado') }}</span>
                    </div>

                    <hr class="my-4">

                    <h5 class="font-weight-bold mb-3">{{ __('Síguenos') }}</h5>
                    <div class="social-icons">
                        @foreach(config('site.social_media') as $key => $social)
                            @if($social['active'])
                                <a href="{{ $social['url'] }}" target="_blank" class="social-icons-{{ $key }}" title="{{ $social['title'] }}">
                                    <i class="{{ $social['icon'] }}"></i>
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<section class="section bg-color-grey-scale-1 border-0 my-0">
    <div class="container container-xl-custom py-5">
        <div class="row">
            <div class="col text-center">
                <h3 class="font-weight-bold text-5 mb-4">{{ __('¿Por qué elegirnos?') }}</h3>
                <p class="text-3-5 font-weight-light mb-5">Más de 33 años de trayectoria nos han consolidado como una constructora de prestigio y de referencia en el NOA. Nuestro compromiso con la excelencia y la innovación se refleja en cada proyecto que desarrollamos.</p>
                <div class="row">
                    <div class="col-md-3 mb-4">
                        <div class="text-center">
                            <i class="fas fa-hard-hat text-color-primary text-6 mb-3"></i>
                            <h5 class="font-weight-bold">{{ __('Trayectoria') }}</h5>
                            <p class="text-3">{{ __('Más de 33 años construyendo el futuro del NOA') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3 mb-4">
                        <div class="text-center">
                            <i class="fas fa-lightbulb text-color-primary text-6 mb-3"></i>
                            <h5 class="font-weight-bold">{{ __('Innovación') }}</h5>
                            <p class="text-3">{{ __('Soluciones creativas y eficientes para cada proyecto') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3 mb-4">
                        <div class="text-center">
                            <i class="fas fa-shield-alt text-color-primary text-6 mb-3"></i>
                            <h5 class="font-weight-bold">{{ __('Seguridad') }}</h5>
                            <p class="text-3">{{ __('Prioridad absoluta por la vida y la integridad') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3 mb-4">
                        <div class="text-center">
                            <i class="fas fa-handshake text-color-primary text-6 mb-3"></i>
                            <h5 class="font-weight-bold">{{ __('Compromiso') }}</h5>
                            <p class="text-3">{{ __('Cumplimos los acuerdos y mantenemos la confianza') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('contactForm');
    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            // Aquí puedes agregar la lógica para enviar el formulario
            alert('{{ __("¡Gracias por tu mensaje! Te contactaremos pronto.") }}');
            form.reset();
        });
    }
});
</script>
@endsection