const STEPS = ['The Basics', 'AI Marketing Genius', 'Pricing & Marketplaces', 'Review & Save'];

export default function StepProgress({ current }) {
  return (
    <div className="w-full">
      <div className="flex items-center justify-between mb-2">
        {STEPS.map((label, i) => {
          const step = i + 1;
          const done = step < current;
          const active = step === current;
          return (
            <div key={label} className="flex-1 flex flex-col items-center">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all
                ${done ? 'text-white' : active ? 'text-white' : 'bg-gray-200 text-gray-500'}`}
                style={done || active ? { background: '#f97316' } : {}}>
                {done ? '✓' : step}
              </div>
              <span className={`text-xs mt-1 text-center hidden sm:block font-medium
                ${active ? 'text-orange-600' : done ? 'text-gray-600' : 'text-gray-400'}`}>
                {label}
              </span>
            </div>
          );
        })}
      </div>
      {/* connector bar */}
      <div className="relative h-1 bg-gray-200 rounded-full mx-4 -mt-6 sm:mt-0">
        <div
          className="absolute h-1 rounded-full transition-all duration-500"
          style={{ background: '#f97316', width: `${((current - 1) / (STEPS.length - 1)) * 100}%` }}
        />
      </div>
    </div>
  );
}