const ParadoxChoiceDemo = () => {
  const [mode, setMode] = useState(null); // 'few' or 'many'
  const [choice, setChoice] = useState(null);

  const colors = [
    "Red", "Blue", "Green", "Yellow", "Purple", "Pink", "Orange", "Teal", "Cyan", "Lime",
    "Indigo", "Violet", "Fuchsia", "Rose", "Emerald", "Sky", "Amber", "Gray", "Slate", "Zinc"
  ];

  const reset = () => {
    setMode(null);
    setChoice(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 justify-center gap-4">
          <button 
            onClick={() => setMode('few')}
            className="px-6 py-3 bg-primary/20 text-blue-800 dark:text-blue-200 dark:bg-blue-900/50 rounded-lg font-bold hover:bg-blue-200 dark:hover:bg-blue-900"
          >
            3色から選ぶ
          </button>
          <button 
            onClick={() => setMode('many')}
            className="px-6 py-3 bg-red-100 text-red-800 dark:text-red-200 dark:bg-red-900/50 rounded-lg font-bold hover:bg-red-200 dark:hover:bg-red-900"
          >
            20色から選ぶ
          </button>
        </div>
      ) : (
        <div className="animate-in fade-in">
          <p className="text-center text-xs text-muted-foreground mb-4">
            {mode === 'few' ? '直感で選べますね。' : 'どれがベストか、悩みませんか？'}
          </p>
          
          <div className="flex flex-wrap gap-2 justify-center mb-6">
            {(mode === 'few' ? colors.slice(0, 3) : colors).map((c, i) => (
              <button
                key={c}
                onClick={() => setChoice(c)}
                className={`w-10 h-10 rounded-full transition transform hover:scale-110 shadow-sm border-2 ${choice === c ? 'border-black ring-2 ring-offset-2 ring-gray-300' : 'border-transparent'}`}
                style={{ backgroundColor: c.toLowerCase().replace(' ', '') }}
                title={c}
              />
            ))}
          </div>

          {choice && (
            <div className="bg-muted/30 p-4 rounded-lg animate-in slide-in-from-bottom-2">
               <p className="font-bold text-card-foreground text-center mb-2">「{choice}」を選びました。</p>
               
               {mode === 'many' ? (
                 <div className="text-xs text-destructive space-y-2">
                   <p>本当にそれで良かったですか？</p>
                   <p>隣の色の方が綺麗だったかもしれませんよ？</p>
                   <p><strong>（これが選択のパラドックスによる後悔です）</strong></p>
                 </div>
               ) : (
                 <div className="text-xs text-green-500 space-y-2">
                   <p>良い選択ですね！</p>
                   <p>他の選択肢が少ないので、自分の決定に自信が持てます。</p>
                   <p><strong>（満足度が高い状態）</strong></p>
                 </div>
               )}
            </div>
          )}
          
          <button onClick={reset} className="block mx-auto mt-6 text-xs text-muted-foreground underline">実験をリセット</button>
        </div>
      )}
    </div>
  );
};

render(<ParadoxChoiceDemo />);