'use client';

import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
import { SponsorHero } from '@/components/sponsors/SponsorHero';
import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
import { SponsorSignupCommandModel } from '@/lib/command-models/sponsors/SponsorSignupCommandModel';
import { siteConfig } from '@/lib/siteConfig';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { motion, useReducedMotion } from 'framer-motion';
import {
  ArrowRight,
  BarChart3,
  Building2,
  Car,
  CheckCircle2,
  Eye,
  Flag,
  Globe,
  Mail,
  Megaphone,
  Shield,
  Target,
  TrendingUp,
  Trophy,
  Upload,
  Users
} from 'lucide-react';
import { useState } from '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 shouldReduceMotion = useReducedMotion();
  const [mode, setMode] = useState<'landing' | 'signup' | 'login'>('landing');
  const [form, setForm] = useState(() => new SponsorSignupCommandModel());
  const [formData, setFormData] = useState({
    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 handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const validationErrors = form.validate();
    const newErrors: Record<string, string> = { ...validationErrors };
    
    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 {
      const command = form.toCommand();
      // Note: Business logic for auth should be moved to a mutation
      // This is a temporary implementation for contract compliance
      const response = await fetch('/api/auth/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: command.contactEmail,
          password: formData.password,
          displayName: command.companyName,
          sponsorData: {
            companyName: command.companyName,
            websiteUrl: command.websiteUrl,
            interests: formData.interests,
          },
        }),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || 'Signup failed');
      }

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

      if (!loginResponse.ok) {
        throw new Error('Auto-login failed');
      }

      // Navigate to dashboard
      window.location.href = '/sponsor/dashboard';
    } catch (err) {
      console.error('Sponsor signup failed:', err);
      alert('Registration failed. ' + (err instanceof Error ? err.message : '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 (
      <Box minHeight="screen" bg="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."
        >
          <Stack direction={{ base: 'col', md: '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>
          </Stack>
        </SponsorHero>

        {/* Platform Stats */}
        <Box maxWidth="6xl" mx="auto" px={4} style={{ marginTop: '-2rem' }} position="relative" zIndex={10}>
          <Box display="grid" gridCols={{ base: 2, md: 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">
                  <Text size={{ base: '2xl', sm: '3xl' }} weight="bold" color="text-white" block mb={1}>{stat.value}</Text>
                  <Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-400">{stat.label}</Text>
                </Card>
              </motion.div>
            ))}
          </Box>
        </Box>

        {/* Sponsorship Types Section */}
        <Box as="section" maxWidth="6xl" mx="auto" px={4} py={{ base: 16, md: 24 }}>
          <Box textAlign="center" mb={12}>
            <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
              Sponsorship Opportunities
            </Heading>
            <Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
              Choose how you want to connect with the sim racing community.
              Multiple sponsorship tiers and types to fit every budget and goal.
            </Text>
          </Box>

          <Box display="grid" gridCols={{ base: 1, md: 2, lg: 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">
                  <Stack direction="row" align="start" gap={4} mb={4}>
                    <Box w="12" h="12" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="center" group hoverBorderColor="primary-blue/50" transition>
                      <type.icon className={`w-6 h-6 ${type.color}`} />
                    </Box>
                    <Box>
                      <Heading level={3} fontSize="lg" weight="semibold" color="text-white">{type.title}</Heading>
                      <Text size="sm" color="text-primary-blue" weight="medium" block>{type.priceRange}</Text>
                    </Box>
                  </Stack>
                  
                  <Text size="sm" color="text-gray-400" block mb={4}>{type.description}</Text>
                  
                  <Box as="ul" className="space-y-2">
                    {type.benefits.map((benefit, i) => (
                      <Box as="li" key={i} display="flex" alignItems="center" gap={2}>
                        <CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0" />
                        <Text size="sm" color="text-gray-300">{benefit}</Text>
                      </Box>
                    ))}
                  </Box>
                </Card>
              </motion.div>
            ))}
          </Box>
        </Box>

        {/* Workflow Mockup Section */}
        <Box as="section" bg="bg-iron-gray/30" py={{ base: 16, md: 24 }}>
          <Box maxWidth="6xl" mx="auto" px={4}>
            <Box textAlign="center" mb={12}>
              <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
                How It Works
              </Heading>
              <Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
                From discovery to results tracking — a seamless sponsorship experience.
              </Text>
            </Box>
            
            <SponsorWorkflowMockup />
          </Box>
        </Box>

        {/* Benefits Grid */}
        <Box as="section" maxWidth="6xl" mx="auto" px={4} py={{ base: 16, md: 24 }}>
          <Box textAlign="center" mb={12}>
            <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
              Why Sponsor on GridPilot?
            </Heading>
            <Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
              Professional tools and genuine community engagement make your sponsorship worthwhile.
            </Text>
          </Box>

          <Box display="grid" gridCols={{ base: 1, md: 2, lg: 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}
            />
          </Box>
        </Box>

        {/* CTA Section */}
        <Box as="section" maxWidth="4xl" mx="auto" px={4} py={{ base: 16, md: 24 }} textAlign="center">
          <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
            Ready to Grow Your Brand?
          </Heading>
          <Text color="text-gray-400" maxWidth="2xl" mx="auto" block mb={8}>
            Join sponsors connecting with sim racing communities worldwide.
          </Text>
          <Stack direction={{ base: 'col', md: '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>
          </Stack>
        </Box>
      </Box>
    );
  }

  // Login form
  if (mode === 'login') {
    return (
      <Box minHeight="screen" bg="bg-deep-graphite" display="flex" alignItems="center" justifyContent="center" px={4} py={12}>
        <Box fullWidth maxWidth="md">
          <Box mb={8}>
            <button
              onClick={() => setMode('landing')}
              className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2 bg-transparent border-0 cursor-pointer"
            >
              <ArrowRight className="w-4 h-4 rotate-180" />
              Back to overview
            </button>
            <Stack direction="row" align="center" gap={4} mb={2}>
              <Box display="flex" h="14" w="14" alignItems="center" justifyContent="center" rounded="2xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
                <Building2 className="w-7 h-7 text-primary-blue" />
              </Box>
              <Box>
                <Heading level={1} fontSize="2xl" weight="bold" color="text-white">Sponsor Sign In</Heading>
                <Text size="sm" color="text-gray-400">Access your sponsor dashboard</Text>
              </Box>
            </Stack>
          </Box>

          <Card className="p-6">
            <Box as="form" onSubmit={handleSubmit} className="space-y-5">
              <Box>
                <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                  <Stack direction="row" align="center" gap={2}>
                    <Mail className="w-4 h-4 text-gray-500" />
                    Email Address
                  </Stack>
                </Text>
                <Input
                  type="email"
                  value={form.contactEmail}
                  onChange={(e) => {
                    form.contactEmail = e.target.value;
                    setForm(new SponsorSignupCommandModel(form.toCommand()));
                  }}
                  placeholder="sponsor@company.com"
                  variant={errors.contactEmail ? 'error' : 'default'}
                  errorMessage={errors.contactEmail}
                />
              </Box>

              <Box>
                <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                  Password
                </Text>
                <Input
                  type="password"
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                  placeholder="••••••••"
                  variant={errors.password ? 'error' : 'default'}
                  errorMessage={errors.password}
                />
              </Box>

              <Stack direction="row" align="center" justify="between">
                <Text as="label" display="flex" alignItems="center" gap={2} color="text-gray-400">
                  <input type="checkbox" className="rounded border-charcoal-outline bg-iron-gray" />
                  Remember me
                </Text>
                <button type="button" className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer">
                  Forgot password?
                </button>
              </Stack>

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

            <Box mt={6} pt={6} borderTop borderColor="border-charcoal-outline">
              <Text size="sm" color="text-gray-400" align="center" block mb={4}>
                Don't have an account?{' '}
                <button
                  onClick={() => setMode('signup')}
                  className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer"
                >
                  Create one
                </button>
              </Text>
            </Box>
          </Card>
        </Box>
      </Box>
    );
  }

  // Signup form
  return (
    <Box minHeight="screen" bg="bg-deep-graphite" py={12} px={4}>
      <Box maxWidth="2xl" mx="auto">
        {/* Header */}
        <Box mb={8}>
          <button
            onClick={() => setMode('landing')}
            className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2 bg-transparent border-0 cursor-pointer"
          >
            <ArrowRight className="w-4 h-4 rotate-180" />
            Back to overview
          </button>
          <Stack direction="row" align="center" gap={4} mb={2}>
            <Box display="flex" h="14" w="14" alignItems="center" justifyContent="center" rounded="2xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
              <Building2 className="w-7 h-7 text-primary-blue" />
            </Box>
            <Box>
              <Heading level={1} fontSize="2xl" weight="bold" color="text-white">Create Sponsor Account</Heading>
              <Text size="sm" color="text-gray-400">Register your company to sponsor racing entities</Text>
            </Box>
          </Stack>
        </Box>

        <Card className="p-6">
          <Box as="form" onSubmit={handleSubmit} className="space-y-6">
            {/* Company Information */}
            <Box>
              <Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Building2 className="w-5 h-5 text-primary-blue" />}>
                Company Information
              </Heading>
              
              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
                <Box colSpan={{ base: 1, md: 2 }}>
                  <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                    Company Name *
                  </Text>
                  <Input
                    type="text"
                    value={form.companyName}
                    onChange={(e) => {
                      form.companyName = e.target.value;
                      setForm(new SponsorSignupCommandModel(form.toCommand()));
                    }}
                    placeholder="Your company name"
                    variant={errors.companyName ? 'error' : 'default'}
                    errorMessage={errors.companyName}
                  />
                </Box>

                <Box>
                  <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                    <Stack direction="row" align="center" gap={2}>
                      <Mail className="w-4 h-4 text-gray-500" />
                      Contact Email *
                    </Stack>
                  </Text>
                  <Input
                    type="email"
                    value={form.contactEmail}
                    onChange={(e) => {
                      form.contactEmail = e.target.value;
                      setForm(new SponsorSignupCommandModel(form.toCommand()));
                    }}
                    placeholder="sponsor@company.com"
                    variant={errors.contactEmail ? 'error' : 'default'}
                    errorMessage={errors.contactEmail}
                  />
                </Box>

                <Box>
                  <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                    <Stack direction="row" align="center" gap={2}>
                      <Globe className="w-4 h-4 text-gray-500" />
                      Website URL
                    </Stack>
                  </Text>
                  <Input
                    type="url"
                    value={form.websiteUrl}
                    onChange={(e) => {
                      form.websiteUrl = e.target.value;
                      setForm(new SponsorSignupCommandModel(form.toCommand()));
                    }}
                    placeholder="https://company.com"
                    variant={errors.websiteUrl ? 'error' : 'default'}
                    errorMessage={errors.websiteUrl}
                  />
                </Box>
              </Box>
            </Box>

            {/* Sponsorship Interests */}
            <Box>
              <Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Target className="w-5 h-5 text-purple-400" />}>
                Sponsorship Interests
              </Heading>
              <Text size="sm" color="text-gray-400" block mb={4}>
                Select the types of sponsorships you're interested in (optional)
              </Text>
              
              <Box display="grid" gridCols={{ base: 2, sm: 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`} />
                      <Text size="sm" weight="medium" color={isSelected ? 'text-white' : 'text-gray-400'} block>
                        {type.title.replace(' Sponsorship', '').replace(' Advertising', '')}
                      </Text>
                    </button>
                  );
                })}
              </Box>
            </Box>

            {/* Company Logo */}
            <Box>
              <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                <Stack direction="row" align="center" gap={2}>
                  <Upload className="w-4 h-4 text-gray-500" />
                  Company Logo (optional)
                </Stack>
              </Text>
              <Stack direction="row" align="center" gap={4}>
                <Box w="16" h="16" rounded="lg" bg="bg-iron-gray" border borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                  <Building2 className="w-6 h-6 text-gray-500" />
                </Box>
                <Box flexGrow={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"
                  />
                  <Text size="xs" color="text-gray-500" block mt={1}>
                    PNG, JPEG, or SVG. Recommended: 500x500px transparent background.
                  </Text>
                </Box>
              </Stack>
            </Box>

            {/* Account Security */}
            <Box>
              <Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Shield className="w-5 h-5 text-performance-green" />}>
                Account Security
              </Heading>
              
              <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
                <Box>
                  <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                    Password *
                  </Text>
                  <Input
                    type="password"
                    value={formData.password}
                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                    placeholder="Min. 8 characters"
                    variant={errors.password ? 'error' : 'default'}
                    errorMessage={errors.password}
                  />
                </Box>

                <Box>
                  <Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
                    Confirm Password *
                  </Text>
                  <Input
                    type="password"
                    value={formData.confirmPassword}
                    onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                    placeholder="Confirm password"
                    variant={errors.confirmPassword ? 'error' : 'default'}
                    errorMessage={errors.confirmPassword}
                  />
                </Box>
              </Box>
            </Box>

            {/* Legal Agreements */}
            <Stack gap={3} pt={4} borderTop borderColor="border-charcoal-outline">
              <Text as="label" display="flex" alignItems="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"
                />
                <Text size="sm" color="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>
                  {' '}*
                </Text>
              </Text>
              {errors.acceptTerms && (
                <Text size="sm" color="text-warning-amber">{errors.acceptTerms}</Text>
              )}

              <Text as="label" display="flex" alignItems="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"
                />
                <Text size="sm" color="text-gray-400">
                  {siteConfig.vat.notice} A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorships. *
                </Text>
              </Text>
              {errors.acceptVat && (
                <Text size="sm" color="text-warning-amber">{errors.acceptVat}</Text>
              )}
            </Stack>

            {/* Actions */}
            <Stack direction="row" 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>
            </Stack>
          </Box>

          <Box mt={6} pt={6} borderTop="1px solid" borderColor="border-charcoal-outline" textAlign="center">
            <Text size="sm" color="text-gray-400">
              Already have an account?{' '}
              <button
                onClick={() => setMode('login')}
                className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer"
              >
                Sign in
              </button>
            </Text>
          </Box>
        </Card>
      </Box>
    </Box>
  );
}