const SelfEfficacyDemo = () => {
  const [mode, setMode] = useState('hard'); // hard, easy
  const [step, setStep] = useState(0);

  const reset = () => {
    setMode('hard');
    setStep(0);
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto h-[400px] flex flex-col">
      <h3 className="text-center font-bold text-card-foreground mb-4">プログラミング学習</h3>

      {step === 0 && (
        <div className="flex justify-center gap-4 mb-auto mt-auto">
          <button 
             onClick={() => {setMode('hard'); setStep(1);}}
             className="px-6 py-3 rounded-lg font-bold bg-red-100 text-red-800 dark:text-red-900 border border-red-200 hover:bg-red-200"
          >
            A. いきなり本番
          </button>
          <button 
             onClick={() => {setMode('easy'); setStep(1);}}
             className="px-6 py-3 rounded-lg font-bold bg-green-100 text-green-800 dark:text-green-900 border border-green-200 hover:bg-green-200"
          >
            B. スモールステップ
          </button>
        </div>
      )}

      {/* HARD MODE */}
      {mode === 'hard' && step === 1 && (
        <div className="text-center mt-auto mb-auto animate-in zoom-in">
           <div className="text-5xl mb-4">😨</div>
           <h4 className="font-bold text-xl mb-4">課題：フルスタックアプリを作れ</h4>
           <div className="bg-black text-green-400 p-4 rounded text-left text-xs font-mono mb-6 overflow-hidden">
             Error: Cannot read property 'map' of undefined<br/>
             at ArticleList (webpack:///src...)<br/>
             at renderWithHooks (react-dom.development.js...)
           </div>
           <p className="text-sm text-muted-foreground mb-6">
             「...意味がわからない。私には才能がないんだ。」
           </p>
           <button 
             onClick={reset}
             className="bg-gray-700 text-white px-6 py-2 rounded-full font-bold hover:bg-gray-800"
           >
             諦める
           </button>
        </div>
      )}

      {/* EASY MODE */}
      {mode === 'easy' && step >= 1 && step <= 3 && (
        <div className="text-center mt-auto mb-auto animate-in slide-in-from-right">
           <div className="w-full bg-muted rounded-full h-2 mb-6">
             <div className="bg-green-600 h-2 rounded-full transition-all duration-500" style={{width: `${step * 33}%`}}></div>
           </div>

           {step === 1 && (
             <>
               <div className="text-4xl mb-4">👶</div>
               <h4 className="font-bold mb-2">Step 1: 文字を出そう</h4>
               <p className="text-sm text-muted-foreground mb-4"><code>print("Hello")</code> と入力してね。</p>
               <button onClick={() => setStep(2)} className="bg-green-600 text-white px-8 py-3 rounded-full font-bold shadow hover:bg-green-700">
                 できた！（簡単！）
               </button>
             </>
           )}
           {step === 2 && (
             <>
               <div className="text-4xl mb-4">👦</div>
               <h4 className="font-bold mb-2">Step 2: 計算しよう</h4>
               <p className="text-sm text-muted-foreground mb-4"><code>1 + 1</code> と入力してね。</p>
               <button onClick={() => setStep(3)} className="bg-green-600 text-white px-8 py-3 rounded-full font-bold shadow hover:bg-green-700">
                 できた！（楽しい！）
               </button>
             </>
           )}
           {step === 3 && (
             <>
               <div className="text-4xl mb-4">👨‍🎓</div>
               <h4 className="font-bold mb-2">Step 3: アプリ完成！</h4>
               <p className="text-sm text-muted-foreground mb-4">これらを組み合わせればアプリになります。</p>
               <button onClick={() => setStep(4)} className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold shadow hover:bg-primary/90">
                 次もやってみる！（自信）
               </button>
             </>
           )}
        </div>
      )}

      {mode === 'easy' && step === 4 && (
         <div className="text-center mt-auto mb-auto animate-in zoom-in">
           <h2 className="text-2xl font-bold text-green-500 mb-4">自己効力感 MAX!</h2>
           <p className="text-muted-foreground text-sm">
             「私にもできる！」という自信がつけば、<br/>
             難しい課題にも挑戦し続けられます。
           </p>
           <button onClick={reset} className="mt-8 text-blue-500 underline">最初に戻る</button>
         </div>
      )}

    </div>
  );
};

render(<SelfEfficacyDemo />);