'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import BuilderCvGenrator from '../../components/organisms/BuilderCvGenrator';
import Swal from 'sweetalert2';
import {
  FaEnvelope,
  FaLock,
  FaEye,
  FaEyeSlash,
  FaUser,
  FaTimes,
  FaFileAlt,
  FaArrowRight,
  FaPhone,
  FaGlobe,
  FaMapMarkerAlt,
  FaGraduationCap,
  FaRocket,
  FaFilePdf,
  FaMagic,
  FaUserCheck,
  FaDownload,
  FaShieldAlt,
  FaMobileAlt,
  FaGlobeEurope,
  FaCheckCircle,
  FaArrowLeft,
  FaEdit
} from 'react-icons/fa';
import { Suspense } from 'react';
import { useUserStore } from "../../../store/useUserStore";

function ResumeContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  // States
  const [isLoginForm, setIsLoginForm] = useState(true);
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [pendingResumeData, setPendingResumeData] = useState(null);
  const [isSaving, setIsSaving] = useState(false);
  
  // New state to track mode
  const [pageMode, setPageMode] = useState('landing'); // 'landing', 'create', 'edit'
  const [isHovered, setIsHovered] = useState(false);

  // Countries, states, cities data
  const [countries, setCountries] = useState([]);
  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);

  const setUser = useUserStore((state) => state.setUser);
  
  // Form data
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    
    // Registration form fields
    first_name: '',
    last_name: '',
    phone: '',
    phone_code: '92',
    nationality: '',
    state: '',
    city: '',
    program_type: '',
    gender: '',
    agree: false,
  });

  // Check if we have stId in URL
  const stId = searchParams.get('stId');

  // Determine what to show based on URL
  useEffect(() => {
    if (stId) {
      // If stId is in URL, check auth and show CV form in edit mode
      setPageMode('edit');
      checkAuthForResumeAccess(stId);
    } else {
      // No stId means show landing page
      setPageMode('landing');
      setIsCheckingAuth(false);
      loadCountries();
    }
  }, [stId]);

  // Load countries when modal opens or on mount
  useEffect(() => {
    if (showAuthModal) {
      loadCountries();
    }
  }, [showAuthModal]);

  // Reset form when modal closes
  const resetForms = () => {
    setIsLoginForm(true);
    setFormData({
      email: '',
      password: '',
      first_name: '',
      last_name: '',
      phone: '',
      phone_code: '92',
      nationality: '',
      state: '',
      city: '',
      program_type: '',
      gender: '',
      agree: false,
    });
    setShowPassword(false);
    setStates([]);
    setCities([]);
  };

  // Check auth when accessing specific resume URL
  const checkAuthForResumeAccess = async (resumeStId) => {
    setIsCheckingAuth(true);
    
    try {
      const response = await fetch('/api/frontend/check-auth', {
        method: 'POST',
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        
        if (data.success && data.data) {
          const user = data.data;
          // Check if user owns this resume
          if (user.id == resumeStId) {
            setUser(data.data);
            // User is logged in and owns the resume
            setIsCheckingAuth(false);
          } else {
            // User doesn't own this resume
            Swal.fire({
              title: 'Access Denied',
              text: 'You can only access your own resumes.',
              icon: 'error',
              confirmButtonColor: '#0B6D76'
            }).then(() => {
              router.replace('/resume-builder');
              setPageMode('landing');
            });
          }
        } else {
          // Not logged in, show auth modal for login
          setShowAuthModal(true);
        }
      } else {
        // Not logged in
        setShowAuthModal(true);
      }
    } catch (error) {
      console.error('Auth check error:', error);
      setShowAuthModal(true);
    } finally {
      setIsCheckingAuth(false);
    }
  };

  // Load countries
  const loadCountries = async () => {
    try {
      const response = await fetch('/api/frontend/countries-with-phone');
      const data = await response.json();
      if (data.success) {
        setCountries(data.data);
      }
    } catch (error) {
      console.error('Error loading countries:', error);
    }
  };

  // Load states
  const loadStates = async (countryId) => {
    try {
      const response = await fetch(`/api/frontend/states?countryId=${countryId}`, { method: "POST" });
      const data = await response.json();
      if (data.success) {
        setStates(data.states);
      }
    } catch (error) {
      console.error('Error loading states:', error);
    }
  };

  // Load cities
  const loadCities = async (stateId) => {
    try {
      const response = await fetch(`/api/frontend/cities?stateId=${stateId}`, { method: "POST" });
      const data = await response.json();
      if (data.success) {
        setCities(data.cities);
      }
    } catch (error) {
      console.error('Error loading cities:', error);
    }
  };

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));

    if (name === 'nationality' && value) {
      loadStates(value);
      setFormData(prev => ({ 
        ...prev, 
        state: '', 
        city: '',
        phone_code: countries.find(country => country.id === value)?.phonecode || '92'
      }));
      setStates([]);
      setCities([]);
    }

    if (name === 'state' && value) {
      loadCities(value);
      setFormData(prev => ({ ...prev, city: '' }));
      setCities([]);
    }
  };

  // Save resume after successful login/registration
  const saveResumeAfterAuth = async (userId) => {
    if (!pendingResumeData) return;

    setIsSaving(true);
    try {
      const res = await fetch('/api/frontend/resume/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...pendingResumeData,
          studentId: userId
        })
      });
      
      const data = await res.json();

      if (res.ok && data.success) {
        Swal.fire({
          title: 'Success!',
          text: 'Resume saved successfully!',
          icon: 'success',
          confirmButtonColor: '#0B6D76',
          timer: 1500,
          showConfirmButton: false
        });

        // Update URL with user ID and switch to edit mode
        router.replace(`/resume-builder?stId=${userId}`);
        setPageMode('edit');
        setPendingResumeData(null);
        setShowAuthModal(false);
      } else {
        Swal.fire({
          title: 'Error',
          text: data.message || 'Failed to save resume.',
          icon: 'error',
          confirmButtonColor: '#0B6D76'
        });
      }
    } catch (error) {
      Swal.fire({
        title: 'Network Error',
        text: 'Failed to save resume. Please try again.',
        icon: 'error',
        confirmButtonColor: '#0B6D76'
      });
    } finally {
      setIsSaving(false);
    }
  };

  // Simple login handler
  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/frontend/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: formData.email,
          password: formData.password
        }),
      });

      const data = await response.json();

      if (response.ok) {
        setUser(data.data);

        // Login successful
        const userId = data.data.id;
        
        Swal.fire({
          title: 'Login Successful!',
          icon: 'success',
          confirmButtonColor: '#0B6D76',
          timer: 1500,
          showConfirmButton: false
        });

        if (pageMode === 'create' && pendingResumeData) {
          // User was saving new resume from create mode
          await saveResumeAfterAuth(userId);
        } else {
          // User was trying to edit existing CV
          router.replace(`/resume-builder?stId=${userId}`);
          setPageMode('edit');
          setShowAuthModal(false);
        }

        resetForms();
        
      } else {
        Swal.fire({
          title: 'Login Failed',
          text: data.message || 'Invalid credentials',
          icon: 'error',
          confirmButtonColor: '#0B6D76'
        });
      }
    } catch (error) {
      Swal.fire({
        title: 'Error',
        text: 'Something went wrong. Please try again.',
        icon: 'error',
        confirmButtonColor: '#0B6D76'
      });
    } finally {
      setLoading(false);
    }
  };

  // Complete registration handler
  const handleRegister = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/frontend/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          first_name: formData.first_name,
          last_name: formData.last_name,
          phone: `+${formData.phone_code}${formData.phone}`,
          email: formData.email,
          password: formData.password,
          confirm_password: formData.password,
          nationality: formData.nationality,
          state: formData.state,
          city: formData.city,
          program_type: formData.program_type,
          gender: formData.gender,
          agree: formData.agree
        }),
      });

      const data = await response.json();

      if (response.ok) {
        // Registration successful - auto login
        const loginResponse = await fetch('/api/frontend/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            email: formData.email,
            password: formData.password
          }),
        });

        const loginData = await loginResponse.json();

        if (loginResponse.ok) {
          setUser(loginData.data);
          const userId = loginData.data.id;
          
          Swal.fire({
            title: 'Registration Successful!',
            text: 'Your account has been created and you are now logged in.',
            icon: 'success',
            confirmButtonColor: '#0B6D76'
          });

          // Save pending resume if exists
          if (pendingResumeData && pageMode === 'create') {
            await saveResumeAfterAuth(userId);
          } else {
            // Just login, go to edit mode
            router.replace(`/resume-builder?stId=${userId}`);
            setPageMode('edit');
          }

          setShowAuthModal(false);
          resetForms();
        }
      } else {
        const errorMessages = data.message || {};
        
        if (typeof errorMessages === 'object') {
          const errorMessagesString = Object.values(errorMessages).join('\n');
          Swal.fire({
            icon: 'error',
            title: 'Registration Failed',
            text: errorMessagesString,
            confirmButtonColor: '#0B6D76'
          });
        } else {
          throw new Error(errorMessages);
        }
      }
    } catch (error) {
      Swal.fire({
        title: 'Error',
        text: error.message || 'Something went wrong. Please try again.',
        icon: 'error',
        confirmButtonColor: '#0B6D76'
      });
    } finally {
      setLoading(false);
    }
  };

  // Function to trigger save with auth required
  const triggerSaveWithAuth = (resumeData) => {
    setPendingResumeData(resumeData);
    setShowAuthModal(true);
    setIsLoginForm(true);
  };

  // Handle create CV button click (from landing page) - NO LOGIN POPUP
  const handleCreateCV = () => {
    // Directly go to CV form without login
    setPageMode('create');
  };

  // Handle edit CV button click - ONLY SHOW LOGIN POPUP
  const handleEditCV = () => {
    // Show login popup for editing - DON'T change pageMode yet
    setShowAuthModal(true);
    setIsLoginForm(true);
  };

  // Handle back to home button click
  const handleBackToHome = () => {
    router.push('/resume-builder');
    setPageMode('landing');
  };

  // Show loading while checking auth
  if (isCheckingAuth && pageMode === 'edit') {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  // Landing page data
  const features = [
    {
      icon: <FaMagic className="text-2xl" />,
      title: "Smart Templates",
      description: "Professionally designed Europass templates that make your resume stand out",
      color: "from-blue-500 to-cyan-400"
    },
    {
      icon: <FaFilePdf className="text-2xl" />,
      title: "One-Click Export",
      description: "Download your resume as PDF with a single click, ready to share",
      color: "from-purple-500 to-pink-400"
    },
    {
      icon: <FaUserCheck className="text-2xl" />,
      title: "Easy Editing",
      description: "Simple form-based editor - no design skills required",
      color: "from-green-500 to-emerald-400"
    },
    {
      icon: <FaShieldAlt className="text-2xl" />,
      title: "Secure & Private",
      description: "Your data is safe with us. We never share your information",
      color: "from-orange-500 to-yellow-400"
    },
    {
      icon: <FaMobileAlt className="text-2xl" />,
      title: "Mobile Friendly",
      description: "Create and edit your resume from any device",
      color: "from-red-500 to-rose-400"
    },
    {
      icon: <FaGlobeEurope className="text-2xl" />,
      title: "Europass Format",
      description: "Standard European format recognized by employers worldwide",
      color: "from-indigo-500 to-blue-400"
    }
  ];

  const steps = [
    {
      number: "01",
      title: "Start Building",
      description: "Click 'Create CV Now' to begin - no login required",
      icon: <FaRocket className="text-xl" />
    },
    {
      number: "02",
      title: "Fill Your Details",
      description: "Complete the easy-to-use form with your information",
      icon: <FaUserCheck className="text-xl" />
    },
    {
      number: "03",
      title: "Preview & Customize",
      description: "See your resume in real-time and make adjustments",
      icon: <FaFileAlt className="text-xl" />
    },
    {
      number: "04",
      title: "Save & Download",
      description: "Save to your account and download as PDF",
      icon: <FaDownload className="text-xl" />
    }
  ];

  const testimonials = [
    {
      name: "Sarah Johnson",
      role: "Recent Graduate",
      content: "Got my first job interview after using this builder! The Europass format is exactly what European employers want.",
      avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face"
    },
    {
      name: "Michael Chen",
      role: "Software Engineer",
      content: "Saved me hours of formatting. The PDF export is perfect and professional.",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
    },
    {
      name: "Elena Rodriguez",
      role: "MBA Student",
      content: "Used it for my applications across Europe. Received compliments on my resume format!",
      avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&h=150&fit=crop&crop=face"
    }
  ];

  // Show CV form ONLY in these cases:
  // 1. User clicked "Create CV Now" (pageMode === 'create')
  // 2. User is logged in and has stId (pageMode === 'edit' && stId)
  if (pageMode === 'create' || (pageMode === 'edit' && stId)) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
        {/* Header with Back Button and Save Button */}
        <div className="bg-white/90 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50 shadow-sm">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <button
                onClick={handleBackToHome}
                className="flex items-center gap-2 text-gray-700 hover:text-blue-600 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-100 transition-all duration-200"
              >
                <FaArrowLeft />
                Back to Home
              </button>
              
              <div className="flex items-center gap-4">
                {pageMode === 'edit' && stId && (
                  <div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-100 px-3 py-1.5 rounded-full">
                    <FaFileAlt className="text-blue-500" />
                    <span>Editing CV #{stId}</span>
                  </div>
                )}
                
                {pageMode === 'create' && (
                  <div className="flex items-center gap-2 text-sm text-gray-600 bg-green-100 px-3 py-1.5 rounded-full">
                    <FaRocket className="text-green-500" />
                    <span>Creating New CV</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* CV Generator - Save button is inside this component */}
        <BuilderCvGenrator 
          studentId={stId} 
          onSaveRequireAuth={triggerSaveWithAuth}
          isSaving={isSaving}
        />

        {/* Auth Modal - Shown only when needed */}
        {showAuthModal && (
          <div className="fixed inset-0 bg-black/70 bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
              <div className="p-6">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h3 className="text-xl font-bold text-gray-800">
                      {isLoginForm ? 'Login Required' : 'Create Account'}
                    </h3>
                    <p className="text-gray-600">
                      {pageMode === 'create' && pendingResumeData 
                        ? 'Please login or create account to save your resume'
                        : 'Please login to access your existing resume'}
                    </p>
                  </div>
                  <button
                    onClick={() => {
                      setShowAuthModal(false);
                      resetForms();
                    }}
                    className="text-gray-400 hover:text-gray-600 text-xl transition-colors"
                  >
                    <FaTimes />
                  </button>
                </div>

                {/* Login Form */}
                {isLoginForm ? (
                  <form onSubmit={handleLogin} className="space-y-6">
                    <div className="space-y-4">
                      <div className="relative">
                        <FaEnvelope className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleInputChange}
                          placeholder="Enter your email"
                          className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                          required
                        />
                      </div>
                      
                      <div className="relative">
                        <FaLock className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
                        <input
                          type={showPassword ? "text" : "password"}
                          name="password"
                          value={formData.password}
                          onChange={handleInputChange}
                          placeholder="Enter your password"
                          className="w-full pl-12 pr-12 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                          required
                        />
                        <button
                          type="button"
                          onClick={() => setShowPassword(!showPassword)}
                          className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
                        >
                          {showPassword ? <FaEyeSlash /> : <FaEye />}
                        </button>
                      </div>
                    </div>

                    <button
                      type="submit"
                      disabled={loading}
                      className="w-full bg-gradient-to-r from-[#0B6F78] to-[#0a306b] text-white py-3 rounded-xl font-semibold hover:shadow-lg hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:hover:shadow-none"
                    >
                      {loading ? (
                        <div className="flex items-center justify-center">
                          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                          Logging in...
                        </div>
                      ) : (
                        pageMode === 'create' ? 'Login & Save Resume' : 'Login to Edit CV'
                      )}
                    </button>

                    <div className="text-center pt-4">
                      <p className="text-gray-600 text-sm">
                        Don't have an account?{' '}
                        <button
                          type="button"
                          onClick={() => setIsLoginForm(false)}
                          className="text-[#0B6F78] font-semibold hover:text-[#0a306b] transition-colors"
                        >
                          Create one here
                        </button>
                      </p>
                    </div>
                  </form>
                ) : (
                  /* Complete Registration Form */
                  <form onSubmit={handleRegister} className="space-y-4">
                    {/* First Name & Last Name */}
                    <div className="grid grid-cols-2 gap-3">
                      <div className="relative">
                        <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                        <input
                          type="text"
                          name="first_name"
                          value={formData.first_name}
                          onChange={handleInputChange}
                          placeholder="First Name"
                          className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                          required
                        />
                      </div>
                      <div className="relative">
                        <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                        <input
                          type="text"
                          name="last_name"
                          value={formData.last_name}
                          onChange={handleInputChange}
                          placeholder="Last Name"
                          className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                          required
                        />
                      </div>
                    </div>

                    {/* Phone Number */}
                    <div className="relative">
                      <FaPhone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <div className="flex">
                        <select
                          name="phone_code"
                          value={formData.phone_code}
                          onChange={handleInputChange}
                          className="w-24 pl-8 pr-2 py-3 text-sm border border-gray-200 rounded-l-xl border-r-0 focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                          required
                        >
                          {countries.map(country => (
                            <option key={country.id} value={country.phonecode}>
                              +{country.phonecode}
                            </option>
                          ))}
                        </select>
                        <input
                          type="tel"
                          name="phone"
                          value={formData.phone}
                          onChange={handleInputChange}
                          placeholder="Phone Number"
                          className="flex-1 pl-3 pr-3 py-3 text-sm border border-gray-200 rounded-r-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                          required
                        />
                      </div>
                    </div>

                    {/* Email */}
                    <div className="relative">
                      <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="Email Address"
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                    </div>

                    {/* Password */}
                    <div className="relative">
                      <FaLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <input
                        type={showPassword ? "text" : "password"}
                        name="password"
                        value={formData.password}
                        onChange={handleInputChange}
                        placeholder="Password"
                        className="w-full pl-10 pr-10 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
                      >
                        {showPassword ? <FaEyeSlash size={14} /> : <FaEye size={14} />}
                      </button>
                    </div>

                    {/* Country */}
                    <div className="relative">
                      <FaGlobe className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <select
                        name="nationality"
                        value={formData.nationality}
                        onChange={handleInputChange}
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                      >
                        <option value="">Select Country</option>
                        {countries.map(country => (
                          <option key={country.id} value={country.id}>
                            {country.name}
                          </option>
                        ))}
                      </select>
                    </div>

                    {/* State & City */}
                    <div className="grid grid-cols-2 gap-3">
                      <div className="relative">
                        <FaMapMarkerAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                        <select
                          name="state"
                          value={formData.state}
                          onChange={handleInputChange}
                          className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                          required
                          disabled={!formData.nationality}
                        >
                          <option value="">Select State</option>
                          {states.map(state => (
                            <option key={state.id} value={state.id}>
                              {state.name}
                            </option>
                          ))}
                        </select>
                      </div>
                      <div className="relative">
                        <FaMapMarkerAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                        <select
                          name="city"
                          value={formData.city}
                          onChange={handleInputChange}
                          className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                          required
                          disabled={!formData.state}
                        >
                          <option value="">Select City</option>
                          {cities.map(city => (
                            <option key={city.id} value={city.id}>
                              {city.name}
                            </option>
                          ))}
                        </select>
                      </div>
                    </div>

                    {/* Gender */}
                    <div className="relative">
                      <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <select
                        name="gender"
                        value={formData.gender}
                        onChange={handleInputChange}
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                      >
                        <option value="">Select Gender</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                      </select>
                    </div>

                    {/* Program Type */}
                    <div className="relative">
                      <FaGraduationCap className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <select
                        name="program_type"
                        value={formData.program_type}
                        onChange={handleInputChange}
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                      >
                        <option value="">Select Program Type</option>
                        <option value="undergraduate">Undergraduate</option>
                        <option value="graduate">Graduate</option>
                        <option value="phd">PhD</option>
                        <option value="certificate">Certificate</option>
                      </select>
                    </div>

                    {/* Terms Agreement */}
                    <div className="flex items-start space-x-2 p-3 bg-blue-50 rounded-xl border border-blue-100">
                      <input
                        type="checkbox"
                        name="agree"
                        checked={formData.agree}
                        onChange={handleInputChange}
                        className="w-4 h-4 text-[#0B6F78] border-gray-300 rounded focus:ring-[#0B6F78] mt-1 flex-shrink-0"
                        required
                      />
                      <label className="text-xs text-gray-700">
                        I agree to the <span className="text-[#0B6F78] font-semibold">terms and conditions</span> and <span className="text-[#0B6F78] font-semibold">privacy policy</span>
                      </label>
                    </div>
                    
                    <div className="flex gap-3 pt-2">
                      <button
                        type="button"
                        onClick={() => setIsLoginForm(true)}
                        className="flex-1 border border-gray-300 text-gray-700 py-2.5 rounded-xl font-medium hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 text-sm"
                      >
                        Back to Login
                      </button>
                      <button
                        type="submit"
                        disabled={loading || !formData.agree}
                        className="flex-1 bg-gradient-to-r from-[#0B6F78] to-[#0a306b] text-white py-2.5 rounded-xl font-medium hover:shadow hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:hover:shadow-none text-sm"
                      >
                        {loading ? (
                          <div className="flex items-center justify-center">
                            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                            Creating...
                          </div>
                        ) : (
                          'Create Account'
                        )}
                      </button>
                    </div>
                  </form>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  // Show landing page in all other cases
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        {/* Background Gradient */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-50/50 to-cyan-50/50"></div>
        
        {/* Animated Background Elements */}
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-gradient-to-r from-blue-200/20 to-cyan-200/20 animate-float"
              style={{
                width: Math.random() * 100 + 50,
                height: Math.random() * 100 + 50,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 10 + 10}s`
              }}
            />
          ))}
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
          <div className="text-center">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-100 to-cyan-100 text-blue-700 px-4 py-2 rounded-full text-sm font-semibold mb-6 animate-pulse">
              <FaFileAlt />
              Free for Students & Professionals
            </div>

            {/* Main Heading */}
            <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
              Create Your{' '}
              <span className="bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
                Professional
              </span>{' '}
              <br />
              Europass Resume
            </h1>

            {/* Subheading */}
            <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed">
              The easiest way to build a stunning Europass format resume. 
              No design skills needed. Free forever for students.
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button
                onClick={handleCreateCV}
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
                className="group relative bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-10 py-5 rounded-2xl text-lg font-semibold shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 hover:scale-105 transition-all duration-300 flex items-center gap-3"
              >
                <div className="relative">
                  <FaRocket className={`transition-transform duration-300 ${isHovered ? 'rotate-45' : ''}`} />
                  <div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full animate-ping"></div>
                </div>
                <span>Create CV Now — It's Free</span>
                <FaArrowRight className="transition-transform duration-300 group-hover:translate-x-2" />
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-300"></div>
              </button>

              <button
                onClick={handleEditCV}
                className="px-8 py-5 border-2 border-gray-300 text-gray-700 rounded-2xl font-semibold hover:border-gray-400 hover:bg-gray-50 transition-all duration-300 flex items-center gap-2"
              >
                <FaEdit />
                <span>Edit Existing CV</span>
              </button>
            </div>

            {/* Stats */}
            <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-3xl mx-auto">
              {[
                { number: "10K+", label: "Resumes Created" },
                { number: "95%", label: "Satisfaction Rate" },
                { number: "5min", label: "Average Build Time" },
                { number: "Free", label: "Forever Free" }
              ].map((stat, index) => (
                <div key={index} className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">{stat.number}</div>
                  <div className="text-gray-600 text-sm">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Everything You Need for the{' '}
              <span className="bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
                Perfect Resume
              </span>
            </h2>
            <p className="text-gray-600 text-lg max-w-3xl mx-auto">
              Our resume builder includes all the tools you need to create a professional 
              Europass CV that gets noticed
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="group relative p-8 bg-gradient-to-br from-gray-50 to-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-2xl hover:scale-105 transition-all duration-300 hover:border-blue-200"
              >
                <div className={`absolute inset-0 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-5 rounded-3xl transition-opacity duration-300`}></div>
                <div className={`inline-flex p-4 rounded-2xl bg-gradient-to-r ${feature.color} text-white mb-6`}>
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-3">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
                <div className="absolute bottom-8 right-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <FaArrowRight className="text-gray-400" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* How It Works Section */}
      <div className="py-20 bg-gradient-to-b from-white to-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Create Your Resume in{' '}
              <span className="bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
                4 Simple Steps
              </span>
            </h2>
            <p className="text-gray-600 text-lg max-w-3xl mx-auto">
              Get from blank page to professional resume in minutes
            </p>
          </div>

          <div className="relative">
            {/* Connection Line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-200 via-cyan-200 to-blue-200 transform -translate-y-1/2"></div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {steps.map((step, index) => (
                <div key={index} className="relative">
                  <div className="relative z-10 bg-white p-8 rounded-3xl border border-gray-100 shadow-lg hover:shadow-2xl transition-all duration-300 group">
                    <div className="absolute -top-4 left-8 w-12 h-12 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-full flex items-center justify-center text-lg font-bold">
                      {step.number}
                    </div>
                    <div className="mt-8 mb-6">
                      <div className="inline-flex p-3 rounded-xl bg-gradient-to-br from-blue-50 to-cyan-50 text-blue-600">
                        {step.icon}
                      </div>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">{step.title}</h3>
                    <p className="text-gray-600">{step.description}</p>
                    <div className="mt-6 pt-6 border-t border-gray-100">
                      <div className="flex items-center text-sm text-blue-600 font-semibold">
                        <span>Learn more</span>
                        <FaArrowRight className="ml-2 transition-transform group-hover:translate-x-1" />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Testimonials */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Loved by{' '}
              <span className="bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
                Students & Professionals
              </span>
            </h2>
            <p className="text-gray-600 text-lg max-w-3xl mx-auto">
              See what others are saying about their resume building experience
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div
                key={index}
                className="bg-gradient-to-br from-gray-50 to-white p-8 rounded-3xl border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300"
              >
                <div className="flex items-center mb-6">
                  <img
                    src={testimonial.avatar}
                    alt={testimonial.name}
                    className="w-12 h-12 rounded-full object-cover border-2 border-white shadow"
                  />
                  <div className="ml-4">
                    <h4 className="font-bold text-gray-900">{testimonial.name}</h4>
                    <p className="text-sm text-gray-600">{testimonial.role}</p>
                  </div>
                </div>
                <p className="text-gray-700 italic mb-6">"{testimonial.content}"</p>
                <div className="flex text-yellow-400">
                  {[...Array(5)].map((_, i) => (
                    <FaCheckCircle key={i} className="w-4 h-4" />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Final CTA */}
      <div className="py-20 bg-gradient-to-r from-blue-600 to-cyan-500">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold text-white mb-6">
            Ready to Build Your Professional Resume?
          </h2>
          <p className="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">
            Join thousands of successful applicants who landed their dream jobs with our Europass resume builder
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button
              onClick={handleCreateCV}
              className="group bg-white text-blue-600 px-12 py-5 rounded-2xl text-lg font-bold shadow-2xl hover:shadow-3xl hover:scale-105 transition-all duration-300 flex items-center gap-3"
            >
              <FaRocket className="animate-bounce" />
              Start Building Free CV
              <FaArrowRight className="transition-transform duration-300 group-hover:translate-x-2" />
            </button>
            
            <button
              onClick={handleEditCV}
              className="px-10 py-5 border-2 border-white/30 text-white rounded-2xl font-semibold hover:bg-white/10 transition-all duration-300 flex items-center gap-2"
            >
              <FaEdit />
              Edit Existing CV
            </button>
          </div>

          {/* Guarantee Badge */}
          <div className="mt-12 inline-flex items-center gap-3 bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full">
            <FaShieldAlt className="text-white" />
            <span className="text-white font-semibold">100% Free • No Credit Card Required</span>
          </div>
        </div>
      </div>

      {/* Auth Modal - Show when Edit CV is clicked */}
      {showAuthModal && (
        <div className="fixed inset-0 bg-black/70 bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-start mb-6">
                <div>
                  <h3 className="text-xl font-bold text-gray-800">
                    {isLoginForm ? 'Login Required' : 'Create Account'}
                  </h3>
                  <p className="text-gray-600">
                    Please login to access your existing resume
                  </p>
                </div>
                <button
                  onClick={() => {
                    setShowAuthModal(false);
                    resetForms();
                  }}
                  className="text-gray-400 hover:text-gray-600 text-xl transition-colors"
                >
                  <FaTimes />
                </button>
              </div>

              {/* Login Form */}
              {isLoginForm ? (
                <form onSubmit={handleLogin} className="space-y-6">
                  <div className="space-y-4">
                    <div className="relative">
                      <FaEnvelope className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="Enter your email"
                        className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                    </div>
                    
                    <div className="relative">
                      <FaLock className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
                      <input
                        type={showPassword ? "text" : "password"}
                        name="password"
                        value={formData.password}
                        onChange={handleInputChange}
                        placeholder="Enter your password"
                        className="w-full pl-12 pr-12 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
                      >
                        {showPassword ? <FaEyeSlash /> : <FaEye />}
                      </button>
                    </div>
                  </div>

                  <button
                    type="submit"
                    disabled={loading}
                    className="w-full bg-gradient-to-r from-[#0B6F78] to-[#0a306b] text-white py-3 rounded-xl font-semibold hover:shadow-lg hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:hover:shadow-none"
                  >
                    {loading ? (
                      <div className="flex items-center justify-center">
                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                        Logging in...
                      </div>
                    ) : (
                      'Login to Edit CV'
                    )}
                  </button>

                  <div className="text-center pt-4">
                    <p className="text-gray-600 text-sm">
                      Don't have an account?{' '}
                      <button
                        type="button"
                        onClick={() => setIsLoginForm(false)}
                        className="text-[#0B6F78] font-semibold hover:text-[#0a306b] transition-colors"
                      >
                        Create one here
                      </button>
                    </p>
                  </div>
                </form>
              ) : (
                /* Complete Registration Form */
                <form onSubmit={handleRegister} className="space-y-4">
                  {/* ... [Registration form remains exactly the same] ... */}
                  {/* First Name & Last Name */}
                  <div className="grid grid-cols-2 gap-3">
                    <div className="relative">
                      <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <input
                        type="text"
                        name="first_name"
                        value={formData.first_name}
                        onChange={handleInputChange}
                        placeholder="First Name"
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                    </div>
                    <div className="relative">
                      <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <input
                        type="text"
                        name="last_name"
                        value={formData.last_name}
                        onChange={handleInputChange}
                        placeholder="Last Name"
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                    </div>
                  </div>

                  {/* Phone Number */}
                  <div className="relative">
                    <FaPhone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <div className="flex">
                      <select
                        name="phone_code"
                        value={formData.phone_code}
                        onChange={handleInputChange}
                        className="w-24 pl-8 pr-2 py-3 text-sm border border-gray-200 rounded-l-xl border-r-0 focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                      >
                        {countries.map(country => (
                          <option key={country.id} value={country.phonecode}>
                            +{country.phonecode}
                          </option>
                        ))}
                      </select>
                      <input
                        type="tel"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        placeholder="Phone Number"
                        className="flex-1 pl-3 pr-3 py-3 text-sm border border-gray-200 rounded-r-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                        required
                      />
                    </div>
                  </div>

                  {/* Email */}
                  <div className="relative">
                    <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      placeholder="Email Address"
                      className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                      required
                    />
                  </div>

                  {/* Password */}
                  <div className="relative">
                    <FaLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <input
                      type={showPassword ? "text" : "password"}
                      name="password"
                      value={formData.password}
                      onChange={handleInputChange}
                      placeholder="Password"
                      className="w-full pl-10 pr-10 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 transition-all duration-200"
                      required
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
                    >
                      {showPassword ? <FaEyeSlash size={14} /> : <FaEye size={14} />}
                    </button>
                  </div>

                  {/* Country */}
                  <div className="relative">
                    <FaGlobe className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <select
                      name="nationality"
                      value={formData.nationality}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                      required
                    >
                      <option value="">Select Country</option>
                      {countries.map(country => (
                        <option key={country.id} value={country.id}>
                          {country.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* State & City */}
                  <div className="grid grid-cols-2 gap-3">
                    <div className="relative">
                      <FaMapMarkerAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <select
                        name="state"
                        value={formData.state}
                        onChange={handleInputChange}
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                        disabled={!formData.nationality}
                      >
                        <option value="">Select State</option>
                        {states.map(state => (
                          <option key={state.id} value={state.id}>
                            {state.name}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div className="relative">
                      <FaMapMarkerAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                      <select
                        name="city"
                        value={formData.city}
                        onChange={handleInputChange}
                        className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                        required
                        disabled={!formData.state}
                      >
                        <option value="">Select City</option>
                        {cities.map(city => (
                          <option key={city.id} value={city.id}>
                            {city.name}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>

                  {/* Gender */}
                  <div className="relative">
                    <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <select
                      name="gender"
                      value={formData.gender}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                      required
                    >
                      <option value="">Select Gender</option>
                      <option value="Male">Male</option>
                      <option value="Female">Female</option>
                      <option value="Other">Other</option>
                    </select>
                  </div>

                  {/* Program Type */}
                  <div className="relative">
                    <FaGraduationCap className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" />
                    <select
                      name="program_type"
                      value={formData.program_type}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-3 py-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0B6F78] focus:border-transparent bg-gray-50/50 appearance-none"
                      required
                    >
                      <option value="">Select Program Type</option>
                      <option value="undergraduate">Undergraduate</option>
                      <option value="graduate">Graduate</option>
                      <option value="phd">PhD</option>
                      <option value="certificate">Certificate</option>
                    </select>
                  </div>

                  {/* Terms Agreement */}
                  <div className="flex items-start space-x-2 p-3 bg-blue-50 rounded-xl border border-blue-100">
                    <input
                      type="checkbox"
                      name="agree"
                      checked={formData.agree}
                      onChange={handleInputChange}
                      className="w-4 h-4 text-[#0B6F78] border-gray-300 rounded focus:ring-[#0B6F78] mt-1 flex-shrink-0"
                      required
                    />
                    <label className="text-xs text-gray-700">
                      I agree to the <span className="text-[#0B6F78] font-semibold">terms and conditions</span> and <span className="text-[#0B6F78] font-semibold">privacy policy</span>
                    </label>
                  </div>
                  
                  <div className="flex gap-3 pt-2">
                    <button
                      type="button"
                      onClick={() => setIsLoginForm(true)}
                      className="flex-1 border border-gray-300 text-gray-700 py-2.5 rounded-xl font-medium hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 text-sm"
                    >
                      Back to Login
                    </button>
                    <button
                      type="submit"
                      disabled={loading || !formData.agree}
                      className="flex-1 bg-gradient-to-r from-[#0B6F78] to-[#0a306b] text-white py-2.5 rounded-xl font-medium hover:shadow hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:hover:shadow-none text-sm"
                    >
                      {loading ? (
                        <div className="flex items-center justify-center">
                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                          Creating...
                        </div>
                      ) : (
                        'Create Account'
                      )}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Add custom animations */}
      <style jsx global>{`
        @keyframes float {
          0%, 100% {
            transform: translateY(0) rotate(0deg);
          }
          50% {
            transform: translateY(-20px) rotate(180deg);
          }
        }
        
        .animate-float {
          animation: float 20s infinite linear;
        }
      `}</style>
    </div>
  );
}

// Main page component
export default function ResumePage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    }>
      <ResumeContent />
    </Suspense>
  );
}