---
interface Props {
  lang: 'es' | 'en';
}
const { lang } = Astro.props;

const items = [
  { initials: 'M', name: 'Mauricio', role: lang === 'en' ? 'Founder & SysAdmin' : 'Fundador y SysAdmin', quote: lang === 'en' ? 'We answer the phone. That is the whole point.' : 'Atendemos el teléfono. Ese es todo el punto.' },
  { initials: '?', name: lang === 'en' ? 'Your client here' : 'Tu cliente acá', role: lang === 'en' ? 'Reserved spot' : 'Espacio reservado', quote: lang === 'en' ? 'This space is for your first testimonial.' : 'Este espacio es para tu primer testimonio.' },
  { initials: '?', name: lang === 'en' ? 'Coming soon' : 'Próximamente', role: lang === 'en' ? 'Reserved spot' : 'Espacio reservado', quote: lang === 'en' ? 'Tell us when a client is happy and we add it here.' : 'Contanos cuando un cliente esté conforme y lo sumamos acá.' },
];
---
<section class="py-20 md:py-28" style="background: var(--hds-bg-soft);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 reveal">
      <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold tracking-[0.2em] uppercase" style="background: var(--hds-bg); color: var(--color-hds-naranja);">
        {lang === 'en' ? 'Testimonials' : 'Testimonios'}
      </span>
      <h2 class="font-display mt-4" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
        {lang === 'en' ? 'What clients say' : 'Lo que dicen los clientes'}.
      </h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 stagger">
      {items.map((item, idx) => (
        <article class="rounded-2xl p-8 relative" style={`background: var(--hds-card); border: 1px solid var(--hds-line); ${idx === 0 ? 'border-color: var(--color-hds-naranja); border-width: 1.5px;' : ''}`}>
          <svg class="absolute top-6 right-6 opacity-20" width="40" height="40" viewBox="0 0 24 24" fill="var(--color-hds-naranja)" aria-hidden="true">
            <path d="M3 21c3 0 7-1 7-8V5H3v6h3c0 4-1 5-3 5v5zm10 0c3 0 7-1 7-8V5h-7v6h3c0 4-1 5-3 5v5z"/>
          </svg>

          <div class="flex items-center gap-3 mb-5">
            <div class="w-12 h-12 rounded-full flex items-center justify-center font-display text-xl" style={`background: ${idx === 0 ? 'var(--color-hds-naranja)' : 'var(--hds-bg-soft)'}; color: ${idx === 0 ? 'white' : 'var(--color-hds-naranja)'};`}>
              {item.initials}
            </div>
            <div>
              <div class="font-semibold text-sm" style="color: var(--hds-fg);">{item.name}</div>
              <div class="text-xs" style="color: var(--hds-fg-muted);">{item.role}</div>
            </div>
          </div>

          <blockquote class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
            "{item.quote}"
          </blockquote>
        </article>
      ))}
    </div>

    <div class="mt-10 text-center">
      <p class="text-sm italic" style="color: var(--hds-fg-muted);">
        {lang === 'en' ? 'Customer testimonials are published with explicit consent. Working on it.' : 'Los testimonios se publican con consentimiento explícito del cliente. Working on it.'}
      </p>
    </div>
  </div>
</section>