<style>
  .contact-page {
    padding: 3rem 1rem 5rem;
    max-width: 640px;
    margin: 0 auto;
  }

  .contact-page__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    text-align: center;
  }

  .contact-page__subheading {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    opacity: 0.7;
    margin: 0 0 2rem;
    text-align: center;
    line-height: 1.5;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .contact-form__label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .contact-form__label--optional::after {
    content: ' (optional)';
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.5;
  }

  .contact-form__input,
  .contact-form__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius, 6px);
    outline: none;
    transition: border-color 0.2s ease;
  }

  .contact-form__input:focus,
  .contact-form__textarea:focus {
    border-color: var(--color-primary);
  }

  .contact-form__textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.6;
  }

  .contact-form__submit {
    align-self: flex-start;
    padding: 0.85rem 2rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing, 0.04em);
    text-transform: var(--btn-transform, uppercase);
    color: var(--color-background);
    background: var(--color-primary);
    border: none;
    border-radius: var(--btn-radius, 6px);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .contact-form__submit:hover {
    opacity: 0.88;
  }

  .contact-form__message {
    padding: 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .contact-form__message--success {
    background: color-mix(in srgb, green 8%, var(--color-background));
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, green 20%, transparent);
  }

  .contact-form__message--error {
    background: color-mix(in srgb, red 8%, var(--color-background));
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, red 20%, transparent);
  }
</style>

<section class="contact-page" data-reveal>
  {%- if section.settings.heading != blank -%}
    <h1 class="contact-page__heading">{{ section.settings.heading }}</h1>
  {%- endif -%}

  {%- if section.settings.subheading != blank -%}
    <p class="contact-page__subheading">{{ section.settings.subheading }}</p>
  {%- endif -%}

  {% form 'contact' %}
    {%- if form.posted_successfully? -%}
      <div class="contact-form__message contact-form__message--success">
        Your message has been sent. We will get back to you as soon as possible.
      </div>
    {%- endif -%}

    {%- if form.errors -%}
      <div class="contact-form__message contact-form__message--error">
        {{ form.errors | default_errors }}
      </div>
    {%- endif -%}

    <div class="contact-form">
      <div class="contact-form__field">
        <label class="contact-form__label" for="ContactName">Name</label>
        <input
          type="text"
          id="ContactName"
          name="contact[name]"
          class="contact-form__input"
          placeholder="Your name"
          required
          autocomplete="name"
          value="{{ form.name }}"
        >
      </div>

      <div class="contact-form__field">
        <label class="contact-form__label" for="ContactEmail">Email</label>
        <input
          type="email"
          id="ContactEmail"
          name="contact[email]"
          class="contact-form__input"
          placeholder="your@email.com"
          required
          autocomplete="email"
          value="{{ form.email }}"
        >
      </div>

      {%- if section.settings.show_phone_field -%}
        <div class="contact-form__field">
          <label class="contact-form__label contact-form__label--optional" for="ContactPhone">Phone</label>
          <input
            type="tel"
            id="ContactPhone"
            name="contact[phone]"
            class="contact-form__input"
            placeholder="Your phone number"
            autocomplete="tel"
            value="{{ form.phone }}"
          >
        </div>
      {%- endif -%}

      <div class="contact-form__field">
        <label class="contact-form__label" for="ContactMessage">Message</label>
        <textarea
          id="ContactMessage"
          name="contact[body]"
          class="contact-form__textarea"
          placeholder="How can we help you?"
          required
        >{{ form.body }}</textarea>
      </div>

      <button type="submit" class="contact-form__submit">Send Message</button>
    </div>
  {% endform %}
</section>

{% schema %}
{
  "name": "Contact Form",
  "class": "section-main-contact",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Contact Us"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Have a question? We'd love to hear from you."
    },
    {
      "type": "checkbox",
      "id": "show_phone_field",
      "label": "Show phone field",
      "default": true
    }
  ]
}
{% endschema %}
