/**
 * Benefits.jsx - "Wat je meeneemt naar huis" sectie
 *
 * Toont de 6 benefits van de workshop met icons.
 * Gebruikt card-feature styling voor een premium look.
 */

function Benefits() {
  // De 6 benefits met passende icons (inline SVG)
  const benefits = [
    {
      title: "Een werkend project",
      description: "Geen theorie, maar een app die je maandag direct kunt gebruiken in je bedrijf. Een data analyse app, een betere planningsmodule of zelfgebouwde roostersoftware waar je geen duur abonnement meer voor nodig hebt.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      )
    },
    {
      title: "Zelf maken wat je nodig hebt",
      description: "Na deze workshop weet je hoe je Claude Code een opdracht geeft en een werkend resultaat krijgt. Steeds opnieuw.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      )
    },
    {
      title: "Workflows die je elke week tijd besparen",
      description: "Concrete technieken om terugkerend werk te automatiseren. Niet theoretisch, maar getest op jouw situatie.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
      )
    },
    {
      title: "Begrijpen wat AI zelfstandig voor je kan doen",
      description: "Zonder jargon leer je hoe Claude Code zelfstandig taken uitvoert. Zodat je weet wat je kunt vragen en wat het oplevert.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      )
    },
    {
      title: "Persoonlijke begeleiding in een kleine groep",
      description: "Maximaal 8 deelnemers. Je kunt vragen stellen, fouten maken en op jouw tempo werken.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      )
    },
    {
      title: "Nazorg tot 30 dagen na de workshop",
      description: "Loop je vast na de workshop? Je hebt toegang tot de community en kunt je vragen stellen. Je staat er niet alleen voor.",
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
      )
    }
  ];

  return (
    <section className="section">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-4">
          Wat je meeneemt naar je onderneming
        </h2>
        <p className="text-warm-600 text-center mb-12 max-w-2xl mx-auto">
          Na deze workshop heb je niet alleen kennis, maar ook resultaat.
        </p>

        {/* Benefits grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="card-feature group"
            >
              {/* Icon */}
              <div className="w-12 h-12 rounded-xl bg-coral-100 text-coral-600 flex items-center justify-center mb-4 group-hover:bg-coral-500 group-hover:text-white transition-colors duration-200">
                {benefit.icon}
              </div>

              {/* Title */}
              <h3 className="font-display font-semibold text-lg text-warm-900 mb-2">
                {benefit.title}
              </h3>

              {/* Description */}
              <p className="text-warm-600 leading-relaxed">
                {benefit.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Benefits;
