/**
 * ForWho.jsx - "Is deze workshop iets voor jou?" sectie
 *
 * Bevat drie delen:
 * 1. "Deze workshop is voor jou als:" lijst
 * 2. "Wat je nodig hebt" kolom
 * 3. "Wat je niet nodig hebt" kolom
 */

function ForWho() {
  // Ideale deelnemer kenmerken
  const idealFor = [
    "Je bent ZZP'er of ondernemer in het MKB",
    "Je wilt AI praktisch inzetten, niet alleen erover lezen",
    "Je hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid)",
    "Je bent bereid een ochtend te investeren om echt te leren",
    "Je wilt werken aan je eigen project, niet aan een standaard oefening"
  ];

  // Wat je nodig hebt
  const requirements = [
    "Een laptop die je meeneemt",
    "Een betaald Claude account (Pro of Max) - dit heb je vooraf geregeld",
    "Basiskennis van je computer (bestanden openen, software installeren)"
  ];

  // Wat je niet nodig hebt
  const notRequired = [
    "Programmeerervaring",
    "Eerdere AI kennis",
    "Technische achtergrond"
  ];

  return (
    <section className="section">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Is deze workshop iets voor jou?
        </h2>

        {/* Ideal deelnemer */}
        <div className="max-w-3xl mx-auto mb-12">
          <h3 className="heading-3 mb-6">
            Deze workshop is voor jou als:
          </h3>

          <ul className="space-y-4">
            {idealFor.map((item, index) => (
              <li key={index} className="flex gap-3">
                {/* Check icon */}
                <svg
                  className="w-6 h-6 text-teal-500 flex-shrink-0 mt-0.5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
                <span className="text-warm-700 text-lg">{item}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Requirements grid */}
        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {/* Wat je nodig hebt - GROEN */}
          <div className="card border-l-4 border-l-teal-500">
            <h3 className="font-display font-semibold text-lg text-warm-900 mb-4 flex items-center gap-2">
              {/* Check icon */}
              <svg className="w-5 h-5 text-teal-500" 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>
              Wat je nodig hebt
            </h3>

            <ul className="space-y-3">
              {requirements.map((item, index) => (
                <li key={index} className="flex gap-3 text-warm-600">
                  <svg
                    className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Wat je niet nodig hebt - ROOD */}
          <div className="card bg-warm-50 border-l-4 border-l-coral-500">
            <h3 className="font-display font-semibold text-lg text-warm-900 mb-4 flex items-center gap-2">
              {/* X icon */}
              <svg className="w-5 h-5 text-coral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
              </svg>
              Wat je niet nodig hebt
            </h3>

            <ul className="space-y-3">
              {notRequired.map((item, index) => (
                <li key={index} className="flex gap-3 text-warm-600">
                  <svg
                    className="w-5 h-5 text-coral-400 flex-shrink-0 mt-0.5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

export default ForWho;