{# 
  Testimonials Component - Dynamic testimonials from Craft CMS
  
  Expected variables from page builder:
  - block.topLabel (optional)
  - block.heading (optional)
  - block.subheading (optional)
  - block.displayMode: 'all', 'limited', or 'selected'
  - block.limit (number, for 'limited' mode)
  - block.selectedTestimonials (entries, for 'selected' mode)
  - block.showGoogleBadge (lightswitch, optional)
#}

{% import '_macros/images.twig' as imageMacro %}

{% set topLabel = block.topLabel is defined and block.topLabel|length ? block.topLabel : null %}
{% set heading = block.heading is defined and block.heading|length ? block.heading : null %}
{% set displayMode = block.displayMode ?? 'all' %}
{% set limit = block.limit ?? 4 %}
{% set showGoogleBadge = block.showGoogleBadge ?? false %}

{# Fetch testimonials based on display mode #}
{% set testimonials = [] %}

{% if displayMode == 'selected' and block.selectedTestimonials is defined %}
  {% set testimonials = block.selectedTestimonials.all() %}
{% elseif displayMode == 'limited' %}
  {% set testimonials = craft.entries()
    .section('testimonials')
    .orderBy('dateCreated desc')
    .limit(limit)
    .all() %}
{% else %}
  {% set testimonials = craft.entries()
    .section('testimonials')
    .orderBy('dateCreated desc')
    .all() %}
{% endif %}

<!-- SECTION: Testimonials - Clean white background -->
<section class="section-luxury bg-white relative overflow-hidden">
    <!-- Decorative corner elements -->
    <div class="absolute top-0 left-0 w-40 h-40 border-t-2 border-l-2 border-beige/50"></div>
    <div class="absolute bottom-0 right-0 w-40 h-40 border-b-2 border-r-2 border-beige/50"></div>
    
    <div class="container-default relative">
        {% if topLabel or heading %}
        <div class="section-heading">
            {% if topLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gold"></div>
                <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ topLabel }}</p>
                <div class="w-12 h-px bg-gold"></div>
            </div>
            {% endif %}
            {% if heading %}
            <h2 class="text-navy">{{ heading }}</h2>
            {% endif %}
        </div>
        {% endif %}
        
        {% if testimonials|length > 0 %}
            {% set featuredTestimonial = testimonials|first %}
            {% set remainingTestimonials = testimonials|slice(1, 3) %}
            
            <!-- Featured Testimonial - Large, prominent -->
            <div class="mb-16 rounded-3xl p-10 lg:p-16 shadow-elegant" style="background-color: #E7C3B3;">
                <div class="flex flex-col lg:flex-row gap-12 items-center">
                    <!-- Patient Photo -->
                    <div class="flex-shrink-0">
                        {% set featuredPhoto = featuredTestimonial.image|length ? featuredTestimonial.image.one() : null %}
                        <div class="w-32 h-32 lg:w-40 lg:h-40 rounded-full overflow-hidden border-4 border-white shadow-luxury">
                            {% if featuredPhoto %}
                                {{ imageMacro.optimizedImage(featuredPhoto, {
                                  alt: featuredTestimonial.plainText|length ? featuredTestimonial.plainText : '',
                                  class: 'w-full h-full object-cover',
                                  loading: 'lazy',
                                  width: featuredPhoto.width,
                                  height: featuredPhoto.height,
                                  sizes: '160px'
                                }) }}
                            {% else %}
                                <div class="w-full h-full bg-gradient-gold flex items-center justify-center">
                                    {% if featuredTestimonial.plainText|length %}<span class="text-white text-4xl font-bold font-body">{{ featuredTestimonial.plainText|slice(0, 1)|upper }}</span>{% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="flex-1 text-center lg:text-left">
                        <!-- Stars -->
                        <div class="flex items-center justify-center lg:justify-start gap-2 mb-6">
                            {% for i in 1..5 %}
                            <svg class="w-7 h-7 text-white fill-current" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            {% endfor %}
                        </div>
                        {% set featuredMessage = featuredTestimonial.textArea ?? '' %}
                        {% if featuredMessage %}
                            <blockquote class="text-xl lg:text-2xl text-navy italic mb-8 leading-relaxed font-medium">
                                "{{ featuredMessage }}"
                            </blockquote>
                        {% endif %}
                        <div>
                            {% if featuredTestimonial.plainText|length %}<p class="text-navy font-semibold text-lg">{{ featuredTestimonial.plainText }}</p>{% endif %}
                            {% set featuredTreatment = featuredTestimonial.plainText2 ?? '' %}
                            {% if featuredTreatment %}
                                <p class="text-white text-sm font-medium tracking-wide">{{ featuredTreatment }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Smaller Testimonials Grid -->
            {% if remainingTestimonials|length > 0 %}
                <div class="grid md:grid-cols-3 gap-8 lg:gap-10">
                    {% for testimonial in remainingTestimonials %}
                        <div class="testimonial-card">
                            <div class="flex items-center gap-4 mb-5">
                                {% set clientPhoto = testimonial.image|length ? testimonial.image.one() : null %}
                                <div class="w-14 h-14 rounded-full overflow-hidden border-2 border-gold/30">
                                    {% if clientPhoto %}
                                        {{ imageMacro.optimizedImage(clientPhoto, {
                                          alt: testimonial.plainText|length ? testimonial.plainText : '',
                                          class: 'w-full h-full object-cover',
                                          loading: 'lazy',
                                          width: clientPhoto.width,
                                          height: clientPhoto.height,
                                          sizes: '56px'
                                        }) }}
                                    {% else %}
                                        <div class="w-full h-full bg-gradient-gold flex items-center justify-center">
                                            {% if testimonial.plainText|length %}<span class="text-white text-sm font-semibold font-body">{{ testimonial.plainText|slice(0, 1)|upper }}</span>{% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                                <div>
                                    {% if testimonial.plainText|length %}<p class="text-navy font-semibold" style="font-size: 18px;">{{ testimonial.plainText }}</p>{% endif %}
                                    {% set treatment = testimonial.plainText2 ?? '' %}
                                    {% if treatment %}
                                        <p class="font-medium tracking-wide" style="font-size: 16px; color: #E7C3B3;">{{ treatment }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="flex items-center gap-1.5 mb-4">
                                {% for i in 1..5 %}
                                <svg class="star-rating fill-current" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                                {% endfor %}
                            </div>
                            {% set message = testimonial.textArea ?? '' %}
                            {% if message %}
                                <p class="text-charcoal-light italic leading-relaxed">
                                    "{{ message }}"
                                </p>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% else %}
            <!-- No Testimonials Message -->
            <div class="text-center py-12">
                <p class="text-charcoal-light font-body text-lg">No testimonials available yet.</p>
            </div>
        {% endif %}
        
        {% if showGoogleBadge %}
            {% set googleUrl = block.buttonUrl is defined and block.buttonUrl|length ? (block.buttonUrl.url is defined ? block.buttonUrl.url : block.buttonUrl) : null %}
            {% set reviewCount = block.numberOfReviews is defined and block.numberOfReviews|length ? block.numberOfReviews : null %}
            {% if googleUrl and reviewCount %}
            <div class="text-center mt-16">
                <a href="{{ googleUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-4 rounded-2xl px-8 py-5 bg-white shadow-elegant hover:shadow-luxury transition-all duration-300 hover:-translate-y-1">
                    <svg class="w-10 h-10" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    <div class="flex gap-1">
                        {% for i in 1..5 %}
                            <svg class="w-6 h-6 text-gold" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        {% endfor %}
                    </div>
                    <p class="text-base text-charcoal font-body">
                        <span class="font-bold text-navy text-lg">5.0</span> from {{ reviewCount }} reviews
                    </p>
                </a>
            </div>
            {% endif %}
        {% endif %}
    </div>
</section>