/**
 * ThankYou.jsx - Bedankt-pagina na succesvolle betaling
 *
 * Bezoekers komen hier terecht na betaling via Mollie.
 * Toont bevestiging, workshop details en vervolgstappen.
 */

import { Link } from 'react-router-dom';
import { WORKSHOP_CONFIG } from '../config/workshop';

function ThankYou() {
  return (
    <div className="min-h-screen bg-warm-50">
      {/* Header */}
      <header className="bg-white border-b border-warm-200 py-6">
        <div className="container-page">
          <Link
            to="/"
            className="text-coral-500 hover:text-coral-600 transition-colors inline-flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Terug naar homepage
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="container-page py-12">
        <div className="max-w-2xl mx-auto text-center">
          {/* Checkmark icoon */}
          <div className="mx-auto w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mb-8">
            <svg className="w-10 h-10 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          </div>

          <h1 className="heading-hero mb-4">Je bent erbij!</h1>
          <p className="text-xl text-warm-600 mb-4">
            Je betaling is ontvangen en je inschrijving is bevestigd.
          </p>
          <p className="text-warm-500 mb-10">
            Binnen 24 uur ontvang je een factuur en bevestigingsmail.
          </p>

          {/* Workshop details */}
          <div className="card text-left mb-10">
            <h2 className="heading-3 mb-4">Workshop details</h2>
            <div className="space-y-3 text-warm-600">
              <div className="flex gap-3">
                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span>{WORKSHOP_CONFIG.dateFull}</span>
              </div>
              <div className="flex gap-3">
                <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>{WORKSHOP_CONFIG.time} uur</span>
              </div>
              <div className="flex gap-3">
                <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span>{WORKSHOP_CONFIG.venue}</span>
              </div>
            </div>
          </div>

          {/* Vervolgstappen */}
          <div className="card text-left mb-10">
            <h2 className="heading-3 mb-4">Wat gebeurt er nu?</h2>
            <ol className="space-y-4 text-warm-600">
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
                <span>Binnen 24 uur ontvang je een factuur en bevestigingsmail.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
                <span>Een week voor de workshop ontvang je een mail met praktische informatie en voorbereidingsinstructies.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
                <span>Op {WORKSHOP_CONFIG.dateShort} neem je je laptop mee en gaan we aan de slag!</span>
              </li>
            </ol>
          </div>

          {/* Contact */}
          <p className="text-warm-500">
            Vragen? Mail naar{' '}
            <a href={`mailto:${WORKSHOP_CONFIG.email}`} className="text-coral-500 hover:text-coral-600">
              {WORKSHOP_CONFIG.email}
            </a>
          </p>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-warm-900 text-warm-400 py-6">
        <div className="container-page text-center text-sm">
          &copy; {new Date().getFullYear()} Frank Meeuwsen. Alle rechten voorbehouden.
        </div>
      </footer>
    </div>
  );
}

export default ThankYou;
