/**
 * Signup.jsx - Inschrijfpagina met embedded Tally formulier
 *
 * Bezoekers komen hier via de CTA-knoppen op de sales page.
 * Na het invullen van het formulier redirect Tally naar de Mollie betaalpagina.
 */

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

function Signup() {
  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 workshop
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="container-page py-12">
        <div className="max-w-2xl mx-auto">
          <h1 className="heading-hero mb-4 text-center">Inschrijven</h1>
          <p className="text-center text-warm-600 mb-10">
            Vul je gegevens in en je wordt doorgestuurd naar de betaalpagina.
          </p>

          {/* Embedded Tally formulier */}
          <TallyForm
            formId={PAYMENT_CONFIG.SIGNUP_TALLY_ID}
            title="Inschrijving Claude Code Workshop"
          />

          {/* Workshop samenvatting */}
          <div className="mt-8 text-center text-sm text-warm-500 space-y-1">
            <p>Claude Code Workshop | {WORKSHOP_CONFIG.dateFull} | {WORKSHOP_CONFIG.time} | {WORKSHOP_CONFIG.location}</p>
            <p>{WORKSHOP_CONFIG.price} {WORKSHOP_CONFIG.priceExclBtw}</p>
          </div>
        </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 Signup;
