{{-- ═══ Construction contact fields ═══ --}}
{{-- phone, email, address vienen de _common --}}

{{-- Encabezado de página --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Encabezado de la página de contacto</h4>
    <p class="text-gray-600 fs-7 mb-4">Título y subtítulo que aparecen en el page header (breadcrumb) y en los meta tags SEO.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título de página</label>
            <input type="text" name="contact[page_title]" class="form-control form-control-solid" value="{{ old('contact.page_title', $siteData['contact']['page_title'] ?? '') }}" placeholder="Contacto" />
            <span class="form-text">Aparece en el breadcrumb del page header y en el &lt;title&gt; del navegador.</span>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo / descripción SEO</label>
            <input type="text" name="contact[page_subtitle]" class="form-control form-control-solid" value="{{ old('contact.page_subtitle', $siteData['contact']['page_subtitle'] ?? '') }}" placeholder="Hablemos de tu próxima obra" />
            <span class="form-text">Usado como meta description y Open Graph description.</span>
        </div>
    </div>
</div>

{{-- Form & Sede --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Página de contacto — textos</h4>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Subtítulo del formulario</label>
            <textarea name="contact[form_subtitle]" class="form-control form-control-solid" rows="2" placeholder="Escribinos o llamanos para descubrir cómo podemos acompañar tu próximo proyecto.">{{ old('contact.form_subtitle', $siteData['contact']['form_subtitle'] ?? '') }}</textarea>
            <span class="form-text">Texto debajo del título "Envianos un mensaje".</span>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Título de la sede</label>
            <input type="text" name="contact[headquarters_title]" class="form-control form-control-solid" value="{{ old('contact.headquarters_title', $siteData['contact']['headquarters_title'] ?? '') }}" placeholder="Sede principal" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo de la sede</label>
            <input type="text" name="contact[headquarters_subtitle]" class="form-control form-control-solid" value="{{ old('contact.headquarters_subtitle', $siteData['contact']['headquarters_subtitle'] ?? '') }}" />
        </div>
    </div>
</div>

{{-- Phone formato tel: + Maps --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Teléfono y Mapa</h4>
    <p class="text-gray-600 fs-7 mb-4">Configuración avanzada del enlace tel: y del mapa de Google Maps.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Teléfono (formato tel:)</label>
            <input type="text" name="contact[phone_number]" class="form-control form-control-solid" value="{{ old('contact.phone_number', $siteData['contact']['phone_number'] ?? '') }}" placeholder="+541140000000" />
            <span class="form-text">Sin espacios ni guiones — para que el botón "click to call" funcione.</span>
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Latitud</label>
            <input type="text" name="contact[latitude]" class="form-control form-control-solid" value="{{ old('contact.latitude', $siteData['contact']['latitude'] ?? '') }}" placeholder="-34.6037" />
            <span class="form-text">Coordenada del marker en el mapa.</span>
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Longitud</label>
            <input type="text" name="contact[longitude]" class="form-control form-control-solid" value="{{ old('contact.longitude', $siteData['contact']['longitude'] ?? '') }}" placeholder="-58.3816" />
            <span class="form-text">Si latitud o longitud están vacías, no se renderiza el mapa.</span>
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Zoom del mapa</label>
            <input type="number" name="contact[map_zoom]" class="form-control form-control-solid" value="{{ old('contact.map_zoom', $siteData['contact']['map_zoom'] ?? 14) }}" min="1" max="20" />
            <span class="form-text">1=mundo, 20=edificio. Default 14.</span>
        </div>
        <div class="col-12">
            <label class="form-label">Google Maps API Key</label>
            <input type="text" name="contact[google_maps_api_key]" class="form-control form-control-solid" value="{{ old('contact.google_maps_api_key', $siteData['contact']['google_maps_api_key'] ?? '') }}" placeholder="AIzaSy..." />
            <span class="form-text">Si está vacío, el mapa no carga (se muestra un fallback con la dirección).</span>
        </div>
        <div class="col-12">
            <label class="form-label">Google Maps ID</label>
            <input type="text" name="contact[google_maps_id]" class="form-control form-control-solid" value="{{ old('contact.google_maps_id', $siteData['contact']['google_maps_id'] ?? 'DEMO_MAP_ID') }}" />
            <span class="form-text">ID del mapa custom (Maps Platform → Map IDs).</span>
        </div>
    </div>
</div>