const ReactanceDemo = () => {
  const [clicked, setClicked] = useState(false);
  const [mode, setMode] = useState(null); // 'force' or 'free'

  const reset = () => {
    setClicked(false);
    setMode(null);
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="text-center font-bold text-card-foreground mb-6">行動の自由実験</h3>

      {!mode ? (
        <div className="flex gap-4 justify-center">
           <button onClick={() => setMode('force')} className="bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 px-4 py-2 rounded-lg font-bold hover:bg-red-200 dark:hover:bg-red-900">
             禁止モード
           </button>
           <button onClick={() => setMode('free')} className="bg-primary/20 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-lg font-bold hover:bg-blue-200 dark:hover:bg-blue-900">
             自由モード
           </button>
        </div>
      ) : (
        <div className="animate-in fade-in text-center">
           {mode === 'force' ? (
             <div className="mb-6">
               <div className="text-6xl mb-4">⛔️</div>
               <p className="font-bold text-destructive text-xl mb-2">警告：ボタンを押さないでください</p>
               <p className="text-sm text-muted-foreground">
                 このボタンを押すことは固く禁じられています。<br/>
                 絶対に、絶対に押さないでください。
               </p>
             </div>
           ) : (
             <div className="mb-6">
                <div className="text-6xl mb-4">🕊️</div>
                <p className="font-bold text-primary text-xl mb-2">ご自由にどうぞ</p>
                <p className="text-sm text-muted-foreground">
                  このボタンを押しても押さなくても構いません。<br/>
                  あなたの自由です。
                </p>
             </div>
           )}

           {!clicked ? (
             <button
               onClick={() => setClicked(true)}
               className={`px-8 py-4 rounded-full font-bold text-white shadow-lg transition transform active:scale-95 ${mode === 'force' ? 'bg-destructive hover:bg-red-700 hover:scale-105 animate-pulse' : 'bg-primary/100 hover:bg-primary'}`}
             >
               {mode === 'force' ? '押すな！' : 'ボタン'}
             </button>
           ) : (
             <div className="p-4 bg-muted rounded-lg animate-in zoom-in">
               <p className="font-bold text-lg mb-2">
                 {mode === 'force' ? '...押しちゃいましたね？' : 'クリックしました。'}
               </p>
               <p className="text-sm text-muted-foreground">
                 {mode === 'force' 
                   ? '「ダメ」と言われると、自由を回復したくて逆らいたくなる。これが心理的リアクタンスです。' 
                   : '自由な状態でのクリックは、単なる意思決定です。反発心はありませんでしたよね？'}
               </p>
             </div>
           )}
           
           <button onClick={reset} className="block mx-auto mt-8 text-xs text-muted-foreground underline">戻る</button>
        </div>
      )}
    </div>
  );
};

render(<ReactanceDemo />);