{#
  Contact page — Phase 1 version.

  The form is deliberately inert: no `method`, no `action`, all inputs
  and the submit button carry the `disabled` attribute. A muted note
  explains the form is coming soon; if `ADMIN_CONTACT_EMAIL` is set in
  the environment we render a `mailto:` link above the form so visitors
  still have a way to reach the farm.

  Phase 5 replaces this template with a working POST handler, hCaptcha,
  honeypot, and rate limiting.

  Context:
    - contact_email : str | None  (from settings.admin_contact_email)
    - active_nav    : "contact"
#}
{% extends "public/base.html" %}

{% block title %}Contact — Chicken Babies R Us{% endblock %}
{% block meta_description %}Get in touch with Chicken Babies R Us.{% endblock %}

{% block content %}
  <article class="page-article">
    <header class="page-article__header">
      <h1 class="page-article__title">Get in touch</h1>
    </header>

    <p>
      We'd love to hear from you &mdash; questions about the birds,
      availability, or just to say hi.
    </p>

    {% if contact_email %}
      <p class="contact-mailto">
        The easiest way to reach us right now is email:
        <a href="mailto:{{ contact_email }}">{{ contact_email }}</a>.
      </p>
    {% else %}
      <p class="contact-mailto contact-mailto--muted">
        A direct email address will be posted here soon.
      </p>
    {% endif %}

    <p class="contact-form__note" role="note">
      Secure contact form coming soon.
    </p>

    {# action="" and no method = form cannot submit. Every input is
       disabled so screen readers and the keyboard both respect the
       "not-yet-available" state. #}
    <form class="contact-form" action="" aria-describedby="contact-form-note" novalidate>
      <div class="contact-form__field">
        <label for="contact-name">Name</label>
        <input type="text"
               id="contact-name"
               name="name"
               autocomplete="name"
               disabled>
      </div>

      <div class="contact-form__field">
        <label for="contact-email">Email</label>
        <input type="email"
               id="contact-email"
               name="email"
               autocomplete="email"
               disabled>
      </div>

      <div class="contact-form__field">
        <label for="contact-message">Message</label>
        <textarea id="contact-message"
                  name="message"
                  rows="6"
                  disabled></textarea>
      </div>

      <div class="contact-form__actions">
        <button type="submit" class="btn btn--primary" disabled>
          Send message
        </button>
      </div>
    </form>
  </article>
{% endblock %}