{% set c = module.content %}
{% set s = module.style %}
{% set b = module.behavior %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes. Visual styling comes from the global accordion system
   (css/components/accordion.css); this module only adds module-chrome classes
   plus the global .accordion--* variant hooks for icon type / position. #}
{% set module_classes = "accordion" %}
{% set module_classes = module_classes ~ " accordion--align-" ~ s.layout.alignment %}
{% if s.icon_style.position == "left" %}
  {% set module_classes = module_classes ~ " accordion--icon-left" %}
{% endif %}
{% if s.icon_style.type == "plus" %}
  {% set module_classes = module_classes ~ " accordion--plus" %}
{% elif s.icon_style.type == "arrow" %}
  {% set module_classes = module_classes ~ " accordion--arrow" %}
{% elif s.icon_style.type == "none" %}
  {% set module_classes = module_classes ~ " accordion--none" %}
{% endif %}
{% if s.layout.dividers %}
  {% set module_classes = module_classes ~ " accordion--dividers" %}
{% endif %}
{% if s.card_style.border %}
  {% set module_classes = module_classes ~ " accordion--bordered" %}
{% endif %}
{% if s.card_style.shadow == "sm" %}
  {% set module_classes = module_classes ~ " accordion--shadow" %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

{# Generate unique ID for JS targeting #}
{% set accordion_id = a.custom_id ? a.custom_id : "accordion-" ~ module.id %}

<section class="{{ module_classes }}"
         id="{{ accordion_id }}"
         style="
           --acc-max-width: {{ s.layout.max_width }};
           --acc-gap: {{ s.layout.gap }};
           --acc-pt: {{ spacing.padding_top }};
           --acc-pb: {{ spacing.padding_bottom }};
           {# Bridge module fields to the global accordion system's custom properties #}
           --accordion-bg: {{ s.card_style.background.css }};
           --accordion-radius: {{ s.card_style.border_radius }};
           --accordion-spacing: 0;
           --accordion-padding: {{ s.question_style.padding }};
           --accordion-font-weight: {{ s.question_style.font_weight }};
           --accordion-font-size: {{ s.question_style.font_size }};
           --accordion-content-padding: 0 {{ s.answer_style.padding }} {{ s.answer_style.padding }};
           --accordion-content-font-size: {{ s.answer_style.font_size }};
           --accordion-border: {% if s.card_style.border %}var(--color-border){% else %}transparent{% endif %};
           --accordion-icon-color: {% if s.icon_style.color.color %}{{ s.icon_style.color.color }}{% else %}var(--color-text-muted){% endif %};
         "
         {% if not b.allow_multiple %}data-single-open="true"{% endif %}>

  {# Section Header #}
  {% if c.section_heading or c.section_subheading %}
    <header class="accordion__header">
      {% if c.section_heading %}
        <h2 class="accordion__heading">{{ c.section_heading|escape }}</h2>
      {% endif %}
      {% if c.section_subheading %}
        <p class="accordion__subheading">{{ c.section_subheading|escape }}</p>
      {% endif %}
    </header>
  {% endif %}

  {# Accordion Items — native <details>/<summary> styled by the global accordion
     system. The expand/collapse icon is supplied by the global summary::after
     (icon type/position come from the .accordion--* classes on the section). #}
  <div class="accordion__container">
    {% for item in c.items %}
      <details class="accordion__item" {% if item.is_open %}open{% endif %}>
        <summary class="accordion__question">{{ item.question|escape }}</summary>
        <div class="accordion__answer">
          {{ item.answer }}
        </div>
      </details>
    {% endfor %}
  </div>
</section>

{# FAQ Schema Markup for SEO #}
{% if b.enable_schema and c.items|length > 0 %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {% for item in c.items %}
      {
        "@type": "Question",
        "name": {{ item.question|tojson }},
        "acceptedAnswer": {
          "@type": "Answer",
          "text": {{ item.answer|striptags|tojson }}
        }
      }{% if not loop.last %},{% endif %}
      {% endfor %}
    ]
  }
  </script>
{% endif %}

{# module.css is auto-attached by HubSpot for custom modules — no explicit
   require_css needed (it risked a duplicate stylesheet request). #}

{% if not b.allow_multiple %}
{% require_js position="footer" defer=true %}
<script>
(function() {
  var container = document.getElementById('{{ accordion_id }}');
  if (!container || !container.dataset.singleOpen) return;

  container.addEventListener('toggle', function(e) {
    if (!e.target.open) return;

    var items = container.querySelectorAll('.accordion__item[open]');
    items.forEach(function(item) {
      if (item !== e.target) {
        item.removeAttribute('open');
      }
    });
  }, true);
})();
</script>
{% end_require_js %}
{% endif %}