workshopclaudecode/src/components/Pricing.jsx

/**
 * Pricing.jsx - "Investering" sectie
 *
 * Toont de prijs, inclusief lijst en urgency element.
 * Bevat primaire CTA button die naar Mollie betaalpagina linkt.
 */

import { Link } from 'react-router-dom';
import { PAYMENT_CONFIG } from '../config/payment';

function Pricing() {
  // Wat is inbegrepen
  const included = [
    "Volledige workshop (9:00 - 14:00)",
    "Lunch en onbeperkt koffie/thee",
    "Online werkboek met alle commando's en tips",
    "Toegang tot de besloten community voor vragen achteraf",
    "Persoonlijke begeleiding bij je project"
  ];

  return (
    <section className="section" id="inschrijven">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Wat kost het?
        </h2>

        {/* Prijsanker - context voor de investering */}
        <div className="max-w-2xl mx-auto mb-10">
          <p className="text-center text-warm-600 leading-relaxed">
            Een freelance developer inhuren voor een simpele tool: 1.500 - 3.000 euro.
            Een SaaS-abonnement dat bijna doet wat je wilt: 50 - 200 euro per maand.
            Zelf weken uitzoeken via tutorials: onbetaalde uren die je niet aan klanten besteedt.
          </p>
        </div>

        {/* Pricing card */}
        <div className="max-w-xl mx-auto">
          <div className="card border-2 border-coral-200 relative overflow-hidden">
            {/* Decoratieve hoek */}
            <div
              className="absolute -top-10 -right-10 w-32 h-32 bg-coral-100 rounded-full blur-2xl opacity-60"
              aria-hidden="true"
            />

            <div className="relative">
              {/* Prijs */}
              <div className="text-center mb-8">
                <div className="flex items-baseline justify-center gap-2">
                  <span className="text-5xl md:text-6xl font-display font-bold text-warm-900">
                    €399
                  </span>
                  <span className="text-warm-500 text-lg">
                    per persoon
                  </span>
                </div>
                <p className="text-warm-500 mt-1">
                  excl. BTW
                </p>
              </div>

              {/* Inclusief lijst */}
              <div className="mb-8">
                <h3 className="font-semibold text-warm-800 mb-4">
                  Inbegrepen:
                </h3>
                <ul className="space-y-3">
                  {included.map((item, index) => (
                    <li key={index} className="flex gap-3">
                      {/* Check icon */}
                      <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 className="text-warm-600">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Urgency */}
              <div className="bg-coral-50 border border-coral-200 rounded-xl p-4 mb-6">
                <div className="flex gap-3">
                  {/* Warning icon */}
                  <svg
                    className="w-5 h-5 text-coral-500 flex-shrink-0 mt-0.5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    />
                  </svg>
                  <div>
                    <p className="font-semibold text-coral-700">
                      Maximaal 8 deelnemers per workshop
                    </p>
                    <p className="text-coral-600 text-sm mt-1">
                      Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt.
                    </p>
                  </div>
                </div>
              </div>

              {/* CTA Button - naar inschrijfpagina */}
              <Link
                to={PAYMENT_CONFIG.SIGNUP_URL}
                className="btn-primary w-full text-center block"
              >
                Doe mee op 6 maart
              </Link>

              {/* Annuleringsbeleid als vertrouwenssignaal */}
              <div className="mt-6 flex gap-3 text-sm text-warm-500">
                <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                  />
                </svg>
                <p>
                  Meer dan 14 dagen van tevoren annuleren? Volledige terugbetaling. Kun je niet? Stuur gerust iemand anders in je plaats.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Pricing;