gridpilot.gg/apps/website/components/sponsors/SponsorWorkflowMockup.tsx

'use client';

import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
import { useEffect, useState } from 'react';
import { 
  Search, 
  MousePointer, 
  CreditCard, 
  CheckCircle2, 
  Car,
  Eye,
  TrendingUp,
  Building2
} from 'lucide-react';

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

const WORKFLOW_STEPS: WorkflowStep[] = [
  {
    id: 1,
    icon: Search,
    title: 'Browse Leagues',
    description: 'Find leagues that match your target audience',
    color: 'text-primary-blue',
  },
  {
    id: 2,
    icon: MousePointer,
    title: 'Select Tier',
    description: 'Choose main or secondary sponsorship slot',
    color: 'text-purple-400',
  },
  {
    id: 3,
    icon: CreditCard,
    title: 'Complete Payment',
    description: 'Secure payment with automatic invoicing',
    color: 'text-warning-amber',
  },
  {
    id: 4,
    icon: Car,
    title: 'Logo Placement',
    description: 'Your brand on liveries and league pages',
    color: 'text-performance-green',
  },
  {
    id: 5,
    icon: TrendingUp,
    title: 'Track Results',
    description: 'Monitor impressions and engagement',
    color: 'text-primary-blue',
  },
];

export default function SponsorWorkflowMockup() {
  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 (
      <div className="relative w-full max-w-4xl mx-auto">
        <div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-8">
          <div className="grid grid-cols-5 gap-4">
            {WORKFLOW_STEPS.map((step) => (
              <div key={step.id} className="flex flex-col items-center text-center">
                <div className="w-14 h-14 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-3">
                  <step.icon className={`w-6 h-6 ${step.color}`} />
                </div>
                <h4 className="text-sm font-medium text-white mb-1">{step.title}</h4>
                <p className="text-xs text-gray-500">{step.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative w-full max-w-4xl mx-auto">
      <div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6 sm:p-8 overflow-hidden">
        {/* Connection Lines */}
        <div className="absolute top-[4.5rem] left-[10%] right-[10%] hidden sm:block">
          <div className="h-0.5 bg-charcoal-outline 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' }}
            />
          </div>
        </div>

        {/* Steps */}
        <div className="grid grid-cols-2 sm:grid-cols-5 gap-4 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"
                onClick={() => setActiveStep(index)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <motion.div
                  className={`w-14 h-14 rounded-xl border flex items-center justify-center mb-3 transition-all duration-300 ${
                    isActive 
                      ? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_20px_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.1, 1],
                    transition: { duration: 1, repeat: Infinity }
                  } : {}}
                >
                  {isCompleted ? (
                    <CheckCircle2 className="w-6 h-6 text-performance-green" />
                  ) : (
                    <StepIcon className={`w-6 h-6 ${isActive ? step.color : 'text-gray-500'}`} />
                  )}
                </motion.div>
                <h4 className={`text-sm font-medium mb-1 transition-colors ${
                  isActive ? 'text-white' : 'text-gray-400'
                }`}>
                  {step.title}
                </h4>
                <p className={`text-xs transition-colors ${
                  isActive ? 'text-gray-300' : 'text-gray-600'
                }`}>
                  {step.description}
                </p>
              </motion.div>
            );
          })}
        </div>

        {/* Active Step Preview */}
        <AnimatePresence mode="wait">
          <motion.div
            key={activeStep}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.3 }}
            className="mt-8 pt-6 border-t border-charcoal-outline"
          >
            <div className="flex items-center justify-center gap-3">
              <div className={`w-8 h-8 rounded-lg bg-iron-gray flex items-center justify-center`}>
                {(() => {
                  const Icon = WORKFLOW_STEPS[activeStep].icon;
                  return <Icon className={`w-4 h-4 ${WORKFLOW_STEPS[activeStep].color}`} />;
                })()}
              </div>
              <div className="text-left">
                <p className="text-sm text-gray-400">
                  Step {activeStep + 1} of {WORKFLOW_STEPS.length}
                </p>
                <p className="text-white font-medium">
                  {WORKFLOW_STEPS[activeStep].title}
                </p>
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}