{%- assign accordion_id = 'product_info_accordion_' | append: block.id -%}
{%- assign accordion_icon_style = block.settings.icon_style | default: 'arrow' -%}

<div class="product-info-accordion no-mobile"
  data-product-accordion="{{ accordion_id }}"
  style="--margin-top: {{ block.settings.margin_top }}px; --margin-bottom: {{ block.settings.margin_bottom }}px;"
  {{ block.shopify_attributes }}>

  {%- if block.settings.heading != blank -%}
    <h3 class="product-accordion-heading">{{ block.settings.heading }}</h3>
  {%- endif -%}

  <div class="product-accordion-items">

    {%- assign faq_1_content = blank -%}
    {%- if block.settings.faq_1_page != blank -%}
      {%- assign faq_1_content = pages[block.settings.faq_1_page].content -%}
    {%- elsif block.settings.faq_1_answer != blank -%}
      {%- assign faq_1_content = block.settings.faq_1_answer | replace: '[description]', product.description -%}
    {%- endif -%}
    {%- if block.settings.faq_1_question != blank and faq_1_content != blank -%}
      <div class="product-accordion-item" data-accordion-item="">
        <button class="product-accordion-question" type="button" aria-expanded="false" data-accordion-trigger="">
          <span class="product-accordion-question-text">{{ block.settings.faq_1_question }}</span>
          <span class="product-accordion-icon">
            {%- if accordion_icon_style == 'plus' -%}
              <svg class="icon-faq-plus" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            {%- else -%}
              <svg class="icon-faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            {%- endif -%}
          </span>
        </button>
        <div class="product-accordion-answer" data-accordion-content="" style="max-height: 0px;">
          <div class="product-accordion-answer-inner rte">{{ faq_1_content }}</div>
        </div>
      </div>
    {%- endif -%}

    {%- assign faq_2_content = blank -%}
    {%- if block.settings.faq_2_page != blank -%}
      {%- assign faq_2_content = pages[block.settings.faq_2_page].content -%}
    {%- elsif block.settings.faq_2_answer != blank -%}
      {%- assign faq_2_content = block.settings.faq_2_answer | replace: '[description]', product.description -%}
    {%- endif -%}
    {%- if block.settings.faq_2_question != blank and faq_2_content != blank -%}
      <div class="product-accordion-item" data-accordion-item="">
        <button class="product-accordion-question" type="button" aria-expanded="false" data-accordion-trigger="">
          <span class="product-accordion-question-text">{{ block.settings.faq_2_question }}</span>
          <span class="product-accordion-icon">
            {%- if accordion_icon_style == 'plus' -%}
              <svg class="icon-faq-plus" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            {%- else -%}
              <svg class="icon-faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            {%- endif -%}
          </span>
        </button>
        <div class="product-accordion-answer" data-accordion-content="" style="max-height: 0px;">
          <div class="product-accordion-answer-inner rte">{{ faq_2_content }}</div>
        </div>
      </div>
    {%- endif -%}

    {%- assign faq_3_content = blank -%}
    {%- if block.settings.faq_3_page != blank -%}
      {%- assign faq_3_content = pages[block.settings.faq_3_page].content -%}
    {%- elsif block.settings.faq_3_answer != blank -%}
      {%- assign faq_3_content = block.settings.faq_3_answer | replace: '[description]', product.description -%}
    {%- endif -%}
    {%- if block.settings.faq_3_question != blank and faq_3_content != blank -%}
      <div class="product-accordion-item" data-accordion-item="">
        <button class="product-accordion-question" type="button" aria-expanded="false" data-accordion-trigger="">
          <span class="product-accordion-question-text">{{ block.settings.faq_3_question }}</span>
          <span class="product-accordion-icon">
            {%- if accordion_icon_style == 'plus' -%}
              <svg class="icon-faq-plus" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            {%- else -%}
              <svg class="icon-faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            {%- endif -%}
          </span>
        </button>
        <div class="product-accordion-answer" data-accordion-content="" style="max-height: 0px;">
          <div class="product-accordion-answer-inner rte">{{ faq_3_content }}</div>
        </div>
      </div>
    {%- endif -%}

    {%- assign faq_4_content = blank -%}
    {%- if block.settings.faq_4_page != blank -%}
      {%- assign faq_4_content = pages[block.settings.faq_4_page].content -%}
    {%- elsif block.settings.faq_4_answer != blank -%}
      {%- assign faq_4_content = block.settings.faq_4_answer | replace: '[description]', product.description -%}
    {%- endif -%}
    {%- if block.settings.faq_4_question != blank and faq_4_content != blank -%}
      <div class="product-accordion-item" data-accordion-item="">
        <button class="product-accordion-question" type="button" aria-expanded="false" data-accordion-trigger="">
          <span class="product-accordion-question-text">{{ block.settings.faq_4_question }}</span>
          <span class="product-accordion-icon">
            {%- if accordion_icon_style == 'plus' -%}
              <svg class="icon-faq-plus" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            {%- else -%}
              <svg class="icon-faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            {%- endif -%}
          </span>
        </button>
        <div class="product-accordion-answer" data-accordion-content="" style="max-height: 0px;">
          <div class="product-accordion-answer-inner rte">{{ faq_4_content }}</div>
        </div>
      </div>
    {%- endif -%}

    {%- assign faq_5_content = blank -%}
    {%- if block.settings.faq_5_page != blank -%}
      {%- assign faq_5_content = pages[block.settings.faq_5_page].content -%}
    {%- elsif block.settings.faq_5_answer != blank -%}
      {%- assign faq_5_content = block.settings.faq_5_answer | replace: '[description]', product.description -%}
    {%- endif -%}
    {%- if block.settings.faq_5_question != blank and faq_5_content != blank -%}
      <div class="product-accordion-item" data-accordion-item="">
        <button class="product-accordion-question" type="button" aria-expanded="false" data-accordion-trigger="">
          <span class="product-accordion-question-text">{{ block.settings.faq_5_question }}</span>
          <span class="product-accordion-icon">
            {%- if accordion_icon_style == 'plus' -%}
              <svg class="icon-faq-plus" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            {%- else -%}
              <svg class="icon-faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            {%- endif -%}
          </span>
        </button>
        <div class="product-accordion-answer" data-accordion-content="" style="max-height: 0px;">
          <div class="product-accordion-answer-inner rte">{{ faq_5_content }}</div>
        </div>
      </div>
    {%- endif -%}

  </div>
</div>

<style>
  [data-product-accordion="{{ accordion_id }}"] {
    width: 100%;
    margin-top: var(--margin-top, 2rem);
    margin-bottom: var(--margin-bottom, 2rem);
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-heading {
    font-size: 24px;
    font-weight: 700;
    color: {{ block.settings.question_text_color }};
    margin: 0 0 16px 0;
    line-height: 1.3;
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-items { width: 100%; }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-item {
    {%- if block.settings.show_border -%}border: 1px solid {{ block.settings.border_color }};{%- endif -%}
    border-radius: {{ block.settings.border_radius }}px;
    margin-bottom: 4px;
    overflow: hidden;
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-item:last-child { margin-bottom: 0; }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: {{ block.settings.question_bg_color }};
    color: {{ block.settings.question_text_color }};
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: {%- if block.settings.question_font_bold -%}600{%- else -%}400{%- endif -%};
    transition: all 0.3s ease;
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question:hover {
    background: {{ block.settings.question_hover_bg_color }};
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question[aria-expanded="true"] {
    background: {{ block.settings.active_bg_color }};
    color: {{ block.settings.active_text_color }};
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question-text { flex: 1; }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-icon {
    flex-shrink: 0;
    margin-left: 1rem;
    display: flex;
    align-items: center;
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-icon svg {
    transition: transform 0.3s ease;
  }
  {%- if accordion_icon_style == 'plus' -%}
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question[aria-expanded="true"] .icon-faq-plus {
    transform: rotate(45deg);
  }
  {%- else -%}
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-question[aria-expanded="true"] .icon-faq-arrow {
    transform: rotate(180deg);
  }
  {%- endif -%}
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-answer {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }
  [data-product-accordion="{{ accordion_id }}"] .product-accordion-answer-inner {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 400;
    color: {{ block.settings.answer_text_color }};
    background-color: {{ block.settings.active_bg_color }};
    line-height: 1.6;
  }
  @media screen and (max-width: 749px) {
    [data-product-accordion="{{ accordion_id }}"] .product-accordion-heading { font-size: 20px; }
    [data-product-accordion="{{ accordion_id }}"] .product-accordion-question { font-size: 14px; padding: 12px 16px; }
    [data-product-accordion="{{ accordion_id }}"] .product-accordion-answer-inner { font-size: 13px; padding: 12px 16px; }
  }
</style>

<script>
(function() {
  function initProductAccordion(accordionId) {
    var accordion = document.querySelector('[data-product-accordion="' + accordionId + '"]');
    if (!accordion) return;
    var items = accordion.querySelectorAll('[data-accordion-item]');
    items.forEach(function(item) {
      var trigger = item.querySelector('[data-accordion-trigger]');
      var content = item.querySelector('[data-accordion-content]');
      if (trigger && content) {
        var newTrigger = trigger.cloneNode(true);
        trigger.parentNode.replaceChild(newTrigger, trigger);
        trigger = newTrigger;
        content = item.querySelector('[data-accordion-content]');
        trigger.addEventListener('click', function() {
          var isOpen = trigger.getAttribute('aria-expanded') === 'true';
          if (isOpen) {
            trigger.setAttribute('aria-expanded', 'false');
            content.style.maxHeight = content.scrollHeight + 'px';
            requestAnimationFrame(function() { content.style.maxHeight = '0'; });
          } else {
            trigger.setAttribute('aria-expanded', 'true');
            content.style.maxHeight = content.scrollHeight + 'px';
          }
        });
        content.style.maxHeight = trigger.getAttribute('aria-expanded') === 'true' ? content.scrollHeight + 'px' : '0';
      }
    });
  }
  var accordionId = '{{ accordion_id }}';
  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', function() { initProductAccordion(accordionId); })
    : initProductAccordion(accordionId);
  document.addEventListener('shopify:block:select', function() { initProductAccordion(accordionId); });
  document.addEventListener('shopify:section:load', function() { initProductAccordion(accordionId); });
})();
</script>