workshopclaudecode/src/components/Testimonials.jsx

/**
 * Testimonials.jsx - "Wat deelnemers zeggen" sectie
 *
 * Testimonial cards met quote decoratie.
 * Ondersteunt avatar afbeeldingen (URL) met initials als fallback.
 */

function Testimonials() {
  const testimonials = [
    {
      quote: "Het is superleuk om met mensen met allerlei achtergronden te experimenteren met Claude Code. Voelt echt als pionieren. Het enthousiasme van Frank is heel aanstekelijk.",
      name: "Floor van Riet",
      role: "Product Designer",
      avatar: "https://media.licdn.com/dms/image/v2/D4E03AQHYK2HR-WwupQ/profile-displayphoto-shrink_800_800/B4EZQsEaLGHsAk-/0/1735906141338?e=1772064000&v=beta&t=qbYQjmR76G_32PdCh9xipHEu7b4T3K5WrCzic4h9IaI",
      url: "https://floorvanriet.nl/",
      initials: "FvR"
    },
    {
      quote: "Onbeschrijfelijk inspirerend om dit mét een groep te doen. Dit zetje had ik net nodig.",
      name: "Jefta Bade",
      role: "Strategic Visualizer",
      avatar: "https://media.licdn.com/dms/image/v2/D4E03AQGgpwYSPHAihA/profile-displayphoto-crop_800_800/B4EZwo83s5GcAI-/0/1770213573365?e=1772064000&v=beta&t=i9hNyvY6KEfEJaGLOKJGsUgrfHMQBLtxn9L1pvhJh1s",
      url: "https://drawn.today/",
      initials: "JB"
    }
  ];

  return (
    <section className="section">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Wat deelnemers zeggen
        </h2>

        {/* Testimonials grid - past zich aan op aantal items */}
        <div className={`grid gap-6 max-w-5xl mx-auto ${
          testimonials.length === 1 ? 'max-w-2xl' :
          testimonials.length === 2 ? 'md:grid-cols-2' :
          'md:grid-cols-3'
        }`}>
          {testimonials.map((testimonial, index) => (
            <div
              key={index}
              className="card relative flex flex-col"
            >
              {/* Quote icon decoratie */}
              <div className="absolute -top-3 -left-2">
                <svg
                  className="w-10 h-10 text-coral-200"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                </svg>
              </div>

              {/* Quote tekst */}
              <blockquote className="mt-4 mb-6">
                <p className="text-warm-600 italic leading-relaxed">
                  "{testimonial.quote}"
                </p>
              </blockquote>

              {/* Auteur info */}
              <div className="flex items-center gap-3 mt-auto">
                {/* Avatar: afbeelding of initials als fallback */}
                {testimonial.avatar ? (
                  <img
                    src={testimonial.avatar}
                    alt={testimonial.name}
                    className="w-12 h-12 rounded-full object-cover"
                  />
                ) : (
                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-coral-100 to-teal-100 flex items-center justify-center">
                    <span className="text-warm-500 font-semibold">
                      {testimonial.initials}
                    </span>
                  </div>
                )}

                {/* Naam en functie */}
                <div>
                  <p className="font-semibold text-warm-900">
                    {testimonial.name}
                  </p>
                  {testimonial.url ? (
                    <a
                      href={testimonial.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-teal-600 hover:text-teal-700 hover:underline"
                    >
                      {testimonial.role}
                    </a>
                  ) : (
                    <p className="text-sm text-warm-500">
                      {testimonial.role}
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Testimonials;