import { useState } from 'react';
import { useLanguage } from '../context/LanguageContext';

function Login() {
    const [email, setEmail] = useState('');
    const [isFocused, setIsFocused] = useState(false);
    const { t } = useLanguage();

    const handleSubmit = (e) => {
        e.preventDefault();
        // Handle login logic here
        console.log('Login with:', email);
    };

    return (
        <div className="min-h-screen flex items-center justify-center px-4 relative">
            {/* Background elements */}
            <div className="absolute inset-0 pointer-events-none overflow-hidden">
                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
            </div>

            <div className="w-full max-w-md relative">
                {/* Header */}
                <div className="text-center">
                    <h2 className="text-[40px] font-light tracking-tight text-gray-900 relative inline-block">
                        {t('login.title')}
                        <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></span>
                    </h2>
                    <p className="mt-2 text-sm text-gray-600">
                        {t('login.subtitle')}
                    </p>
                </div>

                {/* Form */}
                <form onSubmit={handleSubmit} className="mt-12">
                    <div className="space-y-6">
                        <div className="relative">
                            <label htmlFor="email" className="sr-only">
                                Email address
                            </label>
                            <input
                                id="email"
                                name="email"
                                type="email"
                                required
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                onFocus={() => setIsFocused(true)}
                                onBlur={() => setIsFocused(false)}
                                placeholder="Email address"
                                className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
                            />
                            <div className={`absolute inset-0 rounded-full border border-brand-purple transform scale-105 opacity-0 transition-all duration-300 ${isFocused ? 'opacity-10' : ''}`}></div>
                        </div>

                        <div className="relative group">
                            <button
                                type="submit"
                                className="flex w-full justify-center items-center rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all gap-2"
                            >
                                <span>{t('login.continue')}</span>
                                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                            </button>
                            <div className="absolute inset-0 rounded-full bg-brand-purple opacity-0 group-hover:opacity-10 transform scale-105 transition-all"></div>
                        </div>
                    </div>
                </form>

                {/* Footer */}
                <p className="mt-8 text-center text-sm text-gray-500">
                    {t('login.noAccount')}{' '}
                    <a href="/pricing" className="font-medium text-brand-purple hover:text-brand-purple/80 relative inline-block group">
                        {t('login.viewPricing')}
                        <span className="absolute bottom-0 left-0 w-full h-0.5 bg-brand-purple transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
                    </a>
                </p>
            </div>
        </div>
    );
}

export default Login; 