import React from 'react';
import { X, Mail } from 'lucide-react';

interface WaitlistModalProps {
    isOpen: boolean;
    onClose: () => void;
}

const WaitlistModal: React.FC<WaitlistModalProps> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
                onClick={onClose}
            />

            {/* Modal Content */}
            <div className="relative bg-surface-dark border border-gray-800 rounded-3xl p-8 max-w-md w-full shadow-2xl animate-fade-in-up">
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
                >
                    <X size={24} />
                </button>

                <div className="text-center mb-8">
                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <Mail className="text-primary" size={24} />
                    </div>
                    <h3 className="text-2xl font-display font-bold text-white mb-2">
                        Join the Waitlist
                    </h3>
                    <p className="text-gray-400">
                        Be the first to experience focus-driven learning. We'll notify you when we launch!
                    </p>
                </div>

                <form
                    action="https://getlaunchlist.com/s/pAqdup"
                    method="POST"
                    className="space-y-4"
                    onSubmit={() => {
                        (window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
                            .umami?.track?.('waitlist_submitted', { location: 'waitlist_modal' });
                    }}
                >
                    <div className="relative">
                        <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={20} />
                        <input
                            type="email"
                            name="email"
                            placeholder="Enter your email"
                            required
                            autoFocus
                            className="w-full bg-background-dark border border-gray-700 rounded-xl py-4 pl-12 pr-4 text-white placeholder:text-gray-600 focus:outline-none focus:border-primary transition-colors"
                        />
                    </div>

                    <button
                        type="submit"
                        className="w-full bg-primary text-gray-900 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow"
                    >
                        Join Waitlist
                    </button>
                </form>

                <p className="mt-6 text-center text-xs text-gray-600">
                    No credit card required. Unsubscribe at any time.
                </p>
            </div>
        </div>
    );
};

export default WaitlistModal;