<section class="first-cup" data-reveal>
  <div class="container">
    <div class="first-cup__layout">
      <div class="first-cup__copy">
        {%- if section.settings.eyebrow != blank -%}
          <span class="first-cup__eyebrow">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        {%- if section.settings.heading != blank -%}
          <h2 class="first-cup__heading">{{ section.settings.heading }}</h2>
        {%- endif -%}
        {%- if section.settings.subheading != blank -%}
          <p class="first-cup__sub">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </div>
      <div class="first-cup__form-col">
        {%- form 'customer', id: 'newsletter-form', class: 'newsletter-form' -%}
          <input type="hidden" name="contact[tags]" value="newsletter">
          <div class="first-cup__field">
            <input type="email" name="contact[email]" placeholder="{{ 'newsletter.email_placeholder' | t }}" required autocomplete="email" class="first-cup__input">
            <button type="submit" class="btn btn--primary first-cup__btn">{{ 'newsletter.submit' | t }}</button>
          </div>
          {%- if form.posted_successfully? -%}
            <p class="first-cup__success">{{ 'newsletter.success' | t }}</p>
          {%- endif -%}
        {%- endform -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "First Cup",
  "class": "section-first-cup",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "JOIN THE RITUAL" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Your First Cup Is on Us" },
    { "type": "textarea", "id": "subheading", "label": "Subheading" }
  ],
  "presets": [{ "name": "First Cup" }]
}
{% endschema %}