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

function RegistrationSuccess() {
    const { t } = useLanguage();

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            Check Your Email
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            We've sent you a verification link. Please check your inbox to continue.
                        </p>
                    </div>
                </div>

                <div className="geometric-divider mb-16"></div>

                {/* Content */}
                <div className="grid-layout">
                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
                        <div className="brutalist-card p-6 space-y-6">
                            <div className="flex items-center justify-center">
                                <div className="w-16 h-16 relative">
                                    <div className="geometric-shape square w-full h-full border-4 border-black"></div>
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <span className="text-2xl">✉</span>
                                    </div>
                                </div>
                            </div>

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

                            <div className="section-divider"></div>

                            <Link to="/login" className="brutalist-button w-full text-center">
                                Back to Login →
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default RegistrationSuccess; 