{%- liquid
  assign section_id = 'parallax-' | append: section.id
  assign parallax_enabled = section.settings.enable_parallax
  assign parallax_on_mobile = section.settings.parallax_on_mobile

  assign image = section.settings.image
  assign image_position_setting = section.settings.image_position
  assign image_position_parts = image_position_setting | split: ' '
  assign image_position_x = image_position_parts[0] | default: 'center'
  assign image_position_y_keyword = image_position_parts[1] | default: 'center'

  assign initial_bg_y_percent = '50' 
  if image_position_y_keyword == 'top'
    assign initial_bg_y_percent = '0'
  elsif image_position_y_keyword == 'bottom'
    assign initial_bg_y_percent = '100'
  endif

  assign section_height_type = section.settings.section_height_type
  assign section_height_px = section.settings.section_height_px | append: 'px'
  assign section_height_vh = section.settings.section_height_vh | append: 'vh'
  assign section_height_css = section_height_px
  if section_height_type == 'viewport'
    assign section_height_css = section_height_vh
  elsif section_height_type == 'auto'
    assign section_height_css = 'auto'
  endif

  assign enable_content_block = section.settings.enable_content_block
  assign text_align = section.settings.text_alignment
  assign content_vertical_align = section.settings.content_vertical_alignment
  assign content_horizontal_align = section.settings.content_horizontal_alignment
  assign content_max_width = section.settings.content_max_width | append: 'px'

  assign enable_text_background_box = section.settings.enable_text_background_box
  assign text_bg_box_color = section.settings.text_background_box_color
  assign text_bg_box_border_radius = section.settings.text_background_box_border_radius | append: 'px'
  assign text_bg_box_padding_vertical = section.settings.text_background_box_padding_vertical | append: 'px'
  assign text_bg_box_padding_horizontal = section.settings.text_background_box_padding_horizontal | append: 'px'

  assign heading_text = section.settings.heading
  assign heading_color = section.settings.heading_color
  assign heading_font_size = section.settings.heading_font_size | append: 'px'

  assign description_text = section.settings.description
  assign description_color = section.settings.description_color
  assign description_font_size = section.settings.description_font_size | append: 'px'

  assign enable_button = section.settings.enable_button
  assign button_label = section.settings.button_label
  assign button_link = section.settings.button_link
  assign button_bg_color = section.settings.button_bg_color
  assign button_text_color = section.settings.button_text_color
  assign button_font_size = section.settings.button_font_size | append: 'px'
  assign button_border_radius = section.settings.button_border_radius | append: 'px'
-%}

<style>
  #{{ section_id }} .parallax-wrapper {
    position: relative;
    overflow: hidden;
    min-height: {{ section_height_css }};
    display: flex;
    flex-direction: column;
    justify-content: {{ content_vertical_align }};
    align-items: {{ content_horizontal_align }};
    background-color: {{ section.settings.bg_color | default: '#f0f0f0' }};
    box-sizing: border-box;
  }

  #{{ section_id }} .parallax-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: {{ image_position_x }} {{ initial_bg_y_percent }}%;
    z-index: 1; 
    {% if image != blank %}
      background-image: url('{{ image | image_url: width: 1920 }}');
    {% endif %}
    will-change: background-position;
  }

  #{{ section_id }} .parallax-content {
    position: relative;
    z-index: 2; 
    text-align: {{ text_align }};
    max-width: {{ content_max_width }};
    width: 100%;
    box-sizing: border-box;
    {% if enable_text_background_box %}
      background-color: {{ text_bg_box_color }};
      border-radius: {{ text_bg_box_border_radius }};
      padding: {{ text_bg_box_padding_vertical }} {{ text_bg_box_padding_horizontal }};
    {% else %}
      padding: 20px;
    {% endif %}
  }

  {% if content_horizontal_align == 'flex-start' %}
    #{{ section_id }} .parallax-content { margin-left: 0; margin-right: auto; }
  {% elsif content_horizontal_align == 'center' %}
    #{{ section_id }} .parallax-content { margin-left: auto; margin-right: auto; }
  {% elsif content_horizontal_align == 'flex-end' %}
    #{{ section_id }} .parallax-content { margin-left: auto; margin-right: 0; }
  {% endif %}

  #{{ section_id }} .parallax-heading {
    color: {{ heading_color }};
    font-size: {{ heading_font_size }};
    {% if section.settings.heading_font.family and section.settings.heading_font.family != 'System Default' %}
      font-family: "{{ section.settings.heading_font.family }}", {{ section.settings.heading_font.fallback_families }};
      font-weight: {{ section.settings.heading_font.weight }};
      font-style: {{ section.settings.heading_font.style }};
    {% endif %}
    margin-top: 0;
    margin-bottom: 0.5em;
  }

  #{{ section_id }} .parallax-description {
    color: {{ description_color }};
    font-size: {{ description_font_size }};
    {% if section.settings.description_font.family and section.settings.description_font.family != 'System Default' %}
      font-family: "{{ section.settings.description_font.family }}", {{ section.settings.description_font.fallback_families }};
      font-weight: {{ section.settings.description_font.weight }};
      font-style: {{ section.settings.description_font.style }};
    {% endif %}
    margin-bottom: 1em;
  }

  #{{ section_id }} .parallax-description p {
    margin-top: 0;
    margin-bottom: 0.75em;
  }
  #{{ section_id }} .parallax-description p:last-child {
    margin-bottom: 0;
  }

  #{{ section_id }} .parallax-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: {{ button_bg_color }};
    color: {{ button_text_color }};
    font-size: {{ button_font_size }};
    {% if section.settings.button_font.family and section.settings.button_font.family != 'System Default' %}
      font-family: "{{ section.settings.button_font.family }}", {{ section.settings.button_font.fallback_families }};
      font-weight: {{ section.settings.button_font.weight }};
      font-style: {{ section.settings.button_font.style }};
    {% endif %}
    text-decoration: none;
    border-radius: {{ button_border_radius }};
    transition: opacity 0.3s ease;
    margin-top: 10px;
  }

  #{{ section_id }} .parallax-button:hover {
    opacity: 0.85;
  }

  /* Mobile Specific Styles */
  @media (max-width: 768px) {
    #{{ section_id }} .parallax-wrapper {
      padding-left: 15px;
      padding-right: 15px;
    }

    {% unless parallax_on_mobile %}
      #{{ section_id }} .parallax-image-container.parallax-effect {
        background-position-y: {{ initial_bg_y_percent }}% !important;
      }
    {% endunless %}
  }
</style>

<div id="{{ section_id }}">
  <div class="parallax-wrapper">
    {% if image != blank %}
      <div class="parallax-image-container {% if parallax_enabled %}parallax-effect{% endif %}"
           data-parallax-speed="{{ section.settings.parallax_speed | default: 0.3 }}"
           data-initial-bg-y="{{ initial_bg_y_percent }}">
      </div>
    {% endif %}

    {% if enable_content_block %}
      <div class="parallax-content">
        {% if heading_text != blank %}
          <h2 class="parallax-heading">{{ heading_text | escape }}</h2>
        {% endif %}

        {% if description_text != blank %}
          <div class="parallax-description">{{ description_text }}</div>
        {% endif %}

        {% if enable_button and button_label != blank and button_link != blank %}
          <a href="{{ button_link }}" class="parallax-button">
            {{ button_label | escape }}
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

{% if parallax_enabled %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const parallaxSection = document.getElementById('{{ section_id }}');
    if (!parallaxSection) return;

    const imageContainer = parallaxSection.querySelector('.parallax-image-container.parallax-effect');
    if (!imageContainer) return;

    const speed = parseFloat(imageContainer.dataset.parallaxSpeed);
    const initialBgYPercent = parseFloat(imageContainer.dataset.initialBgY);
    const isMobile = window.innerWidth <= 768;
    const parallaxAllowedOnMobile = {{ parallax_on_mobile | json }};

    if (isMobile && !parallaxAllowedOnMobile) {
      return;
    }

    let ticking = false;

    function applyParallax() {
      const wrapper = parallaxSection.querySelector('.parallax-wrapper');
      if (!wrapper) return;

      const wrapperRect = wrapper.getBoundingClientRect();
      const scrollY = window.pageYOffset;

      const elementTopRelativeToDocument = wrapperRect.top + scrollY;
      const elementBottomRelativeToDocument = wrapperRect.bottom + scrollY;
      const windowTop = scrollY;
      const windowBottom = scrollY + window.innerHeight;

      if (elementBottomRelativeToDocument > windowTop && elementTopRelativeToDocument < windowBottom) {
        const elementHeight = wrapperRect.height;
        const windowHeight = window.innerHeight;
        const elementCenterY = elementTopRelativeToDocument + elementHeight / 2;
        const viewportCenterY = windowTop + windowHeight / 2;

        let offset = (viewportCenterY - elementCenterY) * speed;
        imageContainer.style.backgroundPositionY = `calc(${initialBgYPercent}% + ${offset}px)`;
      }
      ticking = false;
    }

    function onScroll() {
      if (!ticking) {
        window.requestAnimationFrame(applyParallax);
        ticking = true;
      }
    }

    applyParallax();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', applyParallax, { passive: true });
  });
</script>
{% endif %}

{% schema %}
{
  "name": "Image Parallax",
  "tag": "section",
  "class": "shopify-section-parallax-advanced-v6",
  "settings": [
    {
      "type": "header",
      "content": "Image & Parallax Settings"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background Image"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Section Background Color",
      "info": "Fallback if no image is selected.",
      "default": "#f0f0f0"
    },
    {
      "type": "select",
      "id": "section_height_type",
      "label": "Section Height Type",
      "options": [
        { "value": "pixels", "label": "Pixels (px)" },
        { "value": "viewport", "label": "Viewport Height (vh)" },
        { "value": "auto", "label": "Fit to Content" }
      ],
      "default": "pixels",
      "info": "Auto height with parallax might behave unexpectedly. Fixed heights (px or vh) are generally more stable."
    },
    {
      "type": "range",
      "id": "section_height_px",
      "min": 200,
      "max": 1200,
      "step": 20,
      "unit": "px",
      "label": "Height (Pixels)",
      "default": 500
    },
    {
      "type": "range",
      "id": "section_height_vh",
      "min": 30,
      "max": 100,
      "step": 5,
      "unit": "vh",
      "label": "Height (Viewport)",
      "default": 70
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image Focal Position (X Y)",
      "options": [
        { "value": "left top", "label": "Left Top" },
        { "value": "center top", "label": "Center Top" },
        { "value": "right top", "label": "Right Top" },
        { "value": "left center", "label": "Left Center" },
        { "value": "center center", "label": "Center Center" },
        { "value": "right center", "label": "Right Center" },
        { "value": "left bottom", "label": "Left Bottom" },
        { "value": "center bottom", "label": "Center Bottom" },
        { "value": "right bottom", "label": "Right Bottom" }
      ],
      "default": "center center",
      "info": "Sets the initial static focal point. Parallax effect shifts vertically from this."
    },
    {
      "type": "checkbox",
      "id": "enable_parallax",
      "label": "Enable Parallax Effect for Image",
      "default": true
    },
    {
      "type": "range",
      "id": "parallax_speed",
      "min": 0.0,
      "max": 0.8,
      "step": 0.1,
      "label": "Parallax Intensity",
      "default": 0.3,
      "info": "Controls how much the background image shifts. 0 = minimal shift (more 'fixed' feeling). Higher values = more movement, but still slower than content scroll."
    },
    {
      "type": "checkbox",
      "id": "parallax_on_mobile",
      "label": "Enable Parallax on Mobile",
      "default": false
    },
    {
      "type": "header",
      "content": "Content Block"
    },
    {
      "type": "checkbox",
      "id": "enable_content_block",
      "label": "Enable Content Block (Text, Box, Button)",
      "default": true
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment (inside content box)",
      "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "content_max_width",
      "min": 200,
      "max": 1200,
      "step": 20,
      "unit": "px",
      "label": "Content Max Width",
      "default": 700
    },
    {
      "type": "select",
      "id": "content_vertical_alignment",
      "label": "Content Box Vertical Alignment",
      "options": [ { "value": "flex-start", "label": "Top" }, { "value": "center", "label": "Middle" }, { "value": "flex-end", "label": "Bottom" } ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "content_horizontal_alignment",
      "label": "Content Box Horizontal Alignment",
      "options": [ { "value": "flex-start", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "flex-end", "label": "Right" } ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Text Background Box (Optional)"
    },
    {
      "type": "checkbox",
      "id": "enable_text_background_box",
      "label": "Enable Text Background Box",
      "default": false
    },
    {
      "type": "color",
      "id": "text_background_box_color",
      "label": "Box Background Color",
      "default": "rgba(0,0,0,0.5)"
    },
    {
      "type": "range",
      "id": "text_background_box_border_radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Box Border Radius",
      "default": 10
    },
    {
      "type": "range",
      "id": "text_background_box_padding_vertical",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Box Vertical Padding",
      "default": 20
    },
    {
      "type": "range",
      "id": "text_background_box_padding_horizontal",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Box Horizontal Padding",
      "default": 30
    },
    {
      "type": "header",
      "content": "Heading Text"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Your Parallax Heading"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "heading_font_size",
      "min": 16,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Heading Font Size",
      "default": 48
    },
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Heading Font",
      "default": "sans-serif"
    },
    {
      "type": "header",
      "content": "Description Text"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Use this text to describe your image. Rich text allows for <strong>bolding</strong> and <em>italics</em>.</p>"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Description Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "description_font_size",
      "min": 12,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Description Font Size",
      "default": 18
    },
    {
      "type": "font_picker",
      "id": "description_font",
      "label": "Description Font",
      "default": "sans-serif"
    },
    {
      "type": "header",
      "content": "Button (Optional)"
    },
    {
      "type": "checkbox",
      "id": "enable_button",
      "label": "Enable Button",
      "default": true
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Label",
      "default": "Learn More"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background Color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "button_font_size",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Button Font Size",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Button Border Radius",
      "default": 5
    },
    {
      "type": "font_picker",
      "id": "button_font",
      "label": "Button Font",
      "default": "sans-serif"
    }
  ],
  "presets": [
    {
      "name": "Image Parallax"
    }
  ]
}
{% endschema %}