function Testimonials() {
  const items = [
    {
      q: "Meu filho jogou 14 partidas esse semestre. Agora sei exatamente quantos gols ele fez e quanto gastei na temporada.",
      a: "Rafael P.", r: "Pai de atleta sub-11",
    },
    {
      q: "Finalmente consigo controlar mensalidade, uniforme e viagens sem planilha. E ainda vejo a evolução do meu filho.",
      a: "Daniela S.", r: "Mãe de atleta sub-10",
    },
    {
      q: "O resumo mensal de custos por campeonato me salvou. Descobri que gastava o dobro do que achava.",
      a: "André M.", r: "Pai de dois atletas",
    },
    {
      q: "Simples e direto. Números do craque e números do bolso, no mesmo lugar.",
      a: "Carla F.", r: "Mãe de atleta sub-13",
    },
    {
      q: "Compartilhar o card do meu filho no grupo da família virou o momento do mês. Todo mundo acompanha.",
      a: "Bruno L.", r: "Pai de atleta sub-9",
    },
  ];

  return (
    <section id="depoimentos" className="relative py-24 border-t border-outline overflow-hidden" data-screen-label="Depoimentos">
      <div className="max-w-7xl mx-auto px-6 mb-12">
        <div className="flex items-end justify-between flex-wrap gap-6">
          <div>
            <div className="code-chip text-on-surface-variant mb-3"><span className="text-primary">/</span>depoimentos</div>
            <h2 className="text-4xl md:text-5xl font-black tracking-tighter leading-[1.05]">
              Pais que acompanham<br />
              <span className="text-tertiary">números e custos.</span>
            </h2>
          </div>
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-1">
              {Array.from({ length: 5 }).map((_, i) => (
                <Icon key={i} name="star" fill className="text-warning" size={18} />
              ))}
            </div>
            <div>
              <div className="text-2xl font-black">4.8</div>
              <div className="text-[10px] uppercase tracking-widest font-bold text-on-surface-variant">2.341 avaliações</div>
            </div>
          </div>
        </div>
      </div>

      {/* Marquee */}
      <div className="relative">
        <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none" />
        <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none" />
        <div className="flex gap-4 marquee-track w-max">
          {[...items, ...items].map((it, i) => (
            <div key={i} className="w-[340px] shrink-0 bg-surface-container border border-outline rounded-xl p-5">
              <Icon name="format_quote" className="text-primary" size={20} />
              <p className="text-[14px] text-on-surface leading-relaxed mt-2 mb-4">{it.q}</p>
              <div className="pt-3 border-t border-outline flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-surface-container-high border border-outline flex items-center justify-center">
                  <Icon name="person" className="text-on-surface-variant" size={16} />
                </div>
                <div>
                  <div className="text-[12px] font-bold">{it.a}</div>
                  <div className="text-[10px] text-on-surface-variant">{it.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;