<section class="atelier-journal" data-reveal>
  <div class="container">
    <div class="atelier-journal__layout">
      <div class="atelier-journal__text">
        {%- if section.settings.eyebrow != blank -%}
          <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        {%- if section.settings.heading != blank -%}
          <h2 class="section-heading"><em>{{ section.settings.heading }}</em></h2>
        {%- endif -%}
        {%- if section.settings.text != blank -%}
          <p class="atelier-journal__desc">{{ section.settings.text }}</p>
        {%- endif -%}
      </div>
      <div class="atelier-journal__form-wrap">
        {%- form 'customer', id: 'journal-signup' -%}
          <input type="hidden" name="contact[tags]" value="journal">
          <div class="atelier-journal__field-group">
            <label for="journal-email" class="visually-hidden">{{ section.settings.email_placeholder }}</label>
            <input type="email" id="journal-email" name="contact[email]" class="atelier-journal__input" placeholder="{{ section.settings.email_placeholder }}" required autocomplete="email">
            <button type="submit" class="btn btn--primary atelier-journal__btn">{{ section.settings.cta_text }}</button>
          </div>
        {%- endform -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Atelier Journal",
  "class": "section-atelier-journal",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "THE JOURNAL" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Stay in Touch" },
    { "type": "textarea", "id": "text", "label": "Description" },
    { "type": "text", "id": "email_placeholder", "label": "Email placeholder", "default": "Your email address" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Subscribe" }
  ],
  "presets": [{ "name": "Atelier Journal" }]
}
{% endschema %}