@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', config('site.contact.page_subtitle', config('site.seo.description')))
@section('keywords', config('site.seo.keywords'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contacto'))
@section('og_description', config('site.contact.page_subtitle', config('site.seo.description')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('header_classes', 'header-transparent')

@section('content')

{{-- Hero Section --}}
<section class="section bg-dark border-0 m-0" style="height: 100vh;">
    <div class="container position-relative z-index-3 h-100">
        <div class="row align-items-center h-100">
            <div class="col-lg-6">
                <div class="hero-content">
                    {{-- Subtítulo --}}
                    <h2 class="text-color-light text-4 font-weight-normal mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        {{ config('site.contact.hero_subtitle', __('¿Listo para la aventura?')) }}
                    </h2>

                    {{-- Título principal --}}
                    <h1 class="text-color-light font-weight-extra-bold text-8 line-height-1 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        {{ __('CONECTA CON') }} <span class="text-color-primary">{{ config('site.name') }}</span>
                    </h1>

                    {{-- Mensaje directo --}}
                    <div class="hero-message mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                        <p class="text-color-light text-3 font-weight-light mb-2">
                            {{ config('site.contact.hero_message', __('Ya conoces nuestros productos. Ahora es momento de probarlos.')) }}
                        </p>
                        <p class="text-color-light text-2 opacity-7 mb-0">
                            {{ config('site.contact.hero_message_2', __('Contacta directamente con nosotros y agenda tu consulta.')) }}
                        </p>
                    </div>

                    {{-- Botones CTA principales --}}
                    <div class="hero-buttons d-flex flex-column flex-md-row gap-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                        @if(config('site.social_media.whatsapp.active') ?? false)
                            <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                                <i class="fab fa-whatsapp me-2"></i>{{ __('WhatsApp Directo') }}
                            </a>
                        @endif
                        @if(config('site.contact.phone'))
                            <a href="tel:{{ config('site.contact.phone') }}" class="btn btn-outline-light btn-modern font-weight-bold text-3 px-5 py-3">
                                <i class="fas fa-phone me-2"></i>{{ __('Llamar Ahora') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
                    <img src="{{ asset('cd-project/img/demos/product-landing/product-carousel-1.jpg') }}" class="img-fluid rounded-3 box-shadow-10 anim-hover-translate-top-10px transition-3ms" alt="{{ config('site.name') }} - {{ __('Contacto') }}">
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Sección de Contacto Directo --}}
<section class="section bg-light section-height-3 border-0 m-0" id="contact">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="overflow-hidden mb-1">
                    <span class="d-block text-color-dark custom-letter-spacing-1 text-3-5 opacity-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">{{ __('CONTACTO') }}</span>
                </div>
                <h2 class="text-color-dark font-weight-bold ls-0 text-9 mb-4 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">{{ __('¿Listo para') }} <span class="text-color-primary">{{ __('Probar?') }}</span></h2>
                <p class="text-color-dark text-4 opacity-7 mb-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600">
                    {{ config('site.contact.form_subtitle', __('Elige la forma más cómoda para contactarnos y agenda tu consulta.')) }}
                </p>

                <div class="row">
                    {{-- WhatsApp --}}
                    @if(config('site.social_media.whatsapp.active') ?? false)
                        <div class="col-md-4 mb-4">
                            <div class="card border-0 bg-dark box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms appear-animation h-100" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                                <div class="card-body p-4 text-center d-flex flex-column h-100">
                                    <div class="contact-icon mb-3">
                                        <i class="fab fa-whatsapp text-6 text-primary"></i>
                                    </div>
                                    <h4 class="text-color-light font-weight-bold text-4 mb-2">{{ __('WhatsApp') }}</h4>
                                    <p class="text-color-light opacity-7 text-3 mb-3 flex-grow-1">{{ __('Respuesta inmediata') }}</p>
                                    <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" class="btn btn-primary btn-modern font-weight-bold text-2 px-4 py-2">
                                        {{ __('Chatear') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Teléfono --}}
                    @if(config('site.contact.phone'))
                        <div class="col-md-4 mb-4">
                            <div class="card border-0 bg-dark box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms appear-animation h-100" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                <div class="card-body p-4 text-center d-flex flex-column h-100">
                                    <div class="contact-icon mb-3">
                                        <i class="fas fa-phone text-6 text-primary"></i>
                                    </div>
                                    <h4 class="text-color-light font-weight-bold text-4 mb-2">{{ __('Teléfono') }}</h4>
                                    <p class="text-color-light opacity-7 text-3 mb-3 flex-grow-1">{{ config('site.contact.schedule', __('Lunes a Viernes 9-18hs')) }}</p>
                                    <a href="tel:{{ config('site.contact.phone') }}" class="btn btn-primary btn-modern font-weight-bold text-2 px-4 py-2">
                                        {{ __('Llamar') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Email --}}
                    @if(config('site.contact.email'))
                        <div class="col-md-4 mb-4">
                            <div class="card border-0 bg-dark box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms appear-animation h-100" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                                <div class="card-body p-4 text-center d-flex flex-column h-100">
                                    <div class="contact-icon mb-3">
                                        <i class="fas fa-envelope text-6 text-primary"></i>
                                    </div>
                                    <h4 class="text-color-light font-weight-bold text-4 mb-2">{{ __('Email') }}</h4>
                                    <p class="text-color-light opacity-7 text-3 mb-3 flex-grow-1">{{ __('Respuesta en 24hs') }}</p>
                                    <a href="mailto:{{ config('site.contact.email') }}" class="btn btn-primary btn-modern font-weight-bold text-2 px-4 py-2">
                                        {{ __('Escribir') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Formulario de Contacto --}}
<section class="section bg-dark section-height-3 border-0 m-0">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="text-center mb-5">
                    <h2 class="text-color-light font-weight-bold text-6 mb-3">{{ config('site.contact.form_title', __('Conecta con Nosotros')) }}</h2>
                    <p class="text-color-light text-4 opacity-7 mb-0">
                        {{ config('site.contact.form_subtitle', __('¿Necesitas información? Nuestro equipo está listo para asesorarte.')) }}
                    </p>
                </div>

                <form action="{{ route('front.contact.store') }}" method="POST" class="contact-form">
                    @csrf
                    <div class="row">
                        <div class="form-group col-md-6 mb-4">
                            <input type="text" name="name" class="form-control bg-light border-0 text-3 py-3" placeholder="{{ __('Nombre') }}" required>
                        </div>
                        <div class="form-group col-md-6 mb-4">
                            <input type="email" name="email" class="form-control bg-light border-0 text-3 py-3" placeholder="{{ __('Email') }}" required>
                        </div>
                    </div>
                    <div class="form-group mb-4">
                        <input type="text" name="subject" class="form-control bg-light border-0 text-3 py-3" placeholder="{{ __('Asunto') }}" required>
                    </div>
                    <div class="form-group mb-4">
                        <textarea name="message" class="form-control bg-light border-0 text-3 py-3" rows="5" placeholder="{{ __('Mensaje') }}" required></textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                            {{ __('Enviar Mensaje') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- Call to Action Final --}}
<section class="call-to-action with-borders button-centered bg-primary">
    <div class="container">
        <div class="col-12">
            <div class="call-to-action-content">
                <h3 class="text-color-light">{{ __('¿Listo para') }} <strong class="font-weight-extra-bold">{{ __('empezar') }}</strong> {{ __('con nosotros?') }}</h3>
                <p class="mb-0 text-color-light opacity-7">{{ config('site.contact.cta_text', __('La aventura te está esperando')) }}</p>
            </div>
        </div>
        <div class="col-12">
            <div class="call-to-action-btn">
                @if(config('site.social_media.whatsapp.active') ?? false)
                    <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" class="btn btn-modern text-2 btn-light">
                        <i class="fab fa-whatsapp me-2"></i>{{ __('¡Empezar Ahora!') }}
                    </a>
                @else
                    <a href="{{ route('front.contact') }}" class="btn btn-modern text-2 btn-light">
                        {{ __('¡Contáctanos!') }}
                    </a>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection