/**
 * PainPoints.jsx - "Herkenbaar?" sectie
 *
 * Toont de frustraties/pijnpunten die de doelgroep herkent.
 * Elke pain point heeft een vraag-icoon voor visuele herkenning.
 */

function PainPoints() {
  // De 4 pain points uit de content
  const painPoints = [
    "Je weet dat AI tools je kunnen helpen, maar je hebt geen idee waar je moet beginnen met Claude Code?",
    "Je betaalt een developer, VA of tool-abonnement voor iets dat Claude Code in een middag voor je kan maken?",
    "Je hebt weinig tijd om te experimenteren en trial-and-error voelt als verspilling van kostbare uren?",
    "Je kijkt wat YouTube tutorials, maar zodra je zelf begint loopt het anders dan in de video?"
  ];

  return (
    <section className="section-alt">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Is dit herkenbaar voor je?
        </h2>

        {/* Pain points grid */}
        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-10">
          {painPoints.map((point, index) => (
            <div
              key={index}
              className="flex gap-4 p-6 bg-white rounded-xl border border-warm-200"
            >
              {/* Vraag icoon */}
              <div className="flex-shrink-0">
                <div className="w-10 h-10 rounded-full bg-coral-100 flex items-center justify-center">
                  <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
              </div>

              {/* Pain point tekst */}
              <p className="text-warm-700 leading-relaxed">
                {point}
              </p>
            </div>
          ))}
        </div>

        {/* Afsluitende tekst */}
        <div className="max-w-2xl mx-auto text-center">
          <p className="text-lg text-warm-600 leading-relaxed">
            Dat is frustrerend. Want je weet dat je sneller zou kunnen werken,
            betere output zou kunnen leveren. Maar die drempel...
            die blijft maar in de weg zitten. Daar is deze workshop voor.
          </p>
        </div>
      </div>
    </section>
  );
}

export default PainPoints;
