<section class="roaster-profile" data-reveal>
  <div class="container">
    <div class="roaster-profile__layout">
      <div class="roaster-profile__media" data-reveal>
        {%- if section.settings.image != blank -%}
          <img src="{{ section.settings.image | image_url: width: 1000 }}" srcset="{{ section.settings.image | image_url: width: 500 }} 500w, {{ section.settings.image | image_url: width: 750 }} 750w, {{ section.settings.image | image_url: width: 1000 }} 1000w" sizes="(max-width: 768px) 100vw, 50vw" alt="{{ section.settings.image.alt | escape }}" loading="lazy" class="roaster-profile__img">
        {%- else -%}
          <img src="{{ 'brand-story.png' | asset_url }}" alt="{{ section.settings.heading | escape }}" loading="lazy" class="roaster-profile__img" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
          <div class="roaster-profile__placeholder" style="display:none;">
            <svg viewBox="0 0 600 500" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="100" y="50" width="400" height="400" rx="8"/><circle cx="300" cy="250" r="50"/></svg>
          </div>
        {%- endif -%}
      </div>
      <div class="roaster-profile__content" data-reveal style="--index: 2">
        {%- if section.settings.eyebrow != blank -%}
          <span class="roaster-profile__eyebrow">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        {%- if section.settings.heading != blank -%}
          <h2 class="roaster-profile__heading">{{ section.settings.heading }}</h2>
        {%- endif -%}
        {%- if section.settings.text != blank -%}
          <div class="roaster-profile__body">{{ section.settings.text }}</div>
        {%- endif -%}
        {%- if section.settings.signature != blank -%}
          <p class="roaster-profile__signature">{{ section.settings.signature }}</p>
        {%- endif -%}
        {%- if section.settings.cta_text != blank -%}
          <a href="{{ section.settings.cta_url | default: '/pages/about' }}" class="btn btn--primary roaster-profile__cta">{{ section.settings.cta_text }}</a>
        {%- endif -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Roaster profile",
  "class": "section-roaster-profile",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "MEET THE ROASTER" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "A family of makers, one cup at a time." },
    { "type": "richtext", "id": "text", "label": "Body", "default": "<p>We started Morning Dose out of a tiny garage in Seattle, roasting 2-lb batches for friends. Five years later we're still small-batch, still sourcing direct, still obsessing over every bag that leaves the roastery.</p>" },
    { "type": "text", "id": "signature", "label": "Signature line", "default": "— Nate & Léa, co-founders" },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Our Story" },
    { "type": "url", "id": "cta_url", "label": "Button link" }
  ],
  "presets": [{ "name": "Roaster profile" }]
}
{% endschema %}
