{#
 # Single featured testimonial — same visual treatment as the large card in testimonials.twig,
 # but content comes from this page builder block’s fields (not the Testimonials section).
 #
 # Block type handle: featuredTestimonial
 # Fields: topLabel, heading, clientPhoto (assets), quote (textarea), clientName, treatmentLabel,
 #         liveReviews (CKEditor, optional) — iframe / embed HTML, rendered with |raw
#}

{% 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 quote = block.quote is defined and block.quote|length ? block.quote : null %}
{% set clientName = block.clientName is defined and block.clientName|length ? block.clientName : null %}
{% set treatmentLabel = block.treatmentLabel is defined and block.treatmentLabel|length ? block.treatmentLabel : null %}
{% set clientPhoto = block.clientPhoto is defined and block.clientPhoto|length ? block.clientPhoto.one() : null %}
{% set liveReviews = block.liveReviews is defined and block.liveReviews|trim|length ? block.liveReviews : null %}

{% set hasBody = quote or clientName or treatmentLabel or clientPhoto %}

{% if topLabel or heading or hasBody or liveReviews %}
<section class="section-luxury bg-white relative overflow-hidden">
    <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 hasBody %}
        <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">
                <div class="flex-shrink-0">
                    <div class="w-32 h-32 lg:w-40 lg:h-40 rounded-full overflow-hidden border-4 border-white shadow-luxury">
                        {% if clientPhoto %}
                            {{ imageMacro.optimizedImage(clientPhoto, {
                              alt: clientName ? clientName : '',
                              class: 'w-full h-full object-cover',
                              loading: 'lazy',
                              width: clientPhoto.width,
                              height: clientPhoto.height,
                              sizes: '160px'
                            }) }}
                        {% elseif clientName %}
                            <div class="w-full h-full bg-gradient-gold flex items-center justify-center">
                                <span class="text-white text-4xl font-bold font-body">{{ clientName|slice(0, 1)|upper }}</span>
                            </div>
                        {% else %}
                            <div class="w-full h-full bg-gradient-gold flex items-center justify-center"></div>
                        {% endif %}
                    </div>
                </div>
                <div class="flex-1 text-center lg:text-left">
                    {% if quote %}
                    <blockquote class="text-xl lg:text-2xl text-navy italic mb-8 leading-relaxed font-medium">
                        {{ quote }}
                    </blockquote>
                    {% endif %}
                    <div>
                        {% if clientName %}
                        <p class="text-navy font-semibold text-lg">{{ clientName }}</p>
                        {% endif %}
                        {% if treatmentLabel %}
                        <p class="text-white text-sm font-medium tracking-wide">{{ treatmentLabel }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% if liveReviews %}
        <div class="w-full {% if topLabel or heading or hasBody %}mt-12 lg:mt-16 border-t border-beige/40 pt-10 lg:pt-12{% endif %}">
            <div class="live-reviews-embed">
                {{ liveReviews|raw }}
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}