@extends('layout.front.master')

@section('title', config('site.contact.page_title', __('Contact')) . ' | ' . config('site.name'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('og_title', config('site.contact.page_title', __('Contact')) . ' | ' . config('site.name'))
@section('og_description', config('site.og.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('content')

{{-- Hero --}}
<section class="section border-0 m-0 p-0 contact-hero" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary--100) 30%, var(--primary--300) 60%, var(--secondary-rgba-20) 150%); position: relative; overflow: hidden;">
    <div class="container position-relative z-index-2 py-5">
        <div class="row align-items-center py-5 mt-3">
            <div class="col-lg-7">
                <p class="font-weight-bold text-uppercase mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="color: var(--secondary); letter-spacing: 0.2em; font-size: 0.82rem;">{{ config('site.contact.page_title', __('Contact')) }}</p>
                <h1 class="font-weight-bold text-color-light appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300" style="font-size: clamp(2rem, 4vw + 1rem, 3.2rem); line-height: 1.1; letter-spacing: -0.02em;">
                    {!! config('site.contact.hero_heading', __('Get in Touch')) !!}
                </h1>
                <p class="text-color-light text-4 mt-4 mb-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500" style="opacity: 0.7; max-width: 36rem;">{{ config('site.contact.hero_subtitle', config('site.description', '')) }}</p>
            </div>
            <div class="col-lg-5 d-none d-lg-flex align-items-center justify-content-end appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                <span style="font-size: 8rem; line-height: 1; color: var(--secondary-rgba-20); font-family: 'Playfair Display', serif;">&#10022;</span>
            </div>
        </div>
    </div>
</section>

{{-- Contact: form + info --}}
<section class="section border-0 m-0" style="background: var(--primary--100);">
    <div class="container py-5-5">
        <div class="row">

            {{-- Form --}}
            <div class="col-lg-7 pe-lg-5 mb-5 mb-lg-0">
                <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-1">{{ config('site.contact.form_heading', __('Send us a message')) }}</h2>
                <p class="text-3-5 mb-5" style="color: var(--light); opacity: 0.7;">{{ config('site.contact.form_subtitle', __('We respond within 24 business hours.')) }}</p>

                @if(session('success'))
                    <div class="alert alert-success mb-4">
                        <strong>{{ __('¡Listo!') }}</strong> {{ session('success') }}
                    </div>
                @endif
                @if($errors->any())
                    <div class="alert alert-danger mb-4">
                        <strong>{{ __('Error.') }}</strong> {{ __('Revisá los campos del formulario.') }}
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="contact-form form-style-4 form-style-4-border-light-2 form-errors-light" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf
                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('¡Listo!') }}</strong> {{ __('Tu mensaje fue enviado correctamente.') }}
                    </div>
                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('Error.') }}</strong> {{ __('No se pudo enviar el mensaje.') }}
                        <span class="mail-error-message text-1 mt-2 d-block"></span>
                    </div>

                    <div class="row mx-0 mb-3">
                        <input type="text" class="form-control font-weight-semibold text-color-light px-1 py-3" name="name" placeholder="{{ __('Nombre') }} *" value="{{ old('name') }}" required />
                    </div>
                    <div class="row mx-0 mb-3">
                        <input type="email" class="form-control font-weight-semibold text-color-light px-1 py-3" name="email" placeholder="{{ __('Email') }} *" value="{{ old('email') }}" required />
                    </div>
                    <div class="row mx-0 mb-3">
                        <div class="col-md-6 p-0 pe-md-2">
                            <input type="text" class="form-control font-weight-semibold text-color-light px-1 py-3" name="phone" placeholder="{{ __('Teléfono') }}" value="{{ old('phone') }}" />
                        </div>
                        <div class="col-md-6 p-0 ps-md-2 mt-3 mt-md-0">
                            <input type="text" class="form-control font-weight-semibold text-color-light px-1 py-3" name="subject" placeholder="{{ __('Asunto') }}" value="{{ old('subject') }}" />
                        </div>
                    </div>
                    <div class="row mx-0 mb-5">
                        <textarea name="message" rows="6" class="form-control font-weight-semibold text-color-light px-1 py-3" placeholder="{{ __('Mensaje') }} *" required>{{ old('message') }}</textarea>
                    </div>
                    <input type="submit" class="btn font-weight-bold text-3 py-2 px-5" style="background-color: var(--secondary); color: var(--dark); border: none; border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;" value="{{ __('Send message') }}" data-loading-text="{{ __('Sending...') }}" />
                </form>
            </div>

            {{-- Contact info --}}
            <div class="col-lg-5 ps-lg-5" style="border-left: 1px solid var(--secondary-rgba-20);">
                <p class="font-weight-bold text-uppercase mb-1" style="color: var(--secondary); font-size: 0.82rem; letter-spacing: 0.2em;">{{ config('site.contact.info_badge', __('Information')) }}</p>
                <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-3">{{ config('site.contact.info_heading', __('Direct Contact')) }}</h2>
                <p class="text-3-5 mb-5-5" style="color: var(--light); opacity: 0.7;">{{ config('site.contact.info_text', config('site.description', '')) }}</p>

                @if(config('site.contact.phone'))
                <div class="d-flex align-items-start mb-5">
                    <i class="icons icon-phone text-8 position-relative" style="color: var(--secondary); top: 2px;"></i>
                    <div class="ps-4">
                        <p class="mb-1 text-2 font-weight-bold text-uppercase" style="color: var(--secondary); letter-spacing: 0.15em;">{{ __('Phone') }}</p>
                        <a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone')) }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none">{{ config('site.contact.phone') }}</a>
                    </div>
                </div>
                @endif

                @if(config('site.contact.email'))
                <div class="d-flex align-items-start mb-5">
                    <i class="icons icon-envelope text-8 position-relative" style="color: var(--secondary); top: 2px;"></i>
                    <div class="ps-4">
                        <p class="mb-1 text-2 font-weight-bold text-uppercase" style="color: var(--secondary); letter-spacing: 0.15em;">{{ __('Email') }}</p>
                        <a href="mailto:{{ config('site.contact.email') }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none">{{ config('site.contact.email') }}</a>
                    </div>
                </div>
                @endif

                @if(config('site.contact.address'))
                <div class="d-flex align-items-start mb-5-5">
                    <i class="icons icon-location-pin text-8 position-relative" style="color: var(--secondary); top: 2px;"></i>
                    <div class="ps-4">
                        <p class="mb-1 text-2 font-weight-bold text-uppercase" style="color: var(--secondary); letter-spacing: 0.15em;">{{ __('Address') }}</p>
                        <p class="text-4-5 font-weight-bold text-color-light mb-0">{{ config('site.contact.address') }}</p>
                    </div>
                </div>
                @endif

                @if(config('site.contact.badge_title'))
                <div class="p-4" style="border: 1.5px solid var(--secondary-rgba-30); border-radius: 8px; background: var(--secondary-rgba-10);">
                    <p class="mb-1 text-2 font-weight-bold text-uppercase" style="color: var(--secondary); letter-spacing: 0.15em;">{{ config('site.contact.badge_title') }}</p>
                    <p class="text-color-light text-3 mb-0" style="opacity: 0.85; line-height: 1.6;">{{ config('site.contact.badge_text', '') }}</p>
                </div>
                @endif

                <div class="mt-5-5">
                    <a href="{{ route('front.about') }}" class="btn font-weight-bold text-3 py-2 px-5" style="background: transparent; color: var(--secondary); border: 1.5px solid var(--secondary-rgba-50); border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;">{{ config('site.contact.about_cta', __('About Us')) }}</a>
                </div>
            </div>

        </div>
    </div>
</section>

@endsection