/**
 * WaitlistSignup.jsx - Wachtlijst inschrijfpagina met embedded Tally formulier
 *
 * Bezoekers komen hier als de workshop volgeboekt is.
 * Tally formulier verzamelt naam + e-mail, geen betaling.
 * Tally ID: kdyPJZ (https://tally.so/r/kdyPJZ)
 */

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

function WaitlistSignup() {
  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">
          {/* Klokje icoon */}
          <div className="mx-auto w-20 h-20 bg-coral-100 rounded-full flex items-center justify-center mb-8">
            <svg className="w-10 h-10 text-coral-500" 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>
          </div>

          <h1 className="heading-hero mb-4 text-center">Zet je op de wachtlijst</h1>
          <p className="text-center text-warm-600 mb-4">
            De workshop van 3 april is volgeboekt. Zet je op de wachtlijst en we laten je weten als er een plek vrijkomt of als er een nieuwe editie gepland wordt.
          </p>
          <p className="text-center text-warm-500 text-sm mb-10">
            Geen verplichtingen, geen betaling. Alleen je naam en e-mailadres.
          </p>

          {/* Embedded Tally wachtlijst formulier */}
          <TallyForm
            formId={PAYMENT_CONFIG.WAITLIST_TALLY_ID}
            title="Wachtlijst Claude Code Workshop"
          />
        </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 WaitlistSignup;
