{% schema %}
{
  "name": "FAQ Section (By OnHOW)",
  "class": "faq-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "FAQ"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Frequently Asked Questions"
    },
    {
      "type": "text",
      "id": "more_text",
      "label": "More questions text",
      "default": "More questions?"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Link text",
      "default": "See our full FAQ"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "Link URL"
    }
  ],
  "blocks": [
    {
      "type": "faq",
      "name": "FAQ Item",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "How does section.store work?"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>Add your answer here. This can include multiple paragraphs and formatting.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Modern FAQ",
      "blocks": [
        {
          "type": "faq"
        },
        {
          "type": "faq"
        },
        {
          "type": "faq"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="page-width">
  <div class="faq-container">
    {% if section.settings.heading != blank %}
      <h2 class="faq-main-heading">{{ section.settings.heading }}</h2>
    {% endif %}
    
    {% if section.settings.subheading != blank %}
      <h3 class="faq-subheading">{{ section.settings.subheading }}</h3>
    {% endif %}
    
    <div class="faq-items">
      {% for block in section.blocks %}
        {% if block.type == 'faq' %}
          <div class="faq-item" {{ block.shopify_attributes }}>
            <button class="faq-question" aria-expanded="false">
              {{ block.settings.question }}
              <span class="faq-icon">+</span>
            </button>
            <div class="faq-answer">
              {{ block.settings.answer }}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    
    {% if section.settings.link_url != blank %}
      <div class="faq-more">
        {% if section.settings.more_text != blank %}
          <span>{{ section.settings.more_text }}</span>
        {% endif %}
        <a href="{{ section.settings.link_url }}" class="faq-link">{{ section.settings.link_text }}</a>
      </div>
    {% endif %}
  </div>
</div>

<style>
  .faq-container {
    margin: 60px auto;
    max-width: 1200px;
    text-align: center;
  }
  
  .faq-main-heading {
    font-size: 5rem;
    margin-bottom: 10px;
    font-weight: 700;
  }
  
  .faq-subheading {
    font-size: 3rem;
    margin-bottom: 40px;
    font-weight: 700;
  }
  
  .faq-items {
    margin-bottom: 40px;
  }
  
  .faq-item {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f2f2f2;
    text-align: left;
    transition: transform 0.3s ease;
  }
  
  .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 30px;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .faq-question:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
  }
  
  .faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
  }
  
  .faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
  }
  
  .faq-question[aria-expanded="true"] + .faq-answer {
    padding: 0 30px 20px;
    max-height: 1000px;
  }
  
  .faq-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
  }
  
  .faq-link {
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
  }
  
  .faq-link:hover {
    opacity: 0.8;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const faqQuestions = document.querySelectorAll('.faq-question');
    
    faqQuestions.forEach(question => {
      question.addEventListener('click', function() {
        const expanded = this.getAttribute('aria-expanded') === 'true' || false;
        this.setAttribute('aria-expanded', !expanded);
      });
    });
  });
</script>