<section class='{% render 'fn.get_section_padding', section: section %}' {{ section.shopify_attributes }}>
  <div class='container mx-auto'>
    <div x-data='blazeSlider()'>
      <div class='blaze-slider' x-ref='slider'>
        <div class='blaze-container'>
          <div class='blaze-track-container overflow-visible'>
            <div class='blaze-track'>
              {% for block in section.blocks %}
                <div class='rounded-md bg-white w-full items-end min-h-[750px] flex text-white p-12 lg:p-20 relative'>
                  {% if block.settings.image %}
                    {{
                      block.settings.image
                      | image_url: width: 2500, format: 'webp'
                      | image_tag:
                        loading: 'eager',
                        class: 'absolute left-0 top-0 w-full max-w-none h-full object-cover object-center'
                    }}
                  {% endif %}
                  <div
                    class='absolute top-0 left-0 background-gradient opacity-80 w-full h-full'
                  ></div>
                  <div class='relative z-10'>
                    {% if block.settings.show_rating %}
                      <div class='mb-8'>
                        {% render 'google-maps-rating', class: 'text-white' %}
                      </div>
                    {% endif %}
                    <h1 class='mb-2 uppercase text-6xl lg:text-7xl font-bold tracking-[-0.06em] mt-auto'>
                      {{ block.settings.title }}
                    </h1>
                    {% if block.settings.content %}
                      <p class='text-white opacity-65 text-xl'>
                        {{ block.settings.content }}
                      </p>
                    {% endif %}

                    {% if block.settings.button_link and block.settings.button_text %}
                      <a
                        href='{{ block.settings.button_link }}'
                        class='mt-8 inline-block bg-accent py-3 px-5 uppercase text-brown text-xl font-bold rounded-sm'
                      >
                        {{ block.settings.button_text }}
                      </a>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Hero Slider",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "id": "image",
          "label": "Image",
          "type": "image_picker"
        },
        {
          "id": "show_rating",
          "label": "Show Rating",
          "type": "checkbox",
          "default": false
        },
        {
          "id": "title",
          "label": "Title",
          "type": "text",
          "default": "Title"
        },
        {
          "id": "content",
          "label": "Content",
          "type": "text"
        },
        {
          "id": "button_link",
          "label": "Button Link",
          "type": "url"
        },
        {
          "id": "button_text",
          "label": "Button Text",
          "type": "text",
          "default": "Shop now"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero Slider",
      "settings": {
        "padding_top": "base",
        "padding_bottom": "base"
      },
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "image": "https://images.unsplash.com/photo-1536383794906-773f6a5210be?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            "show_rating": true,
            "title": "Equipment for the Modern Overlander",
            "content": "Adventure with confidence, knowing your gear is designed for reliability and performance.",
            "button_link": "shopify://collections/all-products",
            "button_text": "Explore Gear"
          }
        },
        {
          "type": "slide",
          "settings": {
            "image": "https://images.unsplash.com/photo-1639419376675-b6e660a61247?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            "show_rating": false,
            "title": "Roof Space 4",
            "content": "Hard Shell tent that sleeps up to 6 Comfortably",
            "button_link": "#",
            "button_text": "Explore Roof Tents"
          }
        }
      ]
    }
  ]
}
{% endschema %}