<section class="basecamp-story basecamp-story--stacked" data-reveal>
  <div class="basecamp-story__hero-image">
    {%- if section.settings.image != blank -%}
      <img src="{{ section.settings.image | image_url: width: 1400 }}" srcset="{{ section.settings.image | image_url: width: 700 }} 700w, {{ section.settings.image | image_url: width: 1000 }} 1000w, {{ section.settings.image | image_url: width: 1400 }} 1400w" sizes="100vw" alt="{{ section.settings.image.alt | escape }}" loading="lazy" class="basecamp-story__banner">
    {%- else -%}
      <img src="{{ 'brand-story.png' | asset_url }}" alt="Our basecamp" loading="lazy" class="basecamp-story__banner">
    {%- endif -%}
  </div>
  <div class="container">
    <div class="basecamp-story__content">
      {%- if section.settings.pull_quote != blank -%}
        <blockquote class="basecamp-story__pull-quote">
          <p class="basecamp-story__quote-text">&ldquo;{{ section.settings.pull_quote }}&rdquo;</p>
        </blockquote>
      {%- endif -%}
      <div class="basecamp-story__columns">
        <div class="basecamp-story__text-col">
          {%- if section.settings.eyebrow != blank -%}
            <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
          {%- endif -%}
          <h2 class="section-heading">{{ section.settings.heading }}</h2>
        </div>
        <div class="basecamp-story__body-col">
          {%- if section.settings.text != blank -%}
            <div class="basecamp-story__body">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.cta_text != blank -%}
            <a href="{{ section.settings.cta_url | default: '/pages/about' }}" class="btn btn--primary">{{ section.settings.cta_text }}</a>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Basecamp Story",
  "class": "section-basecamp-story",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "OUR MISSION" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Started at Basecamp" },
    { "type": "richtext", "id": "text", "label": "Story text" },
    { "type": "textarea", "id": "pull_quote", "label": "Pull quote" },
    { "type": "text", "id": "cta_text", "label": "Button text" },
    { "type": "text", "id": "cta_url", "label": "Button URL" },
    { "type": "image_picker", "id": "image", "label": "Image" }
  ],
  "presets": [{ "name": "Basecamp Story" }]
}
{% endschema %}