{# brutalist contact-form override — bordered form, mono labels. Submit + honeypot wiring is load-bearing; kept verbatim. Fields: heading, description, successMessage, submitLabel, fields[.name,.label,.type,.required,.placeholder,.width,.options], plus `form` context. #}
{% with bid=_block_id|default:context.blockId %}
<section id="contact-form-{{ bid }}" class="bru-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
  <div class="bru-wrap-narrow">
    {% if form.submitted %}
    <div class="bru-slab bru-shadow p-8 text-center">
      <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center text-accent-foreground" style="background:hsl(var(--accent));border:3px solid hsl(var(--border))"><svg width="24" height="24" class="h-6 w-6" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg></div>
      <p class="bru-kicker" style="font-size:1.2rem;text-transform:none">{{ form.message|default:successMessage|default:"Thanks — your message has been sent." }}</p>
    </div>
    {% else %}
    {% if heading %}<h2 class="bru-kicker" style="font-size:clamp(1.75rem,4vw,3rem)">{{ heading }}</h2>{% endif %}
    {% if description %}<p class="mt-3 text-lg text-muted-foreground">{{ description }}</p>{% endif %}
    {% if form.errors._form %}<div class="mt-6 px-4 py-3 text-sm" style="border:3px solid hsl(var(--destructive));background:hsl(var(--destructive)/0.1);color:hsl(var(--destructive))">{{ form.errors._form }}</div>{% endif %}
    {% with formAction="/api/blocks/"|add:bid|add:"/submit" formTarget="#contact-form-"|add:bid %}
    {% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2" %}
      {% for field in fields %}
      <div class="{% if field.width == "half" %}sm:col-span-1{% else %}sm:col-span-2{% endif %}">
        {% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="bru-label">{{ field.label }}{% if field.required %} <span class="text-accent">*</span>{% endif %}</label>{% endif %}
        {% if field.type == "textarea" %}
        <textarea id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" rows="5"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="bru-field"></textarea>
        {% elif field.type == "select" %}
        <select id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}"{% if field.required %} required{% endif %} class="bru-field">
          {% if field.placeholder %}<option value="">{{ field.placeholder }}</option>{% endif %}
          {% for opt in field.options %}<option value="{{ opt.value }}">{{ opt.label|default:opt.value }}</option>{% endfor %}
        </select>
        {% else %}
        <input id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" type="{{ field.type|default:"text" }}"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="bru-field">
        {% endif %}
      </div>
      {% endfor %}
      <div class="hidden" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
      <div class="sm:col-span-2">
        <button type="submit" class="bru-btn bru-btn-solid">{{ submitLabel|default:"Send message" }}</button>
      </div>
    {% endform %}
    {% endwith %}
    {% endif %}
  </div>
</section>
{% endwith %}
