<div class="product-quiz {{ section.settings.layout_style }} alignment-{{ section.settings.text_alignment }}"
     style="
      padding: {{ section.settings.padding_vertical }}px {{ section.settings.padding_horizontal }}px;
      background-color: {{ section.settings.background_color }};
    ">
  {% if section.settings.heading != blank or section.settings.description != blank %}
    <div class="quiz-header alignment-{{ section.settings.heading_alignment }}">
      {% if section.settings.heading != blank %}
        <h2 style="
          color: {{ section.settings.heading_color }};
          font-size: {{ section.settings.heading_font_size }}px;
          margin-bottom: 10px;
        ">{{ section.settings.heading }}</h2>
      {% endif %}
      {% if section.settings.description != blank %}
        <p style="
          color: {{ section.settings.description_color }};
          font-size: {{ section.settings.description_font_size }}px;
          margin-bottom: 20px;
        ">{{ section.settings.description }}</p>
      {% endif %}
    </div>
  {% endif %}

  <!-- Quiz Buttons -->
  <div class="quiz-buttons" style="justify-content: {{ section.settings.button_alignment }};">
    {% for block in section.blocks %}
<button
  class="quiz-btn btn-size-{{ section.settings.button_size }}"
  data-index="{{ forloop.index0 }}"
  style="
    background: {{ section.settings.button_background }};
    color: {{ section.settings.button_text }};
    border-radius: {{ section.settings.button_radius }}px;
    border: 1px solid {{ section.settings.button_border_color }};
  ">
  {{ block.settings.button_label }}
</button>

    {% endfor %}
  </div>

  <!-- Product Display Area -->
  <div class="quiz-results">
    {% for block in section.blocks %}
<div
  class="quiz-result layout-{{ block.settings.card_layout }} text-{{ block.settings.card_text_align }}"
  data-index="{{ forloop.index0 }}"
style="
  display: none;
  background-color: {{ block.settings.card_bg }};
  color: {{ block.settings.card_text }};
  padding: {{ block.settings.card_padding }}px;
  border-radius: {{ block.settings.card_radius }}px;
  border: 1px solid {{ block.settings.card_border_color }};
  box-shadow: {% if block.settings.card_shadow %}0 4px 12px rgba(0,0,0,0.1){% else %}none{% endif %};
"

>
  <div class="quiz-result-inner layout-{{ block.settings.card_layout }}">
    {% if block.settings.product != blank %}
      {% assign product = all_products[block.settings.product] %}
      <div class="quiz-product-media-wrapper image-align-{{ block.settings.image_alignment }}">
        <div class="quiz-product-media">
          <a href="{{ product.url }}">
            <img
              src="{{ product.featured_image | img_url: block.settings.image_size }}"
              alt="{{ product.title }}"
              style="max-width: 100%; height: auto; border-radius: 4px;"
            >
          </a>
        </div>
      </div>
    {% endif %}

    <div class="quiz-product-text text-{{ block.settings.card_text_align }}">
      <h3>{{ block.settings.title }}</h3>
      <p>{{ block.settings.description }}</p>
      {% if block.settings.cta_label != blank and block.settings.cta_link != blank %}
        <a href="{{ block.settings.cta_link }}" class="quiz-cta-button" style="
          background-color: {{ block.settings.cta_bg }};
          color: {{ block.settings.cta_text }};
          border-radius: {{ block.settings.cta_radius }}px;
          padding: 10px 20px;
          display: inline-block;
          text-decoration: none;
          margin-top: 15px;
        ">
          {{ block.settings.cta_label }}
        </a>
      {% endif %}
    </div>
  </div>
</div>

    {% endfor %}
  </div>
</div>
<style>
  .quiz-header {
  margin-bottom: 20px;
}

  .quiz-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .quiz-btn {
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .quiz-btn:hover,
  .quiz-btn.active {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  .product-quiz.vertical .quiz-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .alignment-left { text-align: left; }
  .alignment-center { text-align: center; }
  .alignment-right { text-align: right; }

 .quiz-result-inner {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.layout-vertical .quiz-result-inner {
  flex-direction: column;
}

.layout-horizontal .quiz-result-inner {
  flex-direction: row;
  align-items: center;
}

/* Media alignment wrapper for more control */
.quiz-product-media-wrapper {
  flex: 1;
  display: flex;
}

.quiz-product-media-wrapper.image-align-left {
  justify-content: flex-start;
}

.quiz-product-media-wrapper.image-align-center {
  justify-content: center;
}

.quiz-product-media-wrapper.image-align-right {
  justify-content: flex-end;
}

.quiz-product-media img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.quiz-product-text {
  flex: 2;
}

/* Text alignment inside the quiz-product-text */
.text-left .quiz-product-text { text-align: left; }
.text-center .quiz-product-text { text-align: center; }
.text-right .quiz-product-text { text-align: right; }

</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.quiz-btn');
    const results = document.querySelectorAll('.quiz-result');

    buttons.forEach(button => {
      button.addEventListener('click', () => {
        const index = button.dataset.index;

        buttons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        results.forEach(result => {
          result.style.display = result.dataset.index === index ? 'block' : 'none';
        });
      });
    });

    if (buttons.length > 0) {
      buttons[0].classList.add('active');
    }
  });
</script>

{% schema %}
{
  "name": "Product Quiz",
  "settings": [
    
{
  "type": "text",
  "id": "heading",
  "label": "Heading"
},
{
  "type": "textarea",
  "id": "description",
  "label": "Description"
},
{
  "type": "select",
  "id": "heading_alignment",
  "label": "Heading & Description Alignment",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ],
  "default": "center"
},
{
  "type": "color",
  "id": "heading_color",
  "label": "Heading Color",
  "default": "#000000"
},
{
  "type": "color",
  "id": "description_color",
  "label": "Description Color",
  "default": "#333333"
},
{
  "type": "range",
  "id": "heading_font_size",
  "label": "Heading Font Size",
  "min": 12,
  "max": 64,
  "step": 2,
  "default": 28
},
{
  "type": "range",
  "id": "description_font_size",
  "label": "Description Font Size",
  "min": 10,
  "max": 36,
  "step": 2,
  "default": 16
},

    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_vertical",
      "label": "Vertical Padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_horizontal",
      "label": "Horizontal Padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "default": 40
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "layout_style",
      "label": "Layout Style",
      "options": [
        { "value": "horizontal", "label": "Horizontal" },
        { "value": "vertical", "label": "Vertical" }
      ],
      "default": "horizontal"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_text",
      "label": "Button Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button Border Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "button_radius",
      "label": "Button Border Radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "default": 6
    },
    {
      "type": "select",
      "id": "button_alignment",
      "label": "Button Alignment",
      "options": [
        { "value": "flex-start", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "flex-end", "label": "Right" }
      ],
      "default": "center"
    },
    {
      
  "type": "select",
  "id": "button_size",
  "label": "Button Size",
  "options": [
    { "value": "small", "label": "Small" },
    { "value": "medium", "label": "Medium" },
    { "value": "large", "label": "Large" }
  ],
  "default": "medium"

    }
  ],
  "blocks": [
    {
      "type": "quiz_option",
      "name": "Quiz Option",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "color",
          "id": "card_bg",
          "label": "Card Background",
          "default": "#f9f9f9"
        },
        {
          "type": "color",
          "id": "card_text",
          "label": "Card Text Color",
          "default": "#000000"
        },
        {
  "type": "color",
  "id": "card_border_color",
  "label": "Card Border Color",
  "default": "#dddddd"
},

        {
          "type": "range",
          "id": "card_padding",
          "label": "Card Padding",
          "min": 0,
          "max": 60,
          "step": 4,
          "default": 20
        },
        {
          "type": "range",
          "id": "card_radius",
          "label": "Card Border Radius",
          "min": 0,
          "max": 30,
          "step": 2,
          "default": 8
        },
        {
          "type": "checkbox",
          "id": "card_shadow",
          "label": "Enable Card Shadow",
          "default": true
        },
        {
          "type": "select",
          "id": "card_layout",
          "label": "Card Layout",
          "options": [
            { "value": "vertical", "label": "Vertical" },
            { "value": "horizontal", "label": "Horizontal" }
          ],
          "default": "vertical"
        },
        {
          "type": "select",
          "id": "card_text_align",
          "label": "Card Text Alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "image_alignment",
          "label": "Image Alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "image_size",
          "label": "Image Size",
          "options": [
            { "value": "compact", "label": "Small" },
            { "value": "medium", "label": "Medium" },
            { "value": "large", "label": "Large" },
            { "value": "grande", "label": "Grande" }
          ],
          "default": "medium"
        },
        {
          "type": "text",
          "id": "cta_label",
          "label": "CTA Button Label"
        },
        {
          "type": "url",
          "id": "cta_link",
          "label": "CTA Button Link"
        },
        {
          "type": "color",
          "id": "cta_bg",
          "label": "CTA Background Color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "cta_text",
          "label": "CTA Text Color",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "cta_radius",
          "label": "CTA Border Radius",
          "min": 0,
          "max": 30,
          "step": 2,
          "default": 6
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Quiz",
      "category": "Custom"
    }
  ]
}
{% endschema %}