{% set c = module.content %}
{% set l = module.layout %}
{% set qs = module.quote_style %}
{% set as = module.author_style %}
{% set cs = module.card_style %}
{% set carousel = module.carousel_settings %}
{% set colors = module.colors %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Quote font-size map — the theme has no --text-* scale, so resolve in HubL. #}
{% set quote_sizes = {"base": "1rem", "lg": "1.125rem", "xl": "1.25rem", "2xl": "1.5rem"} %}

{# Build CSS classes #}
{% set module_classes = "testimonial" %}
{% set module_classes = module_classes ~ " testimonial--" ~ c.layout_type %}
{% set module_classes = module_classes ~ " testimonial--align-" ~ l.text_alignment %}
{% if qs.show_quote_marks %}
  {% set module_classes = module_classes ~ " testimonial--quotes-" ~ qs.quote_mark_style %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

<section class="{{ module_classes }}"
         {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
         {% if c.layout_type == "carousel" %}
           data-carousel="true"
           data-autoplay="{{ carousel.autoplay }}"
           data-speed="{{ carousel.autoplay_speed }}"
         {% endif %}
         style="
           --tm-gap: {{ l.gap }};
           --tm-max-width: {{ l.max_width|default('800px') }};
           --tm-quote-size: {{ quote_sizes[qs.font_size]|default('1.125rem') }};
           --tm-photo-size: {{ as.photo_size }};
           --tm-card-bg: {{ cs.background.color }};
           --tm-card-padding: {{ cs.padding }};
           --tm-card-radius: {{ cs.border_radius }};
           --tm-quote-color: {{ colors.quote_color.color }};
           --tm-quote-mark: {{ colors.quote_mark_color.css }};
           --tm-author-color: {{ colors.author_color.color }};
           --tm-meta-color: {{ colors.meta_color.color }};
           --tm-star-color: {{ colors.star_color.color }};
           --tm-pt: {{ spacing.padding_top }};
           --tm-pb: {{ spacing.padding_bottom }};
         ">

  {# Section Header #}
  {% if c.section_heading %}
    <header class="testimonial__header">
      <h2 class="testimonial__heading">{{ c.section_heading|escape }}</h2>
    </header>
  {% endif %}

  {# Testimonials Container #}
  <div class="testimonial__container{% if c.layout_type == 'grid' %} testimonial__grid testimonial__grid--cols-{{ l.cols_desktop }}{% endif %}">
    {% for item in c.testimonials %}
      <article class="testimonial__card{% if c.layout_type == 'carousel' and loop.first %} active{% endif %}{% if cs.show_border %} testimonial__card--bordered{% endif %}{% if cs.shadow != 'none' %} testimonial__card--shadow-{{ cs.shadow }}{% endif %}{% if qs.font_style == 'italic' %} testimonial__card--italic{% endif %}">

        {# Quote Mark (decorative) #}
        {% if qs.show_quote_marks %}
          <span class="testimonial__quote-mark" aria-hidden="true">"</span>
        {% endif %}

        {# Star Rating #}
        {% if item.rating > 0 %}
          <div class="testimonial__rating" role="img" aria-label="{{ item.rating }} out of 5 stars">
            {% for i in range(5) %}
              <span class="testimonial__star{% if i < item.rating %} testimonial__star--filled{% endif %}">★</span>
            {% endfor %}
          </div>
        {% endif %}

        {# Quote #}
        <blockquote class="testimonial__quote">
          {{ item.quote }}
        </blockquote>

        {# Author #}
        <footer class="testimonial__author testimonial__author--{{ as.author_layout }}">
          {% if item.author_photo and item.author_photo.src %}
            {% set photo_src = item.author_photo.src %}
            {% if '../../images/' in photo_src %}
              {% set photo_src = get_asset_url(photo_src) %}
            {% endif %}
            <img src="{{ photo_src }}"
                 alt="{{ item.author_name|escape }}"
                 width="{{ item.author_photo.width|default(80) }}"
                 height="{{ item.author_photo.height|default(80) }}"
                 loading="lazy"
                 decoding="async"
                 class="testimonial__photo testimonial__photo--{{ as.photo_shape }}">
          {% endif %}

          <div class="testimonial__author-info">
            <cite class="testimonial__name">{{ item.author_name|escape }}</cite>
            {% if item.author_title or item.author_company %}
              <span class="testimonial__meta">
                {% if item.author_title %}{{ item.author_title|escape }}{% endif %}
                {% if item.author_title and item.author_company %}, {% endif %}
                {% if item.author_company %}{{ item.author_company|escape }}{% endif %}
              </span>
            {% endif %}
          </div>

          {% if item.company_logo and item.company_logo.src %}
            {% set logo_src = item.company_logo.src %}
            {% if '../../images/' in logo_src %}
              {% set logo_src = get_asset_url(logo_src) %}
            {% endif %}
            <img src="{{ logo_src }}"
                 alt="{{ item.author_company|escape }}"
                 width="{{ item.company_logo.width|default(100) }}"
                 height="{{ item.company_logo.height|default(30) }}"
                 loading="lazy"
                 decoding="async"
                 class="testimonial__company-logo">
          {% endif %}
        </footer>
      </article>
    {% endfor %}
  </div>

  {# Carousel Controls #}
  {% if c.layout_type == "carousel" and c.testimonials|length > 1 %}
    {% if carousel.show_arrows %}
      <button class="testimonial__arrow testimonial__arrow--prev" aria-label="Previous testimonial">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M15 18l-6-6 6-6"/>
        </svg>
      </button>
      <button class="testimonial__arrow testimonial__arrow--next" aria-label="Next testimonial">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 18l6-6-6-6"/>
        </svg>
      </button>
    {% endif %}

    {% if carousel.show_dots %}
      <div class="testimonial__dots" role="tablist">
        {% for item in c.testimonials %}
          <button class="testimonial__dot{% if loop.first %} testimonial__dot--active{% endif %}"
                  role="tab"
                  aria-selected="{{ loop.first }}"
                  aria-label="Go to testimonial {{ loop.index }}"></button>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
</section>

{% require_css %}
<style>
  .testimonial {
    padding: var(--tm-pt, 48px) 0 var(--tm-pb, 48px);
    position: relative;
  }

  /* Header */
  .testimonial__header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .testimonial__heading {
    color: var(--tm-author-color, var(--color-text, #111827));
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  /* Container */
  .testimonial__container {
    max-width: var(--tm-max-width, 800px);
    margin: 0 auto;
  }

  /* Grid layout */
  .testimonial__grid {
    display: grid;
    gap: var(--tm-gap, 32px);
    max-width: 100%;
  }

  .testimonial__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 768px) {
    .testimonial__grid--cols-2,
    .testimonial__grid--cols-3 {
      grid-template-columns: 1fr;
    }
  }

  /* Card */
  .testimonial__card {
    background: var(--tm-card-bg, #fff);
    padding: var(--tm-card-padding, 32px);
    border-radius: var(--tm-card-radius, 12px);
    position: relative;
  }

  .testimonial__card--bordered {
    border: 1px solid #e5e7eb;
  }

  .testimonial__card--shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .testimonial__card--shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  }

  .testimonial__card--italic .testimonial__quote {
    font-style: italic;
  }

  /* Quote mark */
  .testimonial__quote-mark {
    position: absolute;
    font-family: Georgia, serif;
    color: var(--tm-quote-mark, rgba(59, 130, 246, 0.2));
    line-height: 1;
    pointer-events: none;
  }

  .testimonial--quotes-large .testimonial__quote-mark {
    font-size: 8rem;
    top: -0.5rem;
    left: 0.5rem;
  }

  .testimonial--quotes-subtle .testimonial__quote-mark {
    font-size: 4rem;
    top: 0;
    left: 1rem;
    opacity: 0.3;
  }

  .testimonial--quotes-icon .testimonial__quote-mark {
    font-size: 2rem;
    position: static;
    display: block;
    margin-bottom: 1rem;
  }

  /* Star Rating */
  .testimonial__rating {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 1rem;
  }

  .testimonial--align-center .testimonial__rating {
    justify-content: center;
  }

  .testimonial__star {
    font-size: 1.25rem;
    color: #d1d5db;
  }

  .testimonial__star--filled {
    color: var(--tm-star-color, #fbbf24);
  }

  /* Quote */
  .testimonial__quote {
    /* Reset the global blockquote chrome (modern.css) — its grey inset box + blue
       left border bleed into every testimonial. */
    background: none;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    color: var(--tm-quote-color, var(--color-text, #111827));
    font-size: var(--tm-quote-size, 1.125rem);
    line-height: 1.7;
    margin: 0 0 1.5rem;
  }

  .testimonial__quote > *:first-child {
    margin-top: 0;
  }

  .testimonial__quote > *:last-child {
    margin-bottom: 0;
  }

  /* Author */
  .testimonial__author {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .testimonial__author--stacked {
    flex-direction: column;
    text-align: center;
  }

  .testimonial--align-center .testimonial__author--inline {
    justify-content: center;
  }

  .testimonial__photo {
    width: var(--tm-photo-size, 64px);
    height: var(--tm-photo-size, 64px);
    object-fit: cover;
    flex-shrink: 0;
  }

  .testimonial__photo--circle {
    border-radius: 50%;
  }

  .testimonial__photo--rounded {
    border-radius: 8px;
  }

  .testimonial__photo--square {
    border-radius: 0;
  }

  .testimonial__author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .testimonial__name {
    color: var(--tm-author-color, var(--color-text, #111827));
    font-weight: 600;
    font-style: normal;
  }

  .testimonial__meta {
    color: var(--tm-meta-color, #6b7280);
    font-size: 0.875rem;
  }

  .testimonial__company-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
  }

  /* Carousel */
  .testimonial--carousel .testimonial__container {
    overflow: hidden;
    position: relative;
  }

  .testimonial--carousel .testimonial__card {
    display: none;
  }

  .testimonial--carousel .testimonial__card.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .testimonial__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: all 0.2s ease;
    z-index: 10;
  }

  .testimonial__arrow:hover {
    background: #f9fafb;
    border-color: #d1d5db;
  }

  .testimonial__arrow--prev {
    left: 0;
  }

  .testimonial__arrow--next {
    right: 0;
  }

  @media (max-width: 768px) {
    .testimonial__arrow {
      display: none;
    }
  }

  .testimonial__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .testimonial__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
  }

  .testimonial__dot--active,
  .testimonial__dot:hover {
    background: var(--tm-quote-mark, var(--color-primary, #3b82f6));
  }

  /* Print */
  @media print {
    .testimonial {
      padding: 1rem 0;
    }

    .testimonial__arrow,
    .testimonial__dots {
      display: none;
    }
  }

  /* Dark mode */
  {% if theme.dark_mode.enabled %}
  @media (prefers-color-scheme: dark) {
    .testimonial__card {
      background: var(--color-bg-secondary);
    }
    .testimonial__card--bordered {
      border-color: var(--color-border);
    }
    .testimonial__quote {
      color: var(--color-text) !important;
    }
    .testimonial__heading,
    .testimonial__name {
      color: var(--color-text) !important;
    }
    .testimonial__meta {
      color: var(--color-text-secondary) !important;
    }
    .testimonial__arrow {
      background: var(--color-bg-secondary);
      border-color: var(--color-border);
      color: var(--color-text);
    }
    .testimonial__arrow:hover {
      background: var(--color-bg-tertiary);
    }
    .testimonial__dot {
      background: var(--color-border);
    }
  }
  {% endif %}

</style>
{% end_require_css %}

{# Carousel script - only included for carousel layout #}
{% if c.layout_type == "carousel" and c.testimonials|length > 1 %}
{% require_js position="footer" defer=true %}
<script>
(function() {
  document.querySelectorAll('.testimonial--carousel').forEach(function(carousel) {
    var cards = carousel.querySelectorAll('.testimonial__card');
    var dots = carousel.querySelectorAll('.testimonial__dot');
    var prevBtn = carousel.querySelector('.testimonial__arrow--prev');
    var nextBtn = carousel.querySelector('.testimonial__arrow--next');
    var currentIndex = 0;
    var autoplay = carousel.dataset.autoplay === 'true';
    var speed = parseInt(carousel.dataset.speed) || 5000;
    var autoplayInterval;

    function showSlide(index) {
      if (index < 0) index = cards.length - 1;
      if (index >= cards.length) index = 0;
      currentIndex = index;

      cards.forEach(function(card, i) {
        card.classList.toggle('active', i === currentIndex);
      });

      dots.forEach(function(dot, i) {
        dot.classList.toggle('testimonial__dot--active', i === currentIndex);
        dot.setAttribute('aria-selected', i === currentIndex);
      });
    }

    function nextSlide() {
      showSlide(currentIndex + 1);
    }

    function prevSlide() {
      showSlide(currentIndex - 1);
    }

    function startAutoplay() {
      if (autoplay) {
        autoplayInterval = setInterval(nextSlide, speed);
      }
    }

    function stopAutoplay() {
      clearInterval(autoplayInterval);
    }

    // Initialize
    showSlide(0);
    startAutoplay();

    // Event listeners
    if (prevBtn) prevBtn.addEventListener('click', function() { stopAutoplay(); prevSlide(); });
    if (nextBtn) nextBtn.addEventListener('click', function() { stopAutoplay(); nextSlide(); });

    dots.forEach(function(dot, i) {
      dot.addEventListener('click', function() {
        stopAutoplay();
        showSlide(i);
      });
    });

    // Pause on hover
    carousel.addEventListener('mouseenter', stopAutoplay);
    carousel.addEventListener('mouseleave', startAutoplay);
  });
})();
</script>
{% end_require_js %}
{% endif %}