// Deezer-version of testimonials: continuously scrolling marquee of client reviews.
function TestimonialsDeezer() {
  const items = [
    { quote: <>Współpraca z Maciejem przebiegła pomyślnie. Aplikacja do zarządzania zamówieniami zdjęła z nas <em>mnóstwo pracy</em> - mój zespół korzysta teraz tylko z niej.</>,
      name: "Piotr",    role: "Radom · e-commerce",        avatar: "PR" },
    { quote: <>Maciej jest bardzo sprawny. <em>Szybko realizuje projekty.</em> Super nam doradził.</>,
      name: "Marcin",   role: "Wołomin · e-commerce",      avatar: "MW" },
    { quote: <>Pan Maciej wdrożył u nas automatyzację stanów magazynowych oraz chatbota na stronę www, który odpowiada na pytania klientów o zamówienia. <em>Dużo mniej telefonów i maili</em> z zapytaniami o status.</>,
      name: "Bartek",   role: "Wołomin · e-commerce",      avatar: "BW" },
    { quote: <>Szybka, sprawna, profesjonalna obsługa. Potrzebowaliśmy rozwiązania na wczoraj. <em>Maciej ogarnął w 2 doby.</em> Polecam!</>,
      name: "Marek",    role: "Poznań · e-commerce",       avatar: "MP" },
  ];

  // Render the list twice so the CSS marquee loop is seamless.
  const loop = [...items, ...items];

  return (
    <section className="g-section" id="opinie">
      <SectionHeader
        title={<>Co mówią <em>klienci</em>?</>}
      />

      <div className="g-tm-marquee" aria-label="Opinie klientów">
        <div className="g-tm-marquee-track">
          {loop.map((t, i) => (
            <blockquote key={i} className="g-tmcard" aria-hidden={i >= items.length}>
              <i data-lucide="quote" className="g-tmcard-mark"></i>
              <p className="g-tmcard-text">{t.quote}</p>
              <footer className="g-tmcard-by">
                <div className="g-tmcard-avatar">{t.avatar}</div>
                <div>
                  <div className="g-tmcard-name">{t.name}</div>
                  <div className="g-tmcard-role">{t.role}</div>
                </div>
              </footer>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TestimonialsDeezer = TestimonialsDeezer;