tabler/shared/components/marketing/sections/Testimonials.astro

---
import testimonials from '@data/testimonials.json'
import { people } from '@shared/lib/people'
import Avatar from '@ui/Avatar.astro'
import { relativeBase } from '@shared/lib/url'

interface Props {
  class?: string
  limit?: number
  hideHeader?: boolean
}

const { class: className, limit = 99, hideHeader } = Astro.props

const base = relativeBase(Astro.url.pathname)

const sectionClass = ['section', className]

// Slice testimonials and split into 3 columns.
const list = (testimonials as string[]).slice(0, limit)
const n = 3
// At least 1, or a limit below 2 would never advance the loop below.
const chunkSize = Math.max(1, Math.round(list.length / n))
const groups: string[][] = []
for (let i = 0; i < list.length; i += chunkSize) {
  groups.push(list.slice(i, i + chunkSize))
}

// Global counter starting at 1 — indexes people[i] (people[0] is intentionally skipped).
let i = 1
const cards = groups.map((group) =>
  group.map((testimonial) => {
    const person = people[i] ?? {}
    i += 1
    return { testimonial, person }
  }),
)
---

<section class:list={sectionClass}>
  <div class="container">
    {
      !hideHeader && (
        <div class="section-header">
          <h2 class="section-title">Trusted by hundreds</h2>
          <p class="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
        </div>
      )
    }

    <div class="row g-lg-6">
      {
        cards.map((group) => (
          <div class="col-md-6 col-lg-4">
            <div class="row g-lg-6">
              {group.map(({ testimonial, person }) => (
                <div class="col-12">
                  <a href="#" class="card bg-surface-secondary">
                    <div class="card-body">
                      <div class="row mb-3">
                        <div class="col-auto">
                          <Avatar person={person} size="md" base={base} />
                        </div>
                        <div class="col">
                          <h3 class="h3 m-0">{person.full_name}</h3>
                          <div class="text-secondary">{person.job_title}</div>
                        </div>
                      </div>

                      <p>{testimonial}</p>
                    </div>
                  </a>
                </div>
              ))}
            </div>
          </div>
        ))
      }
    </div>
  </div>
</section>