<style>
    /* Review Card Styles - Matching Hero Section */
    .review-card {
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .review-card:hover {
        transform: translateY(-2px);
    }

    /* Color-themed glow effects for review cards */
    .review-glow-emerald:hover {
        box-shadow: 0 0 0 1px rgb(16 185 129 / 0.2), 0 4px 16px -4px rgb(16 185 129 / 0.15), 0 0 24px -8px rgb(16 185 129 / 0.1);
    }
    .review-glow-blue:hover {
        box-shadow: 0 0 0 1px rgb(59 130 246 / 0.2), 0 4px 16px -4px rgb(59 130 246 / 0.15), 0 0 24px -8px rgb(59 130 246 / 0.1);
    }
    .review-glow-purple:hover {
        box-shadow: 0 0 0 1px rgb(168 85 247 / 0.2), 0 4px 16px -4px rgb(168 85 247 / 0.15), 0 0 24px -8px rgb(168 85 247 / 0.1);
    }
    .review-glow-amber:hover {
        box-shadow: 0 0 0 1px rgb(245 158 11 / 0.2), 0 4px 16px -4px rgb(245 158 11 / 0.15), 0 0 24px -8px rgb(245 158 11 / 0.1);
    }
    .review-glow-rose:hover {
        box-shadow: 0 0 0 1px rgb(244 63 94 / 0.2), 0 4px 16px -4px rgb(244 63 94 / 0.15), 0 0 24px -8px rgb(244 63 94 / 0.1);
    }
    .review-glow-indigo:hover {
        box-shadow: 0 0 0 1px rgb(99 102 241 / 0.2), 0 4px 16px -4px rgb(99 102 241 / 0.15), 0 0 24px -8px rgb(99 102 241 / 0.1);
    }

    @keyframes fade-in {
        0% { opacity: 0; }
        to { opacity: 1; }
    }

    .animate-fade-in {
        animation: fade-in 0.5s linear forwards;
    }

    @keyframes marquee {
        to { transform: translateY(-50%); }
    }

    .animate-marquee {
        animation: marquee var(--marquee-duration) linear infinite;
    }
</style>

<section id="reviews" aria-labelledby="reviews-title" class="relative py-24 sm:py-32 overflow-hidden bg-white">
    <!-- Background decoration blobs -->
    <div class="absolute inset-0 -z-10">
        <div class="absolute top-1/4 left-0 w-72 h-72 bg-emerald-100/40 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 right-0 w-72 h-72 bg-blue-100/40 rounded-full blur-3xl"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-100/30 rounded-full blur-3xl"></div>
    </div>

    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <!-- Section Header - Hero Style -->
        <div class="mx-auto max-w-2xl text-center mb-16">
            <div class="inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-1.5 text-sm text-white mb-6">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                </svg>
                <span>Trusted by Teams Worldwide</span>
            </div>
            <h2 id="reviews-title" class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
                What our users say
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-600">
                See why engineering teams choose OneUptime for their monitoring and incident management needs.
            </p>
        </div>

        <!-- Reviews Grid with Marquee Animation -->
        <div class="relative -mx-4 mt-12 grid h-[49rem] max-h-[150vh] grid-cols-1 items-start gap-6 overflow-hidden px-4 md:grid-cols-2 lg:grid-cols-3">
            <!-- Column 1 -->
            <div class="animate-marquee space-y-6 py-4" style="--marquee-duration: 35000ms;">
                <% const colors1 = ['emerald', 'blue', 'purple', 'amber', 'rose', 'indigo']; %>
                <% for(var i=0; i<reviewsList1.length; i++) {%>
                    <%- include('./review', {
                        review: reviewsList1[i],
                        glowColor: colors1[i % colors1.length]
                    }) -%>
                <% } %>
            </div>

            <!-- Column 2 -->
            <div class="animate-marquee space-y-6 py-4 hidden md:block" style="--marquee-duration: 42000ms;">
                <% const colors2 = ['blue', 'purple', 'amber', 'rose', 'indigo', 'emerald']; %>
                <% for(var i=0; i<reviewsList2.length; i++) {%>
                    <%- include('./review', {
                        review: reviewsList2[i],
                        glowColor: colors2[i % colors2.length]
                    }) -%>
                <% } %>
            </div>

            <!-- Column 3 -->
            <div class="animate-marquee space-y-6 py-4 hidden lg:block" style="--marquee-duration: 38000ms;">
                <% const colors3 = ['purple', 'amber', 'rose', 'indigo', 'emerald', 'blue']; %>
                <% for(var i=0; i<reviewsList3.length; i++) {%>
                    <%- include('./review', {
                        review: reviewsList3[i],
                        glowColor: colors3[i % colors3.length]
                    }) -%>
                <% } %>
            </div>

            <!-- Gradient overlays for smooth edges -->
            <div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-white"></div>
            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-white"></div>
        </div>
    </div>
</section>
