/**
 * 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: `${import.meta.env.BASE_URL}20260312-FloorVanRiet.jpeg`,
      url: "https://floorvanriet.nl/",
      initials: "FvR"
    },
    {
      quote: "Ik bedacht een aanvulling voor mijn eigen Notion app en meldde me aan. Claude Code maakt mijn leven als ondernemer weer een stukje sneller en fijner. Frank geeft de workshop met heel veel enthousiasme, heerlijke humor, nuchterheid en onwijs veel kennis. Je wordt helemaal begeleid en stap voor stap er doorheen geholpen.",
      name: "Astrid van de Nieuwenhof",
      role: "Notion certified consultant",
      avatar: `${import.meta.env.BASE_URL}20260312-AstridVanDeNieuwenhof.jpeg`,
      url: "https://www.flowtion.nl/",
      initials: "AvdN"
    },
    {
      quote: "Onbeschrijfelijk inspirerend om dit mét een groep te doen. Dit zetje had ik net nodig.",
      name: "Jefta Bade",
      role: "Strategic Visualizer",
      avatar: `${import.meta.env.BASE_URL}20260211174-JeftaBade.jpg`,
      url: "https://drawn.today/",
      initials: "JB"
    },
    {
      quote: "Frank leert je op een laagdrempelige en humoristische manier hoe je zelf in een paar uur je eigen app bouwt, zonder technische kennis. Je leert dingen waarvan je niet wist dat je ze wilde leren",
      name: "Monique Dubbelman",
      role: "Community Manager",
      avatar: `${import.meta.env.BASE_URL}20260211174-MoniqueDubbelman.jpg`,
      url: "https://modub.nl/",
      initials: "MD"
    },
    {
      quote: "Kan een niet-developer apps, websites, games maken? Het lijkt te mooi om waar te zijn, totdat Frank je met een glimlach en geduld gerust stelt. Voor mij was deze sessie zeer inspirerend en zorgde ervoor dat ik vier apps heb gemaakt in korte tijd.",
      name: "Ewout Wolff",
      role: "Digital marketing manager a.i.",
      avatar: `${import.meta.env.BASE_URL}20260312-EwoutWolff.png`,
      url: "https://www.onedaycompany.nl/",
      initials: "EW"
    }
  ];

  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' :
          testimonials.length === 4 ? 'md:grid-cols-2 max-w-4xl' :
          '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;