/**
 * Register Interest / Waitlist page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import { useState } from 'react';
import type { JSX, FormEvent } from 'react';
import { Link } from 'react-router-dom';
{% if dark_mode %}import { ThemeToggle } from '../ui/ThemeToggle';
{% endif %}
const APP_NAME = "{{ project_title }}";
const APP_DESCRIPTION = "{{ project_description }}";

export default function RegisterInterestPage(): JSX.Element {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    // TODO: Wire up to your backend API endpoint
    // await fetch('/api/v1/waitlist', { method: 'POST', body: JSON.stringify({ email, name }) });
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setSubmitted(true);
    setSubmitting(false);
  };

  return (
    <div className="min-h-screen bg-surface text-foreground">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-surface-elevated/80 backdrop-blur border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <Link to="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-sm">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="font-semibold text-foreground">{APP_NAME}</span>
          </Link>
          <div className="flex items-center gap-3">
{% if dark_mode %}            <ThemeToggle size="sm" />
{% endif %}            <Link to="/" className="btn-ghost text-sm px-4 py-2">Home</Link>
          </div>
        </div>
      </header>

      {/* Hero + Form */}
      <section className="max-w-xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28">
        <div className="text-center">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground">
            Join the Waitlist
          </h1>
          <p className="mt-6 text-lg text-muted">
            {APP_DESCRIPTION || `Be the first to know when ${APP_NAME} launches. Sign up for early access.`}
          </p>
        </div>

        {submitted ? (
          <div className="mt-12 card p-8 rounded-lg text-center">
            <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h2 className="text-xl font-semibold text-foreground">You're on the list!</h2>
            <p className="mt-2 text-muted">
              We'll notify you at <span className="font-medium text-foreground">{email}</span> when we launch.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="mt-12 card p-8 rounded-lg space-y-5">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">Name</label>
              <input
                id="name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full px-4 py-2 border border-border rounded-md bg-surface text-foreground placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary/50"
                placeholder="Your name (optional)"
              />
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
              <input
                id="email"
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-4 py-2 border border-border rounded-md bg-surface text-foreground placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary/50"
                placeholder="you@example.com"
              />
            </div>
            <button
              type="submit"
              disabled={submitting}
              className="w-full btn-primary py-3 rounded-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {submitting ? 'Signing up...' : 'Register Interest'}
            </button>
            <p className="text-xs text-muted text-center">
              No spam, ever. We'll only contact you about {APP_NAME} updates.
            </p>
          </form>
        )}

        {/* Social proof */}
        <div className="mt-12 text-center">
          <p className="text-sm text-muted">
            Join others who have already signed up for early access.
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-xs">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="text-sm font-medium text-foreground">{APP_NAME}</span>
          </div>
          <p className="text-xs text-muted">&copy; {new Date().getFullYear()} {APP_NAME}. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}
