Comprehensive FAQ Accordion with Help Box

                    <section class="faq-accordion-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="page-width faq-accordion-container">
    <!-- Top Title and Description -->
    <div class="faq-header">
      <div class="faq-title">
        <h2 style="color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px;">{{ section.settings.title }}</h2>
      </div>
      <div class="faq-description">
        <p style="color: {{ section.settings.description_color }}; font-size: {{ section.settings.description_size }}px;">{{ section.settings.description }}</p>
      </div>
    </div>

    <!-- Divider Line -->
    <hr class="faq-divider" />

    <!-- Bottom Content -->
    <div class="faq-content">
      <!-- Left Box -->
      <div class="faq-left-box" style="background-color: {{ section.settings.box_background_color }};">
        <div class="txt-cont">
        <h3 style="color: {{ section.settings.box_title_color }}; font-size: {{ section.settings.box_title_size }}px;">{{ section.settings.box_title }}</h3>
        <p style="color: {{ section.settings.box_text_color }};">{{ section.settings.box_text }}</p>
        </div>
        <a href="{{ section.settings.button_link }}" class="faq-button" style="color: {{ section.settings.button_text_color }}; background-color: {{ section.settings.button_background_color }};">
          {{ section.settings.button_text }}
        </a>
      </div>

      <!-- Right Accordion -->
      <div class="faq-right-accordion">
        <div class="faq-accordion-items">
          {% for block in section.blocks %}
          <div class="faq-accordion-item">
            <button class="faq-accordion-toggle">
              <span class="faq-number">{{ forloop.index | prepend: "00" }}</span>
              {{ block.settings.accordion_title }}
              <span class="faq-icon">+</span>
            </button>
            <div class="faq-accordion-panel">
              <p>{{ block.settings.accordion_text }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<style>
/* General Section Styling */
.faq-accordion-section {
  width: 100%;
}

.faq-accordion-container {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.faq-title h2 {
    margin: 0;
    max-width: 348px;
    line-height: 1.2;
}
.faq-description p {
    margin: 0;
    line-height: 1.4;
    max-width: 348px;
}
.faq-divider {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #e0e0e0;
}

/* Content Section Styling */
.faq-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
  span.faq-icon {
    background: #bee1ff;
    width: 30px;
    height: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.faq-description {
    display: flex;
    justify-content: end;
}
.faq-left-box {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.faq-left-box h3 {
  margin-bottom: 10px;
}

.faq-left-box p {
  margin-bottom: 20px;
}

.faq-button {
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
}

/* Accordion Styling */
.faq-right-accordion {
  display: flex;
  flex-direction: column;
}

.faq-accordion-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-accordion-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-accordion-toggle {
  background: none;
  border: none;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.faq-accordion-toggle:hover {
  background-color: #f9f9f9;
}

.faq-number {
  font-weight: bold;
  margin-right: 10px;
}

.faq-icon {
  transition: transform 0.3s;
}

.faq-accordion-panel {
  height: 0;
  overflow: hidden;
  padding: 0 15px;
  background-color: #fafafa;
  transition: height 0.3s ease, padding 0.3s ease;
}

.faq-accordion-item.open .faq-accordion-panel {
  height: auto;
  padding: 15px;
}

.faq-accordion-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-header {
    grid-template-columns: 1fr;
    text-align: center;
  }
.faq-description{
justify-content:center;
}
  .faq-number {
    font-size: 14px;
}
  .faq-accordion-toggle {
    font-size: 15px;
}
  span.faq-icon {
    width: 20px;
    height: 20px;
    padding: 9px;
}
  .faq-title {
    display: flex;
    justify-content: center;
}
  .faq-content {
    grid-template-columns: 1fr;
  }

  .faq-left-box {
    margin-bottom: 20px;
  }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $('.faq-accordion-toggle').on('click', function () {
    const $item = $(this).closest('.faq-accordion-item');

    // Toggle the current accordion
    if ($item.hasClass('open')) {
      $item.removeClass('open');
    } else {
      $('.faq-accordion-item').removeClass('open');
      $item.addClass('open');
    }
  });
});
</script>

{% schema %}
{
  "name": "FAQ Accordion",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    },
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Asked a Question"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Section Description",
      "default": "We've compiled answers to some of the most commonly asked questions."
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "title_size",
      "label": "Title Font Size",
      "default": 24,
      "min": 14,
      "max": 48,
      "step": 2
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Description Color",
      "default": "#6c6c6c"
    },
    {
      "type": "range",
      "id": "description_size",
      "label": "Description Font Size",
      "default": 16,
      "min": 12,
      "max": 24,
      "step": 1
    },
    {
      "type": "color",
      "id": "box_background_color",
      "label": "Help Box Background Color",
      "default": "#e8ffe8"
    },
    {
      "type": "text",
      "id": "box_title",
      "label": "Help Box Title",
      "default": "Help & Support"
    },
    {
      "type": "color",
      "id": "box_title_color",
      "label": "Help Box Title Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "box_title_size",
      "label": "Help Box Title Font Size",
      "default": 20,
      "min": 14,
      "max": 48,
      "step": 2
    },
    {
      "type": "text",
      "id": "box_text",
      "label": "Help Box Text",
      "default": "Need guidance on placing an order, or require technical assistance? Our support team is here to help."
    },
    {
      "type": "color",
      "id": "box_text_color",
      "label": "Help Box Text Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Get in Touch"
    },
    {
      "type": "color",
      "id": "button_background_color",
      "label": "Button Background Color",
      "default": "#4CAF50"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ],
  "blocks": [
    {
      "type": "accordion",
      "name": "Accordion",
      "settings": [
        {
          "type": "text",
          "id": "accordion_title",
          "label": "Accordion Title",
          "default": "What types of medical equipment do you offer?"
        },
        {
          "type": "textarea",
          "id": "accordion_text",
          "label": "Accordion Text",
          "default": "We offer a wide range of certified medical equipment for hospitals, clinics, and personal use."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ Accordion",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}