const DecisionFatigueDemo = () => {
  const [mode, setMode] = useState(null); // 'many' or 'few'
  const [selected, setSelected] = useState(null);

  const fewOptions = [
    { id: 1, name: "Premium Plan", color: "bg-primary/100" },
    { id: 2, name: "Standard Plan", color: "bg-green-600" },
    { id: 3, name: "Basic Plan", color: "bg-gray-500" },
  ];
  
  const manyOptions = Array.from({ length: 12 }, (_, i) => ({
    id: i + 1,
    name: `Plan Type ${String.fromCharCode(65 + i)}`,
    color: `bg-${['red','blue','green','yellow','purple','pink'][i % 6]}-${(i % 3 + 4) * 100}`,
  }));

  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('many')} className="px-6 py-3 bg-muted hover:bg-muted rounded-lg font-bold text-foreground">
             12個の選択肢
           </button>
           <button onClick={() => setMode('few')} className="px-6 py-3 bg-primary/20 hover:bg-blue-200 rounded-lg font-bold text-blue-700">
             3個の選択肢
           </button>
        </div>
      ) : (
        <div className="animate-in fade-in">
          <div className="mb-4 text-center text-sm text-muted-foreground">
             {mode === 'many' ? "うわっ...多すぎる..." : "これならすぐに決められそう！"}
          </div>

          <div className={`grid gap-3 ${mode === 'many' ? 'grid-cols-3' : 'grid-cols-1'}`}>
            {(mode === 'many' ? manyOptions : fewOptions).map(opt => (
              <button
                key={opt.id}
                onClick={() => setSelected(opt.id)}
                className={`p-3 rounded border text-sm transition-all text-white font-bold shadow-sm hover:scale-105 active:scale-95 ${mode === 'many' ? 'h-20 bg-secondary' : 'h-16 ' + opt.color} ${selected === opt.id ? 'ring-4 ring-offset-2 ring-black' : ''}`}
                style={mode === 'many' ? { backgroundColor: `hsl(${opt.id * 30}, 60%, 50%)`} : {}}
              >
                {opt.name}
              </button>
            ))}
          </div>

          <div className="mt-6 flex justify-between items-center">
             <button onClick={() => {setMode(null); setSelected(null);}} className="text-xs text-muted-foreground underline">戻る</button>
             <button 
               className="bg-black text-white px-6 py-2 rounded font-bold disabled:opacity-50"
               disabled={!selected}
             >
               決定
             </button>
          </div>
        </div>
      )}
      
      {mode === 'many' && !selected && (
        <p className="mt-4 text-xs text-destructive text-center animate-pulse">
          迷っていませんか？ これが「決定回避の法則」です。
        </p>
      )}
    </div>
  );
};

render(<DecisionFatigueDemo />);