/**
 * Testimonials.jsx - "Wat deelnemers zeggen" sectie
 *
 * 3 placeholder testimonial cards met quote decoratie.
 * Bevat avatar met initialen, naam en functie.
 */

function Testimonials() {
  // Placeholder testimonials - worden vervangen na eerste workshops
  const testimonials = [
    {
      quote: "[Quote over specifieke ervaring of doorbraak - aha-moment tijdens de workshop]",
      name: "Naam Deelnemer",
      role: "Functie / Bedrijf",
      initials: "ND"
    },
    {
      quote: "[Quote over praktische toepassing na de workshop - hoe het hun werk heeft verbeterd]",
      name: "Naam Deelnemer",
      role: "Functie / Bedrijf",
      initials: "ND"
    },
    {
      quote: "[Quote over de begeleiding en sfeer - persoonlijke aandacht en groepsdynamiek]",
      name: "Naam Deelnemer",
      role: "Functie / Bedrijf",
      initials: "ND"
    }
  ];

  return (
    <section className="section">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-4">
          Wat deelnemers zeggen
        </h2>
        <p className="text-warm-500 text-center mb-12 italic">
          Testimonials worden toegevoegd na de eerste workshops
        </p>

        {/* Testimonials grid */}
        <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
          {testimonials.map((testimonial, index) => (
            <div
              key={index}
              className="card relative"
            >
              {/* 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 met initialen */}
                <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>
                  <p className="text-sm text-warm-500">
                    {testimonial.role}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Testimonials;