{% extends 'base.html.twig' %}
{% block title %}Contacto – HuertosCastellon.es{% endblock %}
{% block meta_description %}¿Tienes alguna pregunta sobre los huertos urbanos en Castellón? Contáctanos y te respondemos en menos de 24 horas.{% endblock %}

{% block body %}

<header class="page-header">
    <div class="container">
        <div class="section-header-sm" style="color:rgba(255,255,255,.65)">¿Hablamos?</div>
        <h1><i class="bi bi-envelope me-2" style="opacity:.8"></i>Contacto</h1>
        <p style="opacity:.8; font-size:.9rem; margin:0">Te respondemos en menos de 24 horas</p>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">
<div class="row g-4 justify-content-center">

    {# Info #}
    <div class="col-md-4">
        <div class="d-flex flex-column gap-3">
            <div class="content-card p-4">
                <div style="width:44px; height:44px; background:var(--verde-palido); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.9rem">📍</div>
                <div class="section-header-sm">Ubicación</div>
                <p style="font-size:.9rem; color:#1a3528; font-weight:600; margin:0">Castellón de la Plana</p>
                <p style="font-size:.82rem; color:#6c8c78; margin:0">Comunitat Valenciana, España</p>
            </div>
            <div class="content-card p-4">
                <div style="width:44px; height:44px; background:var(--verde-palido); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.9rem">📧</div>
                <div class="section-header-sm">Email</div>
                <p style="font-size:.9rem; color:#1a3528; font-weight:600; margin:0">info@huertoscastellon.es</p>
                <p style="font-size:.82rem; color:#6c8c78; margin:0">Respuesta en &lt;24 h</p>
            </div>
            <div class="content-card p-4">
                <div style="width:44px; height:44px; background:var(--verde-palido); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.9rem">🕐</div>
                <div class="section-header-sm">Horario de acceso</div>
                <p style="font-size:.9rem; color:#1a3528; font-weight:600; margin:0">Todos los días</p>
                <p style="font-size:.82rem; color:#6c8c78; margin:0">8:00 – 20:00 h</p>
            </div>
        </div>
    </div>

    {# Formulario #}
    <div class="col-md-7 col-lg-6">
        <div class="content-card p-4 p-md-5">
            <div class="section-header-sm mb-1">Envíanos un mensaje</div>
            <p class="text-muted small mb-4">Cualquier duda sobre parcelas, precios o disponibilidad.</p>

            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
            <div class="mb-3">
                {{ form_label(form.nombre) }}
                {{ form_widget(form.nombre, {'attr': {'class': 'form-control', 'placeholder': 'Tu nombre'}}) }}
                {{ form_errors(form.nombre) }}
            </div>
            <div class="mb-3">
                {{ form_label(form.email) }}
                {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'tu@email.com'}}) }}
                {{ form_errors(form.email) }}
            </div>
            <div class="mb-4">
                {{ form_label(form.mensaje) }}
                {{ form_widget(form.mensaje, {'attr': {'class': 'form-control', 'rows': 5, 'placeholder': 'Escribe tu mensaje aquí…'}}) }}
                {{ form_errors(form.mensaje) }}
            </div>
            <button type="submit" class="btn-primary-green w-100" style="border-radius:50px; padding:.7rem">
                <i class="bi bi-send me-1"></i>Enviar mensaje
            </button>
            {{ form_end(form) }}
        </div>
    </div>

</div>
</div>
{% endblock %}