<section class="bean-to-brew" data-reveal>
  <div class="container">
    {%- if section.settings.eyebrow != blank -%}
      <span class="bean-to-brew__eyebrow">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    {%- if section.settings.heading != blank -%}
      <h2 class="bean-to-brew__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="bean-to-brew__timeline">
      {%- for block in section.blocks -%}
        <div class="bean-to-brew__step" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          <span class="bean-to-brew__number">{{ block.settings.number }}</span>
          {%- unless forloop.last -%}
            <span class="bean-to-brew__connector" aria-hidden="true"></span>
          {%- endunless -%}
          <h3 class="bean-to-brew__step-title">{{ block.settings.title }}</h3>
          {%- if block.settings.description != blank -%}
            <p class="bean-to-brew__step-desc">{{ block.settings.description }}</p>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Bean to Brew",
  "class": "section-bean-to-brew",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "How Your Coffee Gets Here" }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        { "type": "text", "id": "number", "label": "Step number", "default": "01" },
        { "type": "text", "id": "title", "label": "Title", "default": "Step" },
        { "type": "textarea", "id": "description", "label": "Description" }
      ]
    }
  ],
  "presets": [{ "name": "Bean to Brew", "blocks": [{ "type": "step" }, { "type": "step" }, { "type": "step" }, { "type": "step" }] }]
}
{% endschema %}