{%- assign variant = section.settings.variant | default: 'grid' -%}

<section class="testimonials testimonials--{{ variant }}" data-reveal>
  <div class="container">

    {%- case variant -%}

    {%- when 'grid' -%}
      {%- comment -%} DEFAULT — preserve original markup exactly so existing themes hash identically {%- endcomment -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 class="section-heading section-heading--center"><em>{{ section.settings.heading }}</em></h2>

      <div class="testimonials__grid">
        {%- for block in section.blocks -%}
          <div class="testimonial-card" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
            <div class="testimonial-card__stars" role="img" aria-label="5 out of 5 stars">
              {%- for i in (1..5) -%}
                <svg width="15" height="15" viewBox="0 0 24 24" fill="var(--color-primary)" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
              {%- endfor -%}
              <span class="visually-hidden">5/5</span>
            </div>
            <blockquote class="testimonial-card__quote">{{ block.settings.quote }}</blockquote>
            <div class="testimonial-card__author">
              <span class="testimonial-card__name">{{ block.settings.author }}</span>
              {%- if block.settings.detail != blank -%}
                <span class="testimonial-card__detail">{{ block.settings.detail }}</span>
              {%- endif -%}
            </div>
          </div>
        {%- endfor -%}
      </div>

    {%- when 'carousel' -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 class="section-heading section-heading--center"><em>{{ section.settings.heading }}</em></h2>

      <div class="testimonials__carousel" role="region" aria-label="Customer testimonials carousel">
        <div class="testimonials__track">
          {%- for block in section.blocks -%}
            <article class="testimonial-slide" {{ block.shopify_attributes }} data-slide-index="{{ forloop.index0 }}">
              <div class="testimonial-slide__stars" role="img" aria-label="5 out of 5 stars">
                {%- for i in (1..5) -%}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--color-primary)" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                {%- endfor -%}
              </div>
              <blockquote class="testimonial-slide__quote">{{ block.settings.quote }}</blockquote>
              <footer class="testimonial-slide__author">
                <span class="testimonial-slide__name">{{ block.settings.author }}</span>
                {%- if block.settings.detail != blank -%}
                  <span class="testimonial-slide__detail">{{ block.settings.detail }}</span>
                {%- endif -%}
              </footer>
            </article>
          {%- endfor -%}
        </div>
        <div class="testimonials__dots" role="tablist" aria-label="Select testimonial">
          {%- for block in section.blocks -%}
            <button type="button" class="testimonials__dot{% if forloop.first %} is-active{% endif %}" role="tab" aria-label="Testimonial {{ forloop.index }} of {{ section.blocks.size }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
              <span class="visually-hidden">{{ forloop.index }}</span>
            </button>
          {%- endfor -%}
        </div>
      </div>

    {%- when 'fullbleed-quote' -%}
      {%- assign first_block = section.blocks[0] -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow section-eyebrow--center">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      {%- if first_block -%}
        <figure class="testimonials__fullbleed">
          <svg class="testimonials__fullbleed-mark" width="72" height="56" viewBox="0 0 72 56" aria-hidden="true" fill="var(--color-primary)">
            <path d="M0 56V32C0 14.3 10.7 3.6 28.8 0l4.8 10.8c-10 3.2-16.4 9.6-17.2 18.8H32V56H0zm40 0V32c0-17.7 10.7-28.4 28.8-32L73.6 10.8c-10 3.2-16.4 9.6-17.2 18.8H72V56H40z" opacity="0.85"/>
          </svg>
          <blockquote class="testimonials__fullbleed-quote">{{ first_block.settings.quote }}</blockquote>
          <figcaption class="testimonials__fullbleed-author">
            <span class="testimonials__fullbleed-name">{{ first_block.settings.author }}</span>
            {%- if first_block.settings.detail != blank -%}
              <span class="testimonials__fullbleed-divider" aria-hidden="true">—</span>
              <span class="testimonials__fullbleed-detail">{{ first_block.settings.detail }}</span>
            {%- endif -%}
          </figcaption>
        </figure>
      {%- endif -%}

    {%- when 'marquee' -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      {%- if section.settings.heading != blank -%}
        <h2 class="section-heading section-heading--center"><em>{{ section.settings.heading }}</em></h2>
      {%- endif -%}

      <div class="testimonials__marquee" aria-label="Scrolling customer quotes" role="region">
        <div class="testimonials__marquee-track" aria-hidden="false">
          {%- comment -%} Render blocks twice for seamless loop {%- endcomment -%}
          {%- for repeat in (1..2) -%}
            {%- for block in section.blocks -%}
              <div class="testimonials__marquee-item"{% if repeat == 2 %} aria-hidden="true"{% endif %}>
                <span class="testimonials__marquee-mark" aria-hidden="true">&ldquo;</span>
                <span class="testimonials__marquee-quote">{{ block.settings.quote }}</span>
                <span class="testimonials__marquee-author">— {{ block.settings.author }}{% if block.settings.detail != blank %}, {{ block.settings.detail }}{% endif %}</span>
                <span class="testimonials__marquee-sep" aria-hidden="true">✦</span>
              </div>
            {%- endfor -%}
          {%- endfor -%}
        </div>
      </div>

    {%- when 'stacked-wide' -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 class="section-heading section-heading--center"><em>{{ section.settings.heading }}</em></h2>

      <div class="testimonials__stacked">
        {%- for block in section.blocks -%}
          {%- assign side_class = 'testimonial-row--left' -%}
          {%- cycle 'l','r' -%}
          {%- assign is_even = forloop.index | modulo: 2 -%}
          {%- if is_even == 0 -%}
            {%- assign side_class = 'testimonial-row--right' -%}
          {%- endif -%}
          <article class="testimonial-row {{ side_class }}" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
            <div class="testimonial-row__avatar" aria-hidden="true">
              {%- if block.settings.avatar != blank -%}
                <img src="{{ block.settings.avatar | image_url: width: 160 }}" alt="" loading="lazy" width="80" height="80">
              {%- else -%}
                <span class="testimonial-row__avatar-initial">{{ block.settings.author | slice: 0, 1 | upcase }}</span>
              {%- endif -%}
            </div>
            <div class="testimonial-row__body">
              <blockquote class="testimonial-row__quote">{{ block.settings.quote }}</blockquote>
              <footer class="testimonial-row__author">
                <span class="testimonial-row__name">{{ block.settings.author }}</span>
                {%- if block.settings.detail != blank -%}
                  <span class="testimonial-row__detail">{{ block.settings.detail }}</span>
                {%- endif -%}
              </footer>
            </div>
          </article>
        {%- endfor -%}
      </div>

    {%- when 'numbered-list' -%}
      {%- if section.settings.eyebrow != blank -%}
        <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 class="section-heading section-heading--center"><em>{{ section.settings.heading }}</em></h2>

      <ol class="testimonials__numbered">
        {%- for block in section.blocks -%}
          <li class="testimonial-numbered" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
            <span class="testimonial-numbered__num" aria-hidden="true">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span>
            <div class="testimonial-numbered__body">
              <blockquote class="testimonial-numbered__quote">{{ block.settings.quote }}</blockquote>
              <footer class="testimonial-numbered__author">
                <span class="testimonial-numbered__name">{{ block.settings.author }}</span>
                {%- if block.settings.detail != blank -%}
                  <span class="testimonial-numbered__sep" aria-hidden="true">·</span>
                  <span class="testimonial-numbered__detail">{{ block.settings.detail }}</span>
                {%- endif -%}
              </footer>
            </div>
          </li>
        {%- endfor -%}
      </ol>

    {%- endcase -%}

  </div>
</section>

{% schema %}
{
  "name": "Testimonials",
  "class": "section-testimonials",
  "settings": [
    {
      "type": "select",
      "id": "variant",
      "label": "Layout",
      "options": [
        { "value": "grid", "label": "Grid (3-card, default)" },
        { "value": "carousel", "label": "Carousel (slide track)" },
        { "value": "fullbleed-quote", "label": "Full-bleed single quote" },
        { "value": "marquee", "label": "Marquee (scrolling ticker)" },
        { "value": "stacked-wide", "label": "Stacked wide rows" },
        { "value": "numbered-list", "label": "Numbered list" }
      ],
      "default": "grid"
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow text",
      "default": "WHAT THEY'RE SAYING"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Real Reviews, Real Flames"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "textarea",
          "id": "quote",
          "label": "Quote"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author name"
        },
        {
          "type": "text",
          "id": "detail",
          "label": "Detail"
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "Avatar (optional, used by Stacked wide)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials",
      "blocks": [
        { "type": "testimonial" },
        { "type": "testimonial" },
        { "type": "testimonial" }
      ]
    }
  ]
}
{% endschema %}
