'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, useReducedMotion } from 'framer-motion';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import SponsorHero from '@/components/sponsors/SponsorHero';
import SponsorWorkflowMockup from '@/components/sponsors/SponsorWorkflowMockup';
import SponsorBenefitCard from '@/components/sponsors/SponsorBenefitCard';
import { siteConfig } from '@/lib/siteConfig';
import { 
  Building2, 
  Mail, 
  Globe, 
  Upload, 
  Eye, 
  TrendingUp, 
  Users, 
  ArrowRight,
  Trophy,
  Car,
  Flag,
  Target,
  BarChart3,
  Shield,
  CheckCircle2,
  Star,
  Megaphone
} from 'lucide-react';

// Sponsorship type definitions
interface SponsorshipType {
  id: string;
  title: string;
  icon: typeof Trophy;
  description: string;
  benefits: string[];
  priceRange: string;
  color: string;
}

const SPONSORSHIP_TYPES: SponsorshipType[] = [
  {
    id: 'leagues',
    title: 'League Sponsorship',
    icon: Trophy,
    description: 'Sponsor entire racing leagues and get your brand in front of all participants and viewers.',
    benefits: [
      'Logo on all participant liveries',
      'League page banner placement',
      'Results page branding',
      'Social media mentions'
    ],
    priceRange: '$200 - $2,000/season',
    color: 'text-primary-blue',
  },
  {
    id: 'teams',
    title: 'Team Sponsorship',
    icon: Users,
    description: 'Partner with competitive racing teams to build long-term brand associations.',
    benefits: [
      'Team livery logo placement',
      'Team profile visibility',
      'Driver association',
      'Event representation'
    ],
    priceRange: '$100 - $800/season',
    color: 'text-purple-400',
  },
  {
    id: 'drivers',
    title: 'Driver Sponsorship',
    icon: Car,
    description: 'Support individual drivers and grow with rising sim racing talent.',
    benefits: [
      'Personal livery branding',
      'Driver profile sponsor badge',
      'Race results association',
      'Direct driver partnership'
    ],
    priceRange: '$50 - $300/season',
    color: 'text-performance-green',
  },
  {
    id: 'races',
    title: 'Race Sponsorship',
    icon: Flag,
    description: 'Sponsor individual race events for targeted, high-impact exposure.',
    benefits: [
      'Race title naming rights',
      'Event page branding',
      'Results page placement',
      'Social media features'
    ],
    priceRange: '$50 - $500/race',
    color: 'text-warning-amber',
  },
  {
    id: 'platform',
    title: 'Platform Advertising',
    icon: Megaphone,
    description: 'Reach the entire GridPilot audience with strategic platform placements.',
    benefits: [
      'Homepage banner ads',
      'Sidebar placements',
      'Newsletter inclusion',
      'Cross-platform exposure'
    ],
    priceRange: '$100 - $1,000/month',
    color: 'text-racing-red',
  },
];

// Stats for social proof
const PLATFORM_STATS = [
  { value: '50,000+', label: 'Monthly Race Views' },
  { value: '12,000+', label: 'Active Drivers' },
  { value: '500+', label: 'Racing Leagues' },
  { value: '4.8%', label: 'Avg. Engagement Rate' },
];

export default function SponsorSignupPage() {
  const router = useRouter();
  const shouldReduceMotion = useReducedMotion();
  const [mode, setMode] = useState<'landing' | 'signup' | 'login'>('landing');
  const [formData, setFormData] = useState({
    companyName: '',
    contactEmail: '',
    websiteUrl: '',
    logoFile: null as File | null,
    password: '',
    confirmPassword: '',
    interests: [] as string[],
    acceptTerms: false,
    acceptVat: false,
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitting, setSubmitting] = useState(false);

  const handleDemoLogin = async () => {
    setSubmitting(true);
    try {
      // Use the demo login API instead of setting cookies
      const response = await fetch('/api/auth/demo-login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ role: 'sponsor' }),
      });

      if (!response.ok) {
        throw new Error('Demo login failed');
      }

      router.push('/sponsor/dashboard');
    } catch (error) {
      console.error('Demo login failed:', error);
      alert('Demo login failed. Please check the API server status.');
    } finally {
      setSubmitting(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const newErrors: Record<string, string> = {};
    
    if (!formData.companyName.trim()) {
      newErrors.companyName = 'Company name required';
    }
    
    if (!formData.contactEmail.trim()) {
      newErrors.contactEmail = 'Contact email required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) {
      newErrors.contactEmail = 'Invalid email format';
    }

    if (mode === 'signup') {
      if (!formData.password.trim()) {
        newErrors.password = 'Password required';
      } else if (formData.password.length < 8) {
        newErrors.password = 'Password must be at least 8 characters';
      }
      
      if (formData.password !== formData.confirmPassword) {
        newErrors.confirmPassword = 'Passwords do not match';
      }

      if (!formData.acceptTerms) {
        newErrors.acceptTerms = 'You must accept the terms and conditions';
      }

      if (!formData.acceptVat) {
        newErrors.acceptVat = 'You must acknowledge the VAT policy';
      }
    }
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    
    setSubmitting(true);
    
    try {
      // For demo purposes, use the demo login API with sponsor role
      // In production, this would create a real sponsor account
      const response = await fetch('/api/auth/demo-login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ role: 'sponsor' }),
      });

      if (!response.ok) {
        throw new Error('Signup failed');
      }

      router.push('/sponsor/dashboard');
    } catch (err) {
      console.error('Sponsor signup failed:', err);
      alert('Registration failed. Try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const toggleInterest = (id: string) => {
    setFormData(prev => ({
      ...prev,
      interests: prev.interests.includes(id)
        ? prev.interests.filter(i => i !== id)
        : [...prev.interests, id]
    }));
  };

  // Landing page for sponsors
  if (mode === 'landing') {
    return (
      <div className="min-h-screen bg-deep-graphite">
        {/* Hero Section */}
        <SponsorHero
          title="Connect Your Brand with Sim Racing"
          subtitle="Reach passionate racing communities through league, team, driver, and race sponsorships. Real exposure, measurable results."
        >
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              variant="primary"
              onClick={() => setMode('signup')}
              className="px-8 py-3"
            >
              <Building2 className="w-5 h-5 mr-2" />
              Create Sponsor Account
            </Button>
            <Button
              variant="secondary"
              onClick={() => setMode('login')}
              className="px-8 py-3"
            >
              Sign In
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
          </div>

          {/* Demo Login */}
          <div className="mt-6">
            <button
              onClick={handleDemoLogin}
              disabled={submitting}
              className="text-sm text-gray-500 hover:text-gray-400 transition-colors disabled:opacity-50"
            >
              {submitting ? 'Loading...' : 'Try demo sponsor account →'}
            </button>
          </div>
        </SponsorHero>

        {/* Platform Stats */}
        <div className="max-w-6xl mx-auto px-4 -mt-8 relative z-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {PLATFORM_STATS.map((stat, index) => (
              <motion.div
                key={stat.label}
                initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="text-center p-4 bg-iron-gray/80 backdrop-blur-sm">
                  <div className="text-2xl sm:text-3xl font-bold text-white mb-1">{stat.value}</div>
                  <div className="text-xs sm:text-sm text-gray-400">{stat.label}</div>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>

        {/* Sponsorship Types Section */}
        <section className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Sponsorship Opportunities
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              Choose how you want to connect with the sim racing community. 
              Multiple sponsorship tiers and types to fit every budget and goal.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SPONSORSHIP_TYPES.map((type, index) => (
              <motion.div
                key={type.id}
                initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:border-primary-blue/50 transition-all duration-300 group">
                  <div className="flex items-start gap-4 mb-4">
                    <div className={`w-12 h-12 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center group-hover:border-primary-blue/50 transition-colors`}>
                      <type.icon className={`w-6 h-6 ${type.color}`} />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-white">{type.title}</h3>
                      <p className="text-sm text-primary-blue font-medium">{type.priceRange}</p>
                    </div>
                  </div>
                  
                  <p className="text-sm text-gray-400 mb-4">{type.description}</p>
                  
                  <ul className="space-y-2">
                    {type.benefits.map((benefit, i) => (
                      <li key={i} className="flex items-center gap-2 text-sm text-gray-300">
                        <CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0" />
                        {benefit}
                      </li>
                    ))}
                  </ul>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

        {/* Workflow Mockup Section */}
        <section className="bg-iron-gray/30 py-16 sm:py-24">
          <div className="max-w-6xl mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
                How It Works
              </h2>
              <p className="text-gray-400 max-w-2xl mx-auto">
                From discovery to results tracking — a seamless sponsorship experience.
              </p>
            </div>
            
            <SponsorWorkflowMockup />
          </div>
        </section>

        {/* Benefits Grid */}
        <section className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Why Sponsor on GridPilot?
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              Professional tools and genuine community engagement make your sponsorship worthwhile.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <SponsorBenefitCard
              icon={Eye}
              title="Real Visibility"
              description="Your logo appears on in-game liveries, league pages, and race results. Genuine exposure to engaged audiences."
              variant="highlight"
              delay={0}
            />
            <SponsorBenefitCard
              icon={BarChart3}
              title="Detailed Analytics"
              description="Track impressions, engagement rates, and ROI with comprehensive sponsorship analytics."
              delay={0.1}
            />
            <SponsorBenefitCard
              icon={Target}
              title="Targeted Reach"
              description="Choose specific leagues, teams, or drivers that align with your brand and target audience."
              delay={0.2}
            />
            <SponsorBenefitCard
              icon={Shield}
              title="Trusted Platform"
              description="Secure payments, automated invoicing, and professional support for your sponsorship needs."
              delay={0.3}
            />
            <SponsorBenefitCard
              icon={Users}
              title="Engaged Community"
              description="Sim racing audiences are tech-savvy, passionate, and value authentic brand partnerships."
              delay={0.4}
            />
            <SponsorBenefitCard
              icon={TrendingUp}
              title="Growth Potential"
              description="Scale your sponsorships as you see results. Start small or go big from day one."
              delay={0.5}
            />
          </div>
        </section>

        {/* CTA Section */}
        <section className="max-w-4xl mx-auto px-4 py-16 sm:py-24 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
            Ready to Grow Your Brand?
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto mb-8">
            Join sponsors connecting with sim racing communities worldwide.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              variant="primary"
              onClick={() => setMode('signup')}
              className="px-8 py-3"
            >
              <Building2 className="w-5 h-5 mr-2" />
              Get Started Now
            </Button>
            <Button
              variant="secondary"
              as="a"
              href={`mailto:${siteConfig.sponsorEmail}`}
              className="px-8 py-3"
            >
              <Mail className="w-5 h-5 mr-2" />
              Contact Sales
            </Button>
          </div>
        </section>
      </div>
    );
  }

  // Login form
  if (mode === 'login') {
    return (
      <div className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
        <div className="w-full max-w-md">
          <div className="mb-8">
            <button
              onClick={() => setMode('landing')}
              className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2"
            >
              <ArrowRight className="w-4 h-4 rotate-180" />
              Back to overview
            </button>
            <div className="flex items-center gap-4 mb-2">
              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20">
                <Building2 className="w-7 h-7 text-primary-blue" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-white">Sponsor Sign In</h1>
                <p className="text-sm text-gray-400">Access your sponsor dashboard</p>
              </div>
            </div>
          </div>

          <Card className="p-6">
            <form onSubmit={handleSubmit} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  <div className="flex items-center gap-2">
                    <Mail className="w-4 h-4 text-gray-500" />
                    Email Address
                  </div>
                </label>
                <Input
                  type="email"
                  value={formData.contactEmail}
                  onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
                  placeholder="sponsor@company.com"
                  error={!!errors.contactEmail}
                  errorMessage={errors.contactEmail}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  Password
                </label>
                <Input
                  type="password"
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                  placeholder="••••••••"
                  error={!!errors.password}
                  errorMessage={errors.password}
                />
              </div>

              <div className="flex items-center justify-between text-sm">
                <label className="flex items-center gap-2 text-gray-400">
                  <input type="checkbox" className="rounded border-charcoal-outline bg-iron-gray" />
                  Remember me
                </label>
                <button type="button" className="text-primary-blue hover:underline">
                  Forgot password?
                </button>
              </div>

              <Button
                type="submit"
                variant="primary"
                disabled={submitting}
                className="w-full"
              >
                {submitting ? 'Signing in...' : 'Sign In'}
              </Button>
            </form>

            <div className="mt-6 pt-6 border-t border-charcoal-outline">
              <p className="text-sm text-gray-400 text-center mb-4">
                Don't have an account?{' '}
                <button
                  onClick={() => setMode('signup')}
                  className="text-primary-blue hover:underline"
                >
                  Create one
                </button>
              </p>
              <button
                onClick={handleDemoLogin}
                disabled={submitting}
                className="w-full text-sm text-gray-500 hover:text-gray-400 text-center"
              >
                Or try the demo account
              </button>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  // Signup form
  return (
    <div className="min-h-screen bg-deep-graphite py-12 px-4">
      <div className="max-w-2xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <button
            onClick={() => setMode('landing')}
            className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2"
          >
            <ArrowRight className="w-4 h-4 rotate-180" />
            Back to overview
          </button>
          <div className="flex items-center gap-4 mb-2">
            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20">
              <Building2 className="w-7 h-7 text-primary-blue" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">Create Sponsor Account</h1>
              <p className="text-sm text-gray-400">Register your company to sponsor racing entities</p>
            </div>
          </div>
        </div>

        <Card className="p-6">
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Company Information */}
            <div>
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Building2 className="w-5 h-5 text-primary-blue" />
                Company Information
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Company Name *
                  </label>
                  <Input
                    type="text"
                    value={formData.companyName}
                    onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                    placeholder="Your company name"
                    error={!!errors.companyName}
                    errorMessage={errors.companyName}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <div className="flex items-center gap-2">
                      <Mail className="w-4 h-4 text-gray-500" />
                      Contact Email *
                    </div>
                  </label>
                  <Input
                    type="email"
                    value={formData.contactEmail}
                    onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
                    placeholder="sponsor@company.com"
                    error={!!errors.contactEmail}
                    errorMessage={errors.contactEmail}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <div className="flex items-center gap-2">
                      <Globe className="w-4 h-4 text-gray-500" />
                      Website URL
                    </div>
                  </label>
                  <Input
                    type="url"
                    value={formData.websiteUrl}
                    onChange={(e) => setFormData({ ...formData, websiteUrl: e.target.value })}
                    placeholder="https://company.com"
                  />
                </div>
              </div>
            </div>

            {/* Sponsorship Interests */}
            <div>
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Target className="w-5 h-5 text-purple-400" />
                Sponsorship Interests
              </h3>
              <p className="text-sm text-gray-400 mb-4">
                Select the types of sponsorships you're interested in (optional)
              </p>
              
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {SPONSORSHIP_TYPES.map((type) => {
                  const isSelected = formData.interests.includes(type.id);
                  return (
                    <button
                      key={type.id}
                      type="button"
                      onClick={() => toggleInterest(type.id)}
                      className={`
                        p-3 rounded-lg border text-left transition-all
                        ${isSelected 
                          ? 'bg-primary-blue/10 border-primary-blue/50' 
                          : 'bg-iron-gray/50 border-charcoal-outline hover:border-charcoal-outline/80'
                        }
                      `}
                    >
                      <type.icon className={`w-5 h-5 ${isSelected ? type.color : 'text-gray-500'} mb-2`} />
                      <p className={`text-sm font-medium ${isSelected ? 'text-white' : 'text-gray-400'}`}>
                        {type.title.replace(' Sponsorship', '').replace(' Advertising', '')}
                      </p>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Company Logo */}
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                <div className="flex items-center gap-2">
                  <Upload className="w-4 h-4 text-gray-500" />
                  Company Logo (optional)
                </div>
              </label>
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center flex-shrink-0">
                  <Building2 className="w-6 h-6 text-gray-500" />
                </div>
                <div className="flex-1">
                  <input
                    type="file"
                    accept="image/png,image/jpeg,image/svg+xml"
                    onChange={(e) => {
                      const file = e.target.files?.[0] || null;
                      setFormData({ ...formData, logoFile: file });
                    }}
                    className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    PNG, JPEG, or SVG. Recommended: 500x500px transparent background.
                  </p>
                </div>
              </div>
            </div>

            {/* Account Security */}
            <div>
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Shield className="w-5 h-5 text-performance-green" />
                Account Security
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Password *
                  </label>
                  <Input
                    type="password"
                    value={formData.password}
                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                    placeholder="Min. 8 characters"
                    error={!!errors.password}
                    errorMessage={errors.password}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Confirm Password *
                  </label>
                  <Input
                    type="password"
                    value={formData.confirmPassword}
                    onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                    placeholder="Confirm password"
                    error={!!errors.confirmPassword}
                    errorMessage={errors.confirmPassword}
                  />
                </div>
              </div>
            </div>

            {/* Legal Agreements */}
            <div className="space-y-3 pt-4 border-t border-charcoal-outline">
              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData.acceptTerms}
                  onChange={(e) => setFormData({ ...formData, acceptTerms: e.target.checked })}
                  className="mt-1 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue"
                />
                <span className="text-sm text-gray-400">
                  I accept the{' '}
                  <a href="/legal/terms" className="text-primary-blue hover:underline">Terms of Service</a>
                  {' '}and{' '}
                  <a href="/legal/privacy" className="text-primary-blue hover:underline">Privacy Policy</a>
                  {' '}*
                </span>
              </label>
              {errors.acceptTerms && (
                <p className="text-sm text-warning-amber">{errors.acceptTerms}</p>
              )}

              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData.acceptVat}
                  onChange={(e) => setFormData({ ...formData, acceptVat: e.target.checked })}
                  className="mt-1 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue"
                />
                <span className="text-sm text-gray-400">
                  {siteConfig.vat.notice} A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorships. *
                </span>
              </label>
              {errors.acceptVat && (
                <p className="text-sm text-warning-amber">{errors.acceptVat}</p>
              )}
            </div>

            {/* Actions */}
            <div className="flex gap-3 pt-4">
              <Button
                type="submit"
                variant="primary"
                disabled={submitting}
                className="flex-1"
              >
                {submitting ? 'Creating Account...' : 'Create Sponsor Account'}
              </Button>
              <Button
                type="button"
                variant="secondary"
                onClick={() => setMode('landing')}
                disabled={submitting}
              >
                Cancel
              </Button>
            </div>
          </form>

          <div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
            <p className="text-sm text-gray-400">
              Already have an account?{' '}
              <button
                onClick={() => setMode('login')}
                className="text-primary-blue hover:underline"
              >
                Sign in
              </button>
            </p>
          </div>
        </Card>
      </div>
    </div>
  );
}