{{#
    @name Testimonials Highlight
    @desc Highlight section showcasing 5-star client and Google reviews
#}}

<section class="py-16 sm:py-24 bg-surface-sand/40 border-y border-neutral-200/60">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
            <div>
                <div class="flex items-center gap-2 text-accent-dark text-xs font-bold tracking-widest uppercase mb-2">
                    <span class="w-2 h-2 rounded-full bg-accent"></span>
                    Client Experiences &amp; Reviews
                </div>
                <h2 class="font-serif text-3xl sm:text-4xl text-neutral-900 font-bold tracking-tight">
                    Loved by Discerning Clients
                </h2>
                <div class="flex items-center gap-2 mt-3 text-sm text-neutral-600">
                    <div class="flex text-amber-500">
                        {{ loop from="1" to="5" }}
                            <svg class="w-4 h-4 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>
                        {{ /loop }}
                    </div>
                    <span class="font-semibold text-neutral-900">5.0 Star Rated</span>
                    <span class="text-neutral-400">•</span>
                    <span>Google &amp; Direct Reviews</span>
                </div>
            </div>

            <div>
                <a href="/testimonials" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-neutral-300 bg-white text-sm font-semibold text-neutral-800 hover:bg-neutral-50 hover:border-neutral-400 transition-all shadow-xs">
                    View All Testimonials
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            {{ collection:testimonials limit="3" is_featured:is="true" }}
                {{ partial:components/testimonial_card }}
            {{ /collection:testimonials }}
        </div>
    </div>
</section>