ccdw-website/src/components/StepProgress.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Check } from 'lucide-react';

interface StepProgressProps {
    currentStep: 1 | 2 | 3;
    theme?: 'light' | 'dark';
}

const StepProgress: React.FC<StepProgressProps> = ({ currentStep, theme = 'dark' }) => {
    const { t } = useTranslation();
    const navigate = useNavigate();

    const steps = [
        { id: 1, path: '/step1', label: t('nav.consulting', 'AI Consulting') },
        { id: 2, path: '/step2', label: t('nav.tourism', 'Tourism Ops') },
        { id: 3, path: '/step3', label: t('nav.dev', 'Infrastructure') },
    ];

    const isDark = theme === 'dark';
    const textColor = isDark ? 'text-stone-400' : 'text-stone-500';
    const activeColor = isDark ? 'text-white' : 'text-black';
    const accentColor = currentStep === 1 ? 'text-blue-500' : currentStep === 2 ? 'text-orange-500' : 'text-cyan-400';
    const borderColor = isDark ? 'border-stone-800' : 'border-stone-200';

    return (
        <div className={`w-full py-4 mb-8 border-b ${borderColor} transition-colors duration-300`}>
            <div className="max-w-4xl mx-auto px-4">
                <div className="relative flex items-center justify-between">
                    {/* Progress Bar Background */}
                    <div className={`absolute left-0 top-1/2 -translate-y-1/2 w-full h-0.5 ${isDark ? 'bg-stone-800' : 'bg-stone-200'} -z-10`}></div>

                    {/* Active Progress Line */}
                    <div
                        className={`absolute left-0 top-1/2 -translate-y-1/2 h-0.5 transition-all duration-500 ease-out -z-10 bg-gradient-to-r from-blue-500 via-orange-500 to-cyan-500`}
                        style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
                    ></div>

                    {steps.map((step) => {
                        const isCompleted = currentStep > step.id;
                        const isCurrent = currentStep === step.id;

                        return (
                            <div
                                key={step.id}
                                onClick={() => navigate(step.path)}
                                className="flex flex-col items-center cursor-pointer group"
                            >
                                <div
                                    className={`
                                        w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all duration-300 bg-white dark:bg-stone-900
                                        ${isCompleted || isCurrent ? 'scale-110' : 'scale-100'}
                                        ${isCurrent ? `${accentColor} border-current` : ''}
                                        ${isCompleted ? 'border-stone-400 text-stone-400 hover:border-stone-500' : ''}
                                        ${!isCurrent && !isCompleted ? `border-stone-200 dark:border-stone-700 text-stone-300` : ''}
                                    `}
                                >
                                    {isCompleted ? (
                                        <Check className="w-4 h-4" />
                                    ) : (
                                        <span className="text-xs font-bold font-mono">{step.id}</span>
                                    )}
                                </div>
                                <span
                                    className={`
                                        mt-3 text-xs font-bold tracking-wider uppercase transition-colors
                                        ${isCurrent ? activeColor : textColor}
                                        group-hover:${activeColor}
                                    `}
                                >
                                    {step.label}
                                </span>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default StepProgress;