import { useWizardStore } from './store/wizardStore';
import CategorySelection from './pages/Steps/CategorySelection';
import OperationSelection from './pages/Steps/OperationSelection';
import AttributeForm from './pages/Steps/AttributeForm';

function App() {
  const step = useWizardStore((state) => state.step);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="font-bold text-xl tracking-tight text-brand-600">
            SIG-CM <span className="text-slate-400 font-normal text-sm ml-2">Wizard de Publicación</span>
          </div>
          <div className="text-sm font-medium text-slate-500">
            Paso {step} de 5
          </div>
        </div>
        {/* Progress Bar */}
        <div className="h-1 bg-slate-100 w-full">
          <div
            className="h-full bg-brand-500 transition-all duration-500 ease-out"
            style={{ width: `${(step / 5) * 100}%` }}
          />
        </div>
      </header>

      <main className="max-w-3xl mx-auto p-4 py-8">
        {step === 1 && <CategorySelection />}
        {step === 2 && <OperationSelection />}
        {step === 3 && <AttributeForm />}
        {step === 4 && <div className="text-center py-20">Paso 4: Fotos (Coming Soon)</div>}
        {step === 5 && <div className="text-center py-20">Paso 5: Resumen y Pago (Coming Soon)</div>}
      </main>
    </div>
  );
}

export default App;