@extends('layout.front.master')

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

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

@php
    $pageTitle = config('site.modules.contact.page_header.title', __('Contacto'));
    $breadcrumbItems = [
        ['label' => __('Inicio'), 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $contactData = config('site.contact', []);
    $contactPhone = is_array($contactData['phone'] ?? null) ? ($contactData['phone'][0] ?? '') : ($contactData['phone'] ?? '');
    $contactEmail = is_array($contactData['email'] ?? null) ? ($contactData['email'][0] ?? '') : ($contactData['email'] ?? '');
    $contactAddress = is_array($contactData['address'] ?? null) ? implode(', ', $contactData['address']) : ($contactData['address'] ?? '');
    $contactWa = preg_replace('/[^0-9]/', '', $contactPhone);
@endphp

@section('content')

@include('layout.front.partials.page-header-urban-development', [
    'pageTitle' => $pageTitle,
    'pageLabel' => __('Estamos para ayudarte'),
    'pageBreadcrumb' => $breadcrumbItems,
    'pageSubtitle' => config('site.contact.page_subtitle', __('Agendá tu visita')),
])

<section class="ud-section">
    <div class="ud-container">
        <div class="ud-split" style="align-items:flex-start; gap:clamp(2.5rem,5vw,5rem);">

            {{-- Form --}}
            <div class="ud-reveal">
                <span class="ud-eyebrow">{{ __('Escribinos') }}</span>
                <h2 class="ud-display" style="font-size:clamp(2rem,3.5vw,3rem);">{{ config('site.contact.form_subtitle', __('Coordiná una visita guiada')) }}</h2>
                <p class="ud-lead">{{ config('site.contact.form_description', __('Dejanos tus datos y te contactamos con la disponibilidad de etapas, lotes y el plan de pagos personalizado.')) }}</p>

                @if(session('success'))
                <div class="ud-alert ud-alert--ok">{{ session('success') }}</div>
                @endif
                @if($errors->any())
                <div class="ud-alert ud-alert--err">
                    <ul style="margin:0; padding-left:1.1rem;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
                @endif

                <form action="{{ route('front.contact.store') }}" method="POST" data-recaptcha-action="contact" class="ud-form js-recaptcha-form">
                    @csrf
                    <div class="ud-form__row">
                        <input type="text" name="name" class="ud-input" required placeholder="{{ __('Nombre') }} *" value="{{ old('name') }}" maxlength="100">
                        <input type="email" name="email" class="ud-input" required placeholder="{{ __('E-mail') }} *" value="{{ old('email') }}" maxlength="100">
                    </div>
                    <input type="text" name="phone" class="ud-input" required placeholder="{{ __('Teléfono / WhatsApp') }} *" value="{{ old('phone') }}" maxlength="100">
                    <textarea name="message" rows="6" class="ud-input" required placeholder="{{ __('Contanos qué estás buscando…') }} *" maxlength="5000">{{ old('message') }}</textarea>
                    <button type="submit" class="ud-btn ud-btn--gold">{{ __('Enviar consulta') }} <i class="fas fa-arrow-right"></i></button>
                </form>
            </div>

            {{-- Info --}}
            <aside class="ud-reveal ud-contact-info">
                <h3 class="ud-foot-title" style="color:var(--ud-gold);">{{ __('Visitanos') }}</h3>
                <ul class="ud-contact-list">
                    @if($contactAddress)<li><i class="fas fa-location-dot"></i><span>{{ $contactAddress }}</span></li>@endif
                    @if($contactPhone)<li><i class="fab fa-whatsapp"></i><a href="https://api.whatsapp.com/send?phone={{ $contactWa }}" target="_blank" rel="noopener">{{ $contactPhone }}</a></li>@endif
                    @if($contactEmail)<li><i class="far fa-envelope"></i><a href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></li>@endif
                </ul>

                <h3 class="ud-foot-title" style="color:var(--ud-gold); margin-top:2rem;">{{ __('Seguinos') }}</h3>
                <div class="ud-foot-social"><x-social-icons theme="dark" size="md" /></div>

                @if($contactWa)
                <a href="https://api.whatsapp.com/send?phone={{ $contactWa }}&text={{ urlencode(__('Hola, quiero coordinar una visita al desarrollo.')) }}" target="_blank" rel="noopener" class="ud-btn ud-btn--ghost" style="margin-top:2rem;">
                    <i class="fab fa-whatsapp"></i> {{ __('Escribir por WhatsApp') }}
                </a>
                @endif
            </aside>
        </div>
    </div>
</section>

{{-- Mapa --}}
@if(config('site.contact.map_embed'))
<section class="ud-section--flush">
    <iframe src="{{ config('site.contact.map_embed') }}" class="ud-location__map" height="460" width="100%" style="display:block; min-height:460px;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
@endif

@endsection