<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

    <?php foreach ($testimonials as $testimonial): ?>

        <div
            class="testimonial-card bg-white rounded-3xl p-6 shadow-sm border border-slate-100 hover:shadow-xl hover:-translate-y-1 transition duration-300">

            <div class="flex items-center gap-4 mb-6">

                <img src="<?= htmlspecialchars($testimonial['avatar']) ?>"
                    alt="<?= htmlspecialchars($testimonial['name']) ?>" class="w-14 h-14 rounded-full object-cover">

                <div>
                    <div class="font-bold text-[#0F172A] sm:text-[22px]">
                        <?= htmlspecialchars($testimonial['name']) ?>
                    </div>

                    <div class="text-sm text-slate-500 sm:text-[19px]">
                        <?= htmlspecialchars($testimonial['role']) ?>
                    </div>
                </div>

            </div>

            <div class="flex gap-1 text-[#06B6D4] mb-5">
                <?php for ($i = 1; $i <= (int) $testimonial['rating']; $i++): ?>
                    <i data-lucide="star" class="w-4 h-4 fill-[#06B6D4]"></i>
                <?php endfor; ?>
            </div>

            <p class="text-slate-600 leading-7  sm:text-xl ">
                “
                <?= htmlspecialchars($testimonial['comment']) ?>”
                </p>
            </div>

    <?php endforeach; ?>

</div>