{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

<div class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="page-width section-{{ section.id }}-padding">
    {%- unless section.settings.main_title == blank and section.settings.main_subtitle == blank -%}
      <div class="timeline-heading animate-item animate-item--child index-0">
        {%- unless section.settings.main_title == blank -%}
          <h2
            class="timeline-heading-text {{ section.settings.heading_size }} title-with-highlight"
            style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }};"
          >
            {{ section.settings.main_title }}
          </h2>
        {%- endunless -%}
        {%- unless section.settings.main_subtitle == blank -%}
          <div class="rte">
            {{ section.settings.main_subtitle }}
          </div>
        {%- endunless -%}
      </div>
    {%- endunless -%}

    <div
      class="
        content-and-timeline
        {% if section.settings.desktop_layout == 'timeline_first' %}desktop-timeline-first{% endif %}
        {% if section.settings.mobile_layout == 'timeline_first' %}mobile-timeline-first{% endif %}
        {% unless section.settings.show_images %}no-images{% endunless %}
      "
    >
      {%- if section.settings.show_images -%}
        <div class="content-container animate-item animate-item--child index-1">
          {%- if section.settings.image_layout == 'single' -%}
            {%- comment -%} Single static image layout {%- endcomment -%}
            <div class="timeline-single-image">
              <div class="timeline-image" style="border-radius: {{ section.settings.image_border_radius }}px;">
                {%- if section.settings.single_image != blank -%}
                  {%- capture sizes -%}
                    (min-width: 750px) 500px, 300px
                  {%- endcapture -%}
                  {{
                    section.settings.single_image
                    | image_url: width: 1000
                    | image_tag: loading: 'lazy', sizes: sizes, widths: '300, 500, 750, 1000'
                  }}
                {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
                {%- unless section.settings.single_image_label == blank -%}
                  <div class="timeline-image-label">{{ section.settings.single_image_label }}</div>
                {%- endunless -%}
              </div>
            </div>
          {%- elsif section.settings.image_layout == 'grid' -%}
            {%- comment -%} 4-image grid layout {%- endcomment -%}
            <div class="timeline-images">
              {%- for i in (1..4) -%}
                {%- assign image_setting = 'image_' | append: i -%}
                {%- assign label_setting = 'image_' | append: i | append: '_label' -%}
                {%- assign enable_setting = 'enable_image_' | append: i -%}
                {%- if section.settings[enable_setting] -%}
                  <div class="timeline-image" style="border-radius: {{ section.settings.image_border_radius }}px;">
                    {%- if section.settings[image_setting] != blank -%}
                      {%- capture sizes -%}
                        (min-width: 750px) 300px, 150px
                      {%- endcapture -%}
                      {{
                        section.settings[image_setting]
                        | image_url: width: 600
                        | image_tag: loading: 'lazy', sizes: sizes, widths: '150, 300, 450, 600'
                      }}
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                    {%- unless section.settings[label_setting] == blank -%}
                      <div class="timeline-image-label">{{ section.settings[label_setting] }}</div>
                    {%- endunless -%}
                  </div>
                {%- endif -%}
              {%- endfor -%}
            </div>
          {%- else -%}
            {%- comment -%} Per-block images desktop view (clickable/interactive) {%- endcomment -%}
            <div class="timeline-images-clickable">
              {%- for block in section.blocks -%}
                <div
                  class="timeline-image-desktop-{{ section.id }} {% if forloop.first %}active{% endif %}"
                  data-block-id="{{ block.id }}"
                  style="border-radius: {{ section.settings.image_border_radius }}px;"
                >
                  {%- if block.settings.block_image != blank -%}
                    {%- capture sizes -%}
                      (min-width: 750px) 500px, 300px
                    {%- endcapture -%}
                    {{
                      block.settings.block_image
                      | image_url: width: 1000
                      | image_tag: loading: 'lazy', sizes: sizes, widths: '300, 500, 750, 1000'
                    }}
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                  {%- unless block.settings.block_image_label == blank -%}
                    <div class="timeline-image-label">{{ block.settings.block_image_label }}</div>
                  {%- endunless -%}
                </div>
              {%- endfor -%}
            </div>
          {%- endif -%}
        </div>
      {%- endif -%}

      <div class="timeline-container animate-item animate-item--child index-2">
        <div class="timeline-list">
          {%- for block in section.blocks -%}
            <div
              class="timeline-item {% if section.settings.image_layout == 'per-block' %}{% if forloop.first %}active{% endif %}{% endif %}"
              id="timeline-{{ block.id }}"
              {{ block.shopify_attributes }}
            >
              {% if section.settings.image_layout == 'per-block' %}
                <div class="timeline-toggle" data-block-id="{{ block.id }}">
                  <div class="timeline-week">{{ block.settings.week_label }}</div>
                </div>
                <div class="timeline-description-wrapper {% unless forloop.first %}hide{% endunless %}">
                  <div class="timeline-description rte">{{ block.settings.description }}</div>
                  {%- if section.settings.show_images
                    and section.settings.image_layout == 'per-block'
                    and block.settings.block_image != blank
                  -%}
                    <div
                      class="timeline-image-mobile"
                      style="border-radius: {{ section.settings.image_border_radius }}px;"
                    >
                      {%- capture sizes -%}
                    (min-width: 750px) 300px, 150px
                  {%- endcapture -%}
                      {{
                        block.settings.block_image
                        | image_url: width: 600
                        | image_tag: loading: 'lazy', sizes: sizes, widths: '150, 300, 450, 600'
                      }}
                      {%- unless block.settings.block_image_label == blank -%}
                        <div class="timeline-image-label">{{ block.settings.block_image_label }}</div>
                      {%- endunless -%}
                    </div>
                  {%- endif -%}
                </div>
                {%- comment -%} Hidden element for height calculation {%- endcomment -%}
                <div class="timeline-height-calc">
                  <div class="timeline-description rte">{{ block.settings.description }}</div>
                  {%- if section.settings.show_images
                    and section.settings.image_layout == 'per-block'
                    and block.settings.block_image != blank
                  -%}
                    <div
                      class="timeline-image-mobile"
                      style="border-radius: {{ section.settings.image_border_radius }}px;"
                    >
                      {%- capture sizes -%}
                    (min-width: 750px) 300px, 150px
                  {%- endcapture -%}
                      {{
                        block.settings.block_image
                        | image_url: width: 600
                        | image_tag: loading: 'lazy', sizes: sizes, widths: '150, 300, 450, 600'
                      }}
                      {%- unless block.settings.block_image_label == blank -%}
                        <div class="timeline-image-label">{{ block.settings.block_image_label }}</div>
                      {%- endunless -%}
                    </div>
                  {%- endif -%}
                </div>
              {% else %}
                <div class="timeline-week">{{ block.settings.week_label }}</div>
                <div class="timeline-description rte">{{ block.settings.description }}</div>
              {% endif %}
            </div>
          {%- endfor -%}
        </div>
      </div>
    </div>

    {%- if section.settings.button_label != blank -%}
      <div class="timeline-button animate-item animate-item--child index-3">
        <a
          {% if section.settings.link %}
            href="{{ section.settings.link }}"
          {% else %}
            role="link" aria-disabled="true"
          {% endif %}
          class="button btn--mt-center {% if section.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
        >
          {{- section.settings.button_label | escape -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

<style>
  /* Main section styling */
  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --accent-color: {{ section.settings.custom_colors_accent.red }}, {{ section.settings.custom_colors_accent.green }}, {{ section.settings.custom_colors_accent.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
  }

  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  /* Layout structure */
  .content-and-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Centered timeline when images are disabled */
  .content-and-timeline.no-images {
    display: block;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Desktop layout */
  @media screen and (min-width: 900px) {
    .content-and-timeline:not(.no-images) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }

    /* When timeline should be first on desktop */
    .content-and-timeline.desktop-timeline-first:not(.no-images) .timeline-container {
      grid-column: 1;
      grid-row: 1;
    }

    .content-and-timeline.desktop-timeline-first:not(.no-images) .content-container {
      grid-column: 2;
      grid-row: 1;
    }

    /* When images should be first on desktop (default) */
    .content-and-timeline:not(.desktop-timeline-first):not(.no-images) .content-container {
      grid-column: 1;
      grid-row: 1;
    }

    .content-and-timeline:not(.desktop-timeline-first):not(.no-images) .timeline-container {
      grid-column: 2;
      grid-row: 1;
    }
  }

  /* Mobile layout */
  @media screen and (max-width: 899px) {
    .mobile-timeline-first .timeline-container {
      order: -1;
    }
  }

  .content-container {
    width: 100%;
  }

  .timeline-container {
    width: 100%;
  }

  /* Timeline styling with dynamic spacing */
  .timeline-list {
    position: relative;
    padding-left: {{ section.settings.timeline_content_spacing }}rem;
    width: 100%;
  }

  .timeline-list::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 4px;
    background: {{ section.settings.timeline_line_color }};
  }

  .timeline-item {
    position: relative;
    margin-bottom: 2rem;
    cursor: pointer;
  }

  .timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-{{ section.settings.timeline_content_spacing }}rem + 2rem - 12px);
    top: 1rem;
    width: 24px;
    height: 24px;
    background: rgba(var(--color-background), 1);
    border-radius: 50%;
    border: 4px solid {{ section.settings.timeline_dot_color }};
    transition: all 0.3s ease;
  }

  .timeline-item.active::before {
    background: {{ section.settings.timeline_dot_color }};
    box-shadow: 0 0 0 4px {{ section.settings.timeline_dot_color }}33;
  }

  /* Mobile timeline spacing adjustments */
  @media screen and (max-width: 749px) {
    .timeline-list {
      padding-left: calc({{ section.settings.timeline_content_spacing }}rem * 0.75);
    }
    .timeline-list::before {
      left: 1.625rem;
    }
    .timeline-item::before {
      left: calc(-{{ section.settings.timeline_content_spacing }}rem * 0.75 + 1.625rem - 10px);
      width: 20px;
      height: 20px;
      top: 0.8rem;
    }
  }

  /* Timeline toggle (week label) */
  .timeline-toggle {
    cursor: pointer;
  }

  .timeline-week {
    font-size: 2.4rem;
    font-weight: bold;
    color: rgba(var(--color-foreground), 1);
    margin-bottom: 0;
    line-height: 1.3;
    transition: color 0.3s ease;
  }

  .timeline-item.active .timeline-week {
    color: {{ section.settings.timeline_dot_color }};
  }

  /* Timeline description wrapper with animation */
  .timeline-description-wrapper {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    margin-top: 1rem;
  }

  .timeline-description-wrapper.hide {
    height: 0 !important;
    margin-top: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .timeline-description {
    color: rgba(var(--color-foreground), 0.9);
    line-height: 1.8;
    font-size: 1.6rem;
    margin-left: 0.5rem;
  }

  /* Hidden height calculator */
  .timeline-height-calc {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* Image styling with border radius */
  .timeline-image,
  .timeline-image-mobile,
  .timeline-image-desktop-{{ section.id }} {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: {{ section.settings.image_border_radius }}px;
  }

  .timeline-image img,
  .timeline-image-mobile img,
  .timeline-image-desktop-{{ section.id }} img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .timeline-image:hover img,
  .timeline-image-mobile:hover img,
  .timeline-image-desktop-{{ section.id }}:hover img {
    transform: scale(1.03);
  }

  .timeline-image-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: {{ section.settings.image_label_background }};
    color: {{ section.settings.image_label_text }};
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
  }

  /* Mobile image within timeline item */
  .timeline-image-mobile {
    margin-top: 1.5rem;
    display: block;
  }

  /* 4-image grid layout */
  .timeline-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  /* Desktop per-block images */
  .timeline-images-clickable {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .timeline-image-desktop-{{ section.id }} {
    display: none;
    width: 100%;
  }

  .timeline-image-desktop-{{ section.id }}.active {
    display: block;
  }

  @media screen and (max-width: 899px) {
    .timeline-images-clickable {
      display: none;
    }

    .timeline-image-mobile {
      display: block;
    }
  }

  @media screen and (min-width: 900px) {
    .timeline-image-mobile {
      display: none;
    }
  }

  /* Timeline heading using theme's heading system */
  .timeline-heading {
    text-align: center;
    margin-bottom: 4rem;
  }

  .timeline-heading .h0,
  .timeline-heading .h1,
  .timeline-heading .h2 {
    margin-bottom: 1.5rem;
    color: rgba(var(--color-foreground), 1);
  }

  .timeline-heading .rte {
    font-size: 1.5rem;
    color: rgba(var(--color-foreground), 0.85);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
  }

  .timeline-single-image {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .timeline-single-image .timeline-image {
    width: 100%;
    aspect-ratio: unset;
  }

  /* Desktop alignment fix */
  @media screen and (min-width: 900px) {
    .content-and-timeline:not(.no-images) {
      align-items: center;
    }

    .content-and-timeline:not(.no-images) .content-container {
      display: flex;
      align-items: center;
      min-height: 100%;
    }

    .timeline-single-image {
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .timeline-single-image {
      max-width: 100%;
    }

    .timeline-heading .rte {
      font-size: 1.3rem;
    }

    .timeline-week {
      font-size: 2rem;
    }

    .timeline-description {
      font-size: 1.4rem;
    }

    .timeline-images {
      gap: 1.5rem;
    }

    .timeline-image-label {
      font-size: 1.1rem;
      padding: 0.8rem;
    }
  }

  .timeline-heading-text em {
    {% if section.settings.italic_style == 'italic' %}
    text-decoration: none !important;
    font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{section.settings.underlinetextcolor}} !important;
      text-decoration-thickness: {{section.settings.underlinethickness}}px !important;
    {% endif %}
  }

  .timeline-button {
    text-align: center;
    margin-top: 5rem;
  }

  /* Gradient text for bold elements when enabled */
  {% if section.settings.enable_gradient %}
    .timeline-heading-text strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  {% if section.settings.enable_week_label_styling %}
    .timeline-week {
      display: inline-block;
      background: {{ section.settings.week_label_background }};
      color: {{ section.settings.week_label_text_color }};
      border: {{ section.settings.week_label_border_width }}px solid {{ section.settings.week_label_border_color }};
      border-radius: {{ section.settings.week_label_border_radius }}px;
      padding: 0.8rem 1.6rem;
      margin-bottom: 1.5rem;
      font-size: {{ section.settings.week_label_font_size }}px;
    }
  {% endif %}
</style>

<script>
(function() {
  const sectionId = '{{ section.id }}';
  const autoClose = {{ section.settings.auto_close_items }};
  const initialOpen = {{ section.settings.initial_open_items }};
  const imageLayout = '{{ section.settings.image_layout }}';
  
  // Only run interactive functionality for per-block image layout
  if (imageLayout !== 'per-block') {
    return;
  }
  
  function initTimelineSection() {
    const timelineItems = document.querySelectorAll(`#shopify-section-${sectionId} .timeline-item`);
    const toggles = document.querySelectorAll(`#shopify-section-${sectionId} .timeline-toggle`);
    const descriptionWrappers = document.querySelectorAll(`#shopify-section-${sectionId} .timeline-description-wrapper`);
    const heightCalcs = document.querySelectorAll(`#shopify-section-${sectionId} .timeline-height-calc`);
    const desktopImages = document.querySelectorAll(`#shopify-section-${sectionId} .timeline-image-desktop-${sectionId}`);

    function calculateHeight(index) {
      return heightCalcs[index].scrollHeight;
    }

    function activateImage(blockId) {
      desktopImages.forEach(img => img.classList.remove('active'));
      const targetImage = document.querySelector(`#shopify-section-${sectionId} .timeline-image-desktop-${sectionId}[data-block-id="${blockId}"]`);
      if (targetImage) {
        targetImage.classList.add('active');
      }
    }

    function openItem(index) {
      if (autoClose) {
        descriptionWrappers.forEach((wrapper, i) => {
          if (i !== index && !wrapper.classList.contains('hide')) {
            closeItem(i);
          }
        });
      }

      const height = calculateHeight(index);
      const wrapper = descriptionWrappers[index];
      
      wrapper.style.height = '0px';
      wrapper.offsetHeight; // Force reflow
      
      wrapper.style.height = `${height}px`;
      wrapper.classList.remove('hide');
      timelineItems[index].classList.add('active');
      
      const blockId = toggles[index].getAttribute('data-block-id');
      activateImage(blockId);
    }

    function closeItem(index) {
      const wrapper = descriptionWrappers[index];
      wrapper.style.height = '0px';
      timelineItems[index].classList.remove('active');
      
      wrapper.addEventListener('transitionend', function handler() {
        wrapper.classList.add('hide');
        wrapper.removeEventListener('transitionend', handler);
      }, { once: true });
    }

    function toggleItem(index) {
      if (descriptionWrappers[index].classList.contains('hide')) {
        openItem(index);
      } else {
        closeItem(index);
      }
    }

    toggles.forEach((toggle, index) => {
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        toggleItem(index);
      });
    });

    function recalculateHeights() {
      descriptionWrappers.forEach((wrapper, index) => {
        if (!wrapper.classList.contains('hide')) {
          const height = calculateHeight(index);
          wrapper.style.height = `${height}px`;
        }
      });
    }

    let resizeTimer;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(recalculateHeights, 250);
    });

    // Initialize - open first item(s)
    function initialize() {
      const itemsToOpen = autoClose ? 1 : Math.min(initialOpen, timelineItems.length);
      for (let i = 0; i < itemsToOpen; i++) {
        openItem(i);
      }
      setTimeout(recalculateHeights, 100);
    }

    // Observer for content changes
    const observer = new MutationObserver(() => {
      recalculateHeights();
    });

    const section = document.querySelector(`#shopify-section-${sectionId}`);
    if (section) {
      observer.observe(section, { childList: true, subtree: true });
    }

    initialize();
    window.addEventListener('load', () => setTimeout(recalculateHeights, 100));
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTimelineSection);
  } else {
    initTimelineSection();
  }

  if (typeof Shopify !== 'undefined' && Shopify.designMode) {
    document.addEventListener('shopify:section:load', function(event) {
      if (event.detail.sectionId === sectionId) {
        initTimelineSection();
      }
    });
    document.addEventListener('shopify:section:unload', function(event) {
      if (event.detail.sectionId === sectionId) {
        initTimelineSection();
      }
    });
  }
})();
</script>

{% schema %}
{
  "name": "Timeline results",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "inline_richtext",
      "id": "main_title",
      "default": "VISIBLE RESULTS IN ONLY <em>6 WEEKS</em>.",
      "label": "Main Heading",
      "info": "Use <em> tags for underlined text."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "richtext",
      "id": "main_subtitle",
      "default": "<p>Follow your progress and see what's ahead on your path to success</p>",
      "label": "Subheading"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        {
          "value": "italic",
          "label": "Normal Italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom Font Family"
        }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
          "value": "custom_google_font",
          "label": "Custom Google Font"
        }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "300",
          "label": "Light (300)"
        },
        {
          "value": "400",
          "label": "Normal (400)"
        },
        {
          "value": "500",
          "label": "Medium (500)"
        },
        {
          "value": "600",
          "label": "Semi Bold (600)"
        },
        {
          "value": "700",
          "label": "Bold (700)"
        },
        {
          "value": "800",
          "label": "Extra Bold (800)"
        },
        {
          "value": "900",
          "label": "Black (900)"
        }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },

    {
      "type": "header",
      "content": "Interactive Options"
    },
    {
      "type": "checkbox",
      "id": "auto_close_items",
      "label": "Auto-close other items",
      "default": true,
      "info": "When enabled, opening one timeline item will close all others (only applies to per-block images layout)"
    },
    {
      "type": "range",
      "id": "initial_open_items",
      "min": 0,
      "max": 5,
      "step": 1,
      "label": "Initially open items",
      "default": 1,
      "info": "Number of timeline items to show open on page load (only applies to per-block images layout)"
    },
    {
      "type": "header",
      "content": "Layout Options"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "options": [
        {
          "value": "images_first",
          "label": "Images first"
        },
        {
          "value": "timeline_first",
          "label": "Timeline first"
        }
      ],
      "default": "timeline_first",
      "label": "Desktop layout"
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "options": [
        {
          "value": "images_first",
          "label": "Images first"
        },
        {
          "value": "timeline_first",
          "label": "Timeline first"
        }
      ],
      "default": "timeline_first",
      "label": "Mobile layout"
    },
    {
      "type": "header",
      "content": "Timeline styling"
    },
    {
      "type": "color",
      "id": "timeline_line_color",
      "label": "Timeline line color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "timeline_dot_color",
      "label": "Timeline dot color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "timeline_content_spacing",
      "min": 5,
      "max": 7,
      "step": 0.5,
      "unit": "rem",
      "label": "Timeline content spacing",
      "info": "Controls how far the timeline text is from the line and dots",
      "default": 5.5
    },
    {
      "type": "header",
      "content": "Week label styling"
    },
    {
      "type": "checkbox",
      "id": "enable_week_label_styling",
      "label": "Enable week label styling",
      "default": true,
      "info": "Add background, border and rounded corners to week labels"
    },
    {
      "type": "color",
      "id": "week_label_background",
      "label": "Week label background",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "week_label_text_color",
      "label": "Week label text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "week_label_border_color",
      "label": "Week label border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "week_label_border_width",
      "min": 1,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Week label border width",
      "default": 2
    },
    {
      "type": "range",
      "id": "week_label_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Week label border radius",
      "default": 50
    },
    {
      "type": "range",
      "id": "week_label_font_size",
      "min": 10,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Week label font size",
      "default": 14
    },
    {
      "type": "header",
      "content": "Images"
    },
    {
      "type": "checkbox",
      "id": "show_images",
      "label": "Show images",
      "default": true
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Image border radius",
      "default": 12
    },
    {
      "type": "select",
      "id": "image_layout",
      "options": [
        {
          "value": "per-block",
          "label": "Clickable Per-block images"
        },
        {
          "value": "grid",
          "label": "4-image grid (2x2)"
        },
        {
          "value": "single",
          "label": "Single static image"
        }
      ],
      "default": "grid",
      "label": "Image layout",
      "info": "Per-block images change when you click timeline items and enable interactive features"
    },
    {
      "type": "header",
      "content": "Single Image Settings",
      "info": "Used when 'Single static image' layout is selected"
    },
    {
      "type": "image_picker",
      "id": "single_image",
      "label": "Single image"
    },
    {
      "type": "text",
      "id": "single_image_label",
      "label": "Single image label",
      "default": "Results"
    },
    {
      "type": "header",
      "content": "4-Image Grid Settings",
      "info": "Used when '4-image grid' layout is selected"
    },
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image 1"
    },
    {
      "type": "checkbox",
      "id": "enable_image_1",
      "label": "Enable Image 1",
      "default": true
    },
    {
      "type": "text",
      "id": "image_1_label",
      "label": "Image 1 label",
      "default": "Week 1"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Image 2"
    },
    {
      "type": "checkbox",
      "id": "enable_image_2",
      "label": "Enable Image 2",
      "default": true
    },
    {
      "type": "text",
      "id": "image_2_label",
      "label": "Image 2 label",
      "default": "Week 6"
    },
    {
      "type": "image_picker",
      "id": "image_3",
      "label": "Image 3"
    },
    {
      "type": "checkbox",
      "id": "enable_image_3",
      "label": "Enable Image 3",
      "default": true
    },
    {
      "type": "text",
      "id": "image_3_label",
      "label": "Image 3 label",
      "default": "Week 12"
    },
    {
      "type": "image_picker",
      "id": "image_4",
      "label": "Image 4"
    },
    {
      "type": "checkbox",
      "id": "enable_image_4",
      "label": "Enable Image 4",
      "default": true
    },
    {
      "type": "text",
      "id": "image_4_label",
      "label": "Image 4 label",
      "default": "Week 18"
    },
    {
      "type": "color",
      "id": "image_label_background",
      "label": "Image label background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "image_label_text",
      "label": "Image label text",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "label": "Use outline button style",
      "default": false
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 60
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "header",
      "content": "Custom colors",
      "info": "Applied when Custom color scheme is selected"
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#2E2A39",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Background gradient"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Background image"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile background image"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#FFFFFF",
      "label": "Text color"
    },
    {
      "type": "color",
      "id": "custom_colors_accent",
      "default": "#FFCC00",
      "label": "Accent color"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#FFCC00",
      "label": "Button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#000000",
      "label": "Button text"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#FFCC00",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "timeline_item",
      "name": "Timeline Item",
      "settings": [
        {
          "type": "text",
          "id": "week_label",
          "default": "Week 1",
          "label": "Week/Time label"
        },
        {
          "type": "richtext",
          "id": "description",
          "default": "<p>Your scalp is healthier and hair is noticeably more vibrant as it removes toxins and nourishes hair follicles for better growth.</p>",
          "label": "Description"
        },
        {
          "type": "header",
          "content": "Per-Block Image",
          "info": "This image shows when this timeline item is active (only works with 'Per-block images' layout)"
        },
        {
          "type": "image_picker",
          "id": "block_image",
          "label": "Timeline item image"
        },
        {
          "type": "text",
          "id": "block_image_label",
          "label": "Image label",
          "default": "Week 1"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Timeline results",
      "category": "Stats / Results",
      "blocks": [
        {
          "type": "timeline_item",
          "settings": {
            "week_label": "Week 1",
            "description": "<p>Your scalp is healthier and hair is noticeably more vibrant as it removes toxins and nourishes hair follicles for better growth.</p>",
            "block_image_label": "Week 1"
          }
        },
        {
          "type": "timeline_item",
          "settings": {
            "week_label": "Week 6",
            "description": "<p>Hair roots continues to grow back as Ginger Root Extract provides essential nutrients.</p>",
            "block_image_label": "Week 6"
          }
        },
        {
          "type": "timeline_item",
          "settings": {
            "week_label": "Week 12",
            "description": "<p>Newly growing hairs become thicker and stronger. Existing hairs fall out less quickly because they are nourished with nutrients.</p>",
            "block_image_label": "Week 12"
          }
        },
        {
          "type": "timeline_item",
          "settings": {
            "week_label": "Week 18",
            "description": "<p>Your hair is fuller, thicker and has its coverage back as healthy hair growth is achieved, creating long lasting effects.</p>",
            "block_image_label": "Week 18"
          }
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
