const SunkCostDemo = () => {
  const [spent, setSpent] = useState(0);
  const [step, setStep] = useState('intro'); // intro, choice, result

  const REPAIR_COST = 30000;
  const NEW_PC_COST = 80000;
  
  const scenarios = {
    low: { label: '投資ゼロ', amount: 0, text: 'PCが壊れました。これまで修理費はかかっていません。' },
    high: { label: '投資大', amount: 50000, text: 'PCが壊れました。あなたは先月、このPCの修理に既に5万円を使っています。' }
  };

  const [scenario, setScenario] = useState(scenarios.low);

  const selectScenario = (key) => {
    setScenario(scenarios[key]);
    setSpent(scenarios[key].amount);
    setStep('choice');
  };

  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">PC修理の意思決定</h3>

      {step === 'intro' && (
        <div className="space-y-4">
          <p className="text-sm text-center text-muted-foreground mb-4">シチュエーションを選んでください</p>
          <button onClick={() => selectScenario('low')} className="w-full p-4 bg-muted hover:bg-muted text-left">
            <div className="font-bold text-card-foreground">A. 今まで修理したことない</div>
            <div className="text-xs text-muted-foreground">過去のコスト: 0円</div>
          </button>
          <button onClick={() => selectScenario('high')} className="w-full p-4 bg-orange-50 dark:bg-orange-900/30 rounded-lg hover:bg-orange-100 dark:hover:bg-orange-900/50 text-left border border-orange-200 dark:border-orange-800">
            <div className="font-bold text-orange-800 dark:text-orange-200">B. 最近5万円で修理したばかり</div>
            <div className="text-xs text-orange-600 dark:text-orange-300">過去のコスト: 50,000円（サンクコスト）</div>
          </button>
        </div>
      )}

      {step === 'choice' && (
        <div className="animate-in fade-in">
          <div className="mb-6 p-4 bg-muted/30 rounded border">
            <p className="font-bold mb-2">現状:</p>
            <p className="text-sm">{scenario.text}</p>
            <p className="text-sm mt-2 text-destructive font-bold">
              また壊れてしまいました。<br/>
              直すには追加で {REPAIR_COST.toLocaleString()}円 かかります。
            </p>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <button 
              onClick={() => setStep('result_repair')}
              className="p-4 bg-primary text-primary-foreground rounded-lg font-bold hover:bg-primary/90 shadow"
            >
              修理する<br/>
              <span className="text-xs font-normal">(-{REPAIR_COST.toLocaleString()}円)</span>
            </button>
            <button 
              onClick={() => setStep('result_new')}
              className="p-4 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 shadow"
            >
              新品を買う<br/>
              <span className="text-xs font-normal">(-{NEW_PC_COST.toLocaleString()}円)</span>
            </button>
          </div>
          <button onClick={() => setStep('intro')} className="block mx-auto mt-6 text-xs text-muted-foreground">戻る</button>
        </div>
      )}

      {(step === 'result_repair' || step === 'result_new') && (
        <div className="animate-in zoom-in bg-yellow-50 dark:bg-yellow-900/30 p-6 rounded-lg">
          <h4 className="font-bold text-center mb-4 text-card-foreground">結果分析</h4>
          {spent > 0 && step === 'result_repair' ? (
            <p className="text-sm text-yellow-900 dark:text-yellow-200">
              「せっかく5万円もかけたんだから...」と修理を選びましたね？<br/>
              でもこれで総額8万円の出費です。新品が買えました。<br/>
              <strong>これがサンクコスト効果（コンコルド効果）です。</strong>
            </p>
          ) : (
             <p className="text-sm text-yellow-900 dark:text-yellow-200">
               合理的な判断です。<br/>
               過去にいくら使っていようと、今のPCの価値と、これからの出費（新品の性能）だけを比較すべきです。
             </p>
          )}
          <button onClick={() => setStep('intro')} className="block mx-auto mt-6 text-blue-500 underline text-sm">シミュレーション終了</button>
        </div>
      )}
    </div>
  );
};

render(<SunkCostDemo />);