/**
 * 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 { useEffect } from 'react';
import { Link } from 'react-router-dom';

function Signup() {
  // Laad het Tally embed script zodra de pagina mount
  useEffect(() => {
    const scriptUrl = 'https://tally.so/widgets/embed.js';

    // Check of het script al geladen is
    if (typeof window.Tally !== 'undefined') {
      window.Tally.loadEmbeds();
      return;
    }

    // Script nog niet geladen? Voeg het toe
    if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
      const script = document.createElement('script');
      script.src = scriptUrl;
      script.onload = () => {
        if (typeof window.Tally !== 'undefined') {
          window.Tally.loadEmbeds();
        }
      };
      document.body.appendChild(script);
    }
  }, []);

  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 */}
          <div className="card">
            <iframe
              data-tally-src="https://tally.so/embed/0Q6v8A?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
              loading="lazy"
              width="100%"
              height="300"
              frameBorder="0"
              title="Inschrijving Claude Code Workshop"
            />
          </div>

          {/* Workshop samenvatting */}
          <div className="mt-8 text-center text-sm text-warm-500 space-y-1">
            <p>Claude Code Workshop | Vrijdag 6 maart 2026 | 9:00 - 14:00 | Utrecht</p>
            <p>EUR 399 excl. BTW (EUR 482,79 incl. BTW)</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;
