<section class="hero hero--slideshow" data-slideshow data-speed="{{ section.settings.autoplay_speed }}" data-parallax-intensity="{{ section.settings.parallax_intensity | default: 20 }}" data-nav-style="{{ section.settings.nav_style | default: 'glass' }}">
  <div class="hero__slides">
    {%- for block in section.blocks -%}
      {%- comment -%} Depth parallax: only enabled via explicit theme setting (not asset existence —
           Shopify asset_url always returns a URL even for missing files) {%- endcomment -%}
      {%- assign has_parallax = false -%}
      {%- if forloop.first and section.settings.enable_parallax -%}
        {%- assign has_parallax = true -%}
      {%- endif -%}

      <div class="hero__slide{% if forloop.first %} is-active{% endif %}{% if has_parallax %} hero__slide--parallax{% endif %}" {{ block.shopify_attributes }} aria-hidden="{% if forloop.first %}false{% else %}true{% endif %}">
        <div class="hero__slide-media">
          {%- if has_parallax -%}
            {%- comment -%} Depth parallax layers — 2.5D effect on mouse/gyro {%- endcomment -%}
            <div class="hero__parallax-bg">
              <img src="{{ 'hero-bg.png' | asset_url }}" alt="" loading="eager" fetchpriority="high">
            </div>
            {%- comment -%} Mid-layer only included when 3-layer parallax is generated. Asset existence can't be checked in Liquid, so this is gated by a theme setting. {%- endcomment -%}
            {%- if section.settings.parallax_layers == 3 -%}
              <div class="hero__parallax-mid">
                <img src="{{ 'hero-mid.png' | asset_url }}" alt="" loading="eager">
              </div>
            {%- endif -%}
            <div class="hero__parallax-fg">
              <img src="{{ 'hero-fg.png' | asset_url }}" alt="" loading="eager">
            </div>
          {%- endif -%}
          {%- if block.settings.image != blank -%}
            <picture>
              {%- if block.settings.image_mobile != blank -%}
                <source media="(max-width: 768px)" srcset="{{ block.settings.image_mobile | image_url: width: 1200 }}">
              {%- endif -%}
              <img
                src="{{ block.settings.image | image_url: width: 1920 }}"
                srcset="
                  {{ block.settings.image | image_url: width: 800 }} 800w,
                  {{ block.settings.image | image_url: width: 1200 }} 1200w,
                  {{ block.settings.image | image_url: width: 1920 }} 1920w
                "
                sizes="100vw"
                alt="{{ block.settings.image.alt | escape }}"
                loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
                {% if forloop.first %}fetchpriority="high"{% endif %}
                class="hero__slide-image"
              >
            </picture>
          {%- else -%}
            {%- comment -%} Fallback: use per-slide hero images from assets/ (hero-1.png, hero-2.png, etc.)
                 Falls back to hero.png for slide 1 if hero-1.png doesn't exist. {%- endcomment -%}
            {%- assign hero_img = 'hero-' | append: forloop.index | append: '.png' -%}
            {%- if forloop.first -%}
              {%- if block.settings.video_enabled -%}
                <video autoplay muted loop playsinline poster="{{ 'hero.png' | asset_url }}" class="hero__slide-image hero__slide-video">
                  <source src="{{ 'hero.mp4' | asset_url }}" type="video/mp4">
                </video>
              {%- endif -%}
              <img src="{{ hero_img | asset_url }}" alt="" loading="eager" fetchpriority="high" class="hero__slide-image" onerror="this.src='{{ 'hero.png' | asset_url }}';this.onerror=function(){this.style.display='none';this.nextElementSibling.style.display='flex';};">
            {%- else -%}
              <img src="{{ hero_img | asset_url }}" alt="" loading="lazy" class="hero__slide-image" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
            {%- endif -%}
            <div class="hero__slide-placeholder" style="display:none;"></div>
          {%- endif -%}
          <div class="hero__overlay"></div>
        </div>

        <div class="hero__slide-content">
          {%- if block.settings.eyebrow != blank -%}
            <span class="hero__eyebrow">{{ block.settings.eyebrow }}</span>
          {%- endif -%}
          <h2 class="hero__heading{% if forloop.first %} h1{% endif %}">{{ block.settings.heading }}</h2>
          {%- if block.settings.subheading != blank -%}
            <p class="hero__subheading">{{ block.settings.subheading }}</p>
          {%- endif -%}
          <div class="hero__actions">
            {%- if block.settings.cta_text != blank -%}
              <a href="{{ block.settings.cta_url | default: '/collections/all' }}" class="btn btn--primary">{{ block.settings.cta_text }}</a>
            {%- endif -%}
            {%- if block.settings.cta_secondary_text != blank -%}
              <a href="{{ block.settings.cta_secondary_url | default: '#' }}" class="btn btn--outline">{{ block.settings.cta_secondary_text }}</a>
            {%- endif -%}
          </div>
        </div>
      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 -%}
    <div class="hero__nav">
      <button class="hero__arrow hero__prev" aria-label="{{ 'accessibility.previous' | t }}" type="button">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      <div class="hero__dots">
        {%- for block in section.blocks -%}
          <button class="hero__dot{% if forloop.first %} is-active{% endif %}" aria-label="Slide {{ forloop.index }}" aria-current="{% if forloop.first %}true{% else %}false{% endif %}" type="button" data-slide="{{ forloop.index0 }}"></button>
        {%- endfor -%}
      </div>
      <span class="hero__counter" aria-live="polite">1 / {{ section.blocks.size }}</span>
      <button class="hero__arrow hero__next" aria-label="{{ 'accessibility.next' | t }}" type="button">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
    </div>
  {%- endif -%}
</section>

{% schema %}
{
  "name": "Hero slideshow",
  "class": "section-hero-slideshow",
  "settings": [
    {
      "type": "range",
      "id": "autoplay_speed",
      "label": "Autoplay speed (seconds)",
      "min": 3,
      "max": 10,
      "step": 1,
      "default": 5,
      "info": "Set to 0 to disable autoplay"
    },
    {
      "type": "checkbox",
      "id": "enable_parallax",
      "label": "Enable depth parallax on first slide",
      "default": false,
      "info": "Requires hero-bg.png and hero-fg.png in theme assets"
    },
    {
      "type": "range",
      "id": "parallax_intensity",
      "label": "Parallax depth intensity",
      "min": 0,
      "max": 40,
      "step": 5,
      "default": 20,
      "info": "Controls how much the depth layers shift on mouse movement. Set to 0 to disable."
    },
    {
      "type": "select",
      "id": "parallax_layers",
      "label": "Parallax layer count",
      "options": [
        { "value": "2", "label": "2 layers (foreground + background)" },
        { "value": "3", "label": "3 layers (foreground + midground + background)" }
      ],
      "default": "2",
      "info": "Must match the number of layers generated by the depth script."
    },
    {
      "type": "select",
      "id": "nav_style",
      "label": "Slideshow navigation style",
      "options": [
        { "value": "glass", "label": "Glass (arrows + dots)" },
        { "value": "minimal", "label": "Minimal (dots only)" },
        { "value": "dash", "label": "Dashes" },
        { "value": "pill", "label": "Pill (expanding active)" },
        { "value": "number", "label": "Numbered (1/3)" }
      ],
      "default": "glass"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Background image",
          "info": "Recommended: 1920x800px"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Mobile image",
          "info": "Optional. Shown on screens \u2264768px. Falls back to desktop image if not set."
        },
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow text"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Slide heading"
        },
        {
          "type": "textarea",
          "id": "subheading",
          "label": "Subheading"
        },
        {
          "type": "text",
          "id": "cta_text",
          "label": "Primary button text",
          "default": "Shop Now"
        },
        {
          "type": "text",
          "id": "cta_url",
          "label": "Primary button URL"
        },
        {
          "type": "text",
          "id": "cta_secondary_text",
          "label": "Secondary button text"
        },
        {
          "type": "text",
          "id": "cta_secondary_url",
          "label": "Secondary button URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero slideshow",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "heading": "Welcome to our store",
            "subheading": "Discover our latest collection.",
            "cta_text": "Shop Now"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "New arrivals",
            "subheading": "Fresh drops every week.",
            "cta_text": "View Collection"
          }
        }
      ]
    }
  ]
}
{% endschema %}