{# Main variant for Storybook #}
{% embed 'mercury:components/section/section'
  with {
    background_media: {
      src: componentMetadata.path ~ '/' ~ storybook.main.background_media.src,
      alt: storybook.main.background_media.alt
    }
  }
%}
  {% block header_slot %}
    {{
      include(
        'mercury:heading',
        {
          level: 2,
          heading_text: storybook.main.header_text,
          url: ''
        }
      )
    }}
  {% endblock %}
  {% block main_slot %}
    {% embed 'mercury:group'
      with {
        flex_direction: 'column',
        flex_gap: 'none',
        flex_align: 'center',
        background: 'hg:bg-none',
        radius: 'none'
      }
    %}
      {% block group_slot %}
        {{
          include(
            'mercury:heading',
            {
              level: 2,
              heading_text: 'Group Heading',
              url: ''
            }
          )
        }}
        {{
          include(
            'mercury:text',
            {
              text: '<p>Nulla purus suscipit nostra sagittis lectus sapien gravida ultrices. Euismod condimentum volutpat natoque feugiat consequat rutrum duis tellus vestibulum cubilia.</p>'
            }
          )
        }}
        {{
          include(
            'mercury:button',
            {
              label: 'click me',
              href: 'https://example.com',
              variant: primary
            }
          )
        }}
      {% endblock %}
    {% endembed %}

    {% embed 'mercury:image'
      with {
        size: 'hg:aspect-1/1',
        caption: ''
      }
    %}
      {% block media %}
        <img
          class="hg:h-full hg:w-full hg:object-cover"
          src="{{ componentMetadata.path ~ '/' ~ storybook.main.media.src }}"
          alt="{{ storybook.main.media.alt }}"
        />
      {% endblock %}
    {% endembed %}
  {% endblock %}
  {% block footer_slot %}
    {{ storybook.main.footer_text }}
  {% endblock %}
{% endembed %}
