import { Link } from 'react-router-dom';
import Footer from '../components/Footer';

function RegistrationSuccess() {

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="mb-16">
                    <h1 className="text-[60px] leading-tight font-light tracking-tight text-gray-900 lg:text-[80px] relative mb-6">
                        <span className="relative inline-block">
                            Check Your Email
                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                        </span>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl">
                        We&apos;ve sent you a verification link. Please check your inbox to continue.
                    </p>
                </div>

                {/* Content */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 space-y-8 border border-gray-100 relative group">
                        {/* Gradient border */}
                        <div className="absolute inset-0 rounded-3xl border border-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20 pointer-events-none"></div>
                        
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
                                <span className="text-2xl text-brand-purple">✉</span>
                            </div>
                        </div>

                        <div className="text-center space-y-4">
                            <p className="text-gray-500">
                                Click the link in the email we just sent you to verify your account.
                            </p>
                            <p className="text-sm text-gray-400">
                                Didn&apos;t receive the email? Check your spam folder or{" "}
                                <button 
                                    onClick={() => window.location.reload()}
                                    className="text-brand-purple hover:text-brand-purple/80 transition-colors font-medium"
                                >
                                    click here to try again
                                </button>
                            </p>
                        </div>

                        <Link 
                            to="/login" 
                            className="w-full bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
                        >
                            <span>Back to Login</span>
                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                        </Link>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default RegistrationSuccess;
