gridpilot.gg/apps/website/components/auth/AuthWorkflowMockup.tsx

'use client';

import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
import { useEffect, useState } from 'react';
import { 
  UserPlus, 
  Link as LinkIcon, 
  Settings,
  Trophy,
  Car,
  CheckCircle2,
  LucideIcon
} from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface WorkflowStep {
  id: number;
  icon: LucideIcon;
  title: string;
  description: string;
  color: string;
}

const WORKFLOW_STEPS: WorkflowStep[] = [
  {
    id: 1,
    icon: UserPlus,
    title: 'Create Account',
    description: 'Sign up with email or connect iRacing',
    color: 'text-primary-blue',
  },
  {
    id: 2,
    icon: LinkIcon,
    title: 'Link iRacing',
    description: 'Connect your iRacing profile for stats',
    color: 'text-purple-400',
  },
  {
    id: 3,
    icon: Settings,
    title: 'Configure Profile',
    description: 'Set up your racing preferences',
    color: 'text-warning-amber',
  },
  {
    id: 4,
    icon: Trophy,
    title: 'Join Leagues',
    description: 'Find and join competitive leagues',
    color: 'text-performance-green',
  },
  {
    id: 5,
    icon: Car,
    title: 'Start Racing',
    description: 'Compete and track your progress',
    color: 'text-primary-blue',
  },
];

export function AuthWorkflowMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);
  const [activeStep, setActiveStep] = useState(0);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (!isMounted) return;
    
    const interval = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [isMounted]);

  if (!isMounted) {
    return (
      <Box position="relative" fullWidth>
        <Surface variant="muted" rounded="2xl" border padding={6}>
          <Stack direction="row" justify="between" gap={2}>
            {WORKFLOW_STEPS.map((step) => (
              <Stack key={step.id} align="center" center>
                <Box width={10} height={10} rounded="lg" backgroundColor="iron-gray" border borderColor="charcoal-outline" display="flex" center mb={2}>
                  <Icon icon={step.icon} size={4} className={step.color} />
                </Box>
                <Text size="xs" weight="medium" color="text-white">{step.title}</Text>
              </Stack>
            ))}
          </Stack>
        </Surface>
      </Box>
    );
  }

  return (
    <Box position="relative" fullWidth>
      <Surface variant="muted" rounded="2xl" border padding={6} className="overflow-hidden">
        {/* Connection Lines */}
        <Box position="absolute" top="3.5rem" left="8%" right="8%" className="hidden sm:block">
          <Box height={0.5} backgroundColor="charcoal-outline" position="relative">
            <motion.div
              className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
              initial={{ width: '0%' }}
              animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
              transition={{ duration: 0.5, ease: 'easeInOut' }}
            />
          </Box>
        </Box>

        {/* Steps */}
        <Stack direction="row" justify="between" gap={2} position="relative">
          {WORKFLOW_STEPS.map((step, index) => {
            const isActive = index === activeStep;
            const isCompleted = index < activeStep;
            const StepIcon = step.icon;

            return (
              <motion.div
                key={step.id}
                className="flex flex-col items-center text-center cursor-pointer flex-1"
                onClick={() => setActiveStep(index)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <motion.div
                  className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg border flex items-center justify-center mb-2 transition-all duration-300 ${
                    isActive 
                      ? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]' 
                      : isCompleted
                        ? 'bg-performance-green/20 border-performance-green/50'
                        : 'bg-iron-gray border-charcoal-outline'
                  }`}
                  animate={isActive && !shouldReduceMotion ? {
                    scale: [1, 1.08, 1],
                    transition: { duration: 1, repeat: Infinity }
                  } : {}}
                >
                  {isCompleted ? (
                    <Icon icon={CheckCircle2} size={5} color="text-performance-green" />
                  ) : (
                    <Icon icon={StepIcon} size={5} className={isActive ? step.color : 'text-gray-500'} />
                  )}
                </motion.div>
                <Text size="xs" weight="medium" className={`transition-colors hidden sm:block ${
                  isActive ? 'text-white' : 'text-gray-400'
                }`}>
                  {step.title}
                </Text>
              </motion.div>
            );
          })}
        </Stack>

        {/* Active Step Preview - Mobile */}
        <AnimatePresence mode="wait">
          <motion.div
            key={activeStep}
            initial={{ opacity: 0, y: 5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -5 }}
            transition={{ duration: 0.2 }}
            className="mt-4 pt-4 border-t border-charcoal-outline sm:hidden"
          >
            <Box textAlign="center">
              <Text size="xs" color="text-gray-400" block mb={1}>
                Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep]?.title || ''}
              </Text>
              <Text size="xs" color="text-gray-500" block>
                {WORKFLOW_STEPS[activeStep]?.description || ''}
              </Text>
            </Box>
          </motion.div>
        </AnimatePresence>
      </Surface>
    </Box>
  );
}