// demo.jsx — home-screen demo entry: fills the viewport, no fake phone frame
// Reuses all existing flow + dashboard components from the main app.

const STEPS = [
  { id: 'splash',      label: 'Splash' },
  { id: 'social',      label: 'Social login' },
  { id: 'welcome',     label: 'Welcome boot' },
  { id: 'phone',       label: 'Phone' },
  { id: 'otp',         label: 'OTP' },
  { id: 'profile',     label: 'Profile' },
  { id: 'address',     label: 'Address' },
  { id: 'biometric',   label: 'Face ID' },
  { id: 'welcomeback', label: 'Welcome back' },
  { id: 'offerings',   label: 'Offerings' },
  { id: 'ready',       label: 'Ready' },
  { id: 'dashboard',   label: 'Dashboard' },
];

function DemoApp() {
  // Start at the splash so the demo plays out the full first-run:
  // splash → social (fake Apple ID / Google) → boot loader → onboarding → dashboard.
  const [step, setStep] = React.useState(0);
  const [formState, setFormState] = React.useState({
    phone: '', firstName: '', lastName: '', dob: '', address: '',
  });
  const [transKey, setTransKey] = React.useState(0);

  const go = (delta) => {
    setStep(s => Math.max(0, Math.min(STEPS.length - 1, s + delta)));
    setTransKey(k => k + 1);
  };
  const next = () => go(1);
  const back = () => go(-1);
  const restart = () => {
    setStep(0); // back to splash — full first-run replay
    setTransKey(k => k + 1);
    setFormState({ phone: '', firstName: '', lastName: '', dob: '', address: '' });
  };

  const current = STEPS[step].id;

  const renderScreen = () => {
    switch (current) {
      case 'splash':      return <SplashScreen onContinue={next} />;
      case 'social':      return <SocialScreen onContinue={next} />;
      case 'welcome':     return <WelcomeBootScreen onContinue={next} variant="boot" />;
      case 'phone':       return <PhoneScreen onBack={back} onContinue={next} state={formState} setState={setFormState} />;
      case 'otp':         return <OtpScreen onBack={back} onContinue={next} state={formState} setState={setFormState} />;
      case 'profile':     return <ProfileScreen onBack={back} onContinue={next} state={formState} setState={setFormState} />;
      case 'address':     return <AddressScreen onBack={back} onContinue={next} state={formState} setState={setFormState} />;
      case 'biometric':   return <BiometricScreen onContinue={next} state={formState} />;
      case 'welcomeback': return <WelcomeBackScreen onContinue={next} state={formState} />;
      case 'offerings':   return <OfferingsScreen onFinish={next} />;
      case 'ready':       return <ReadyScreen state={formState} onRestart={restart} onOpen={next} />;
      case 'dashboard':   return <DashShell onExit={restart} />;
      default: return null;
    }
  };

  return (
    <div key={transKey} style={{
      width: '100%', height: '100%',
      animation: 'screenIn 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
    }}>
      {renderScreen()}
      <style>{`
        @keyframes screenIn {
          0% { opacity: 0; transform: translateX(10px); }
          100% { opacity: 1; transform: translateX(0); }
        }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<DemoApp />);