const PresentBiasDemo = () => {
  const [securityLevel, setSecurityLevel] = useState(20);
  const [isHacked, setIsHacked] = useState(false);
  const [day, setDay] = useState(1);

  const nextDay = (action) => {
    if (day > 5) return;

    if (action === 'skip') {
      // 先延ばし: リスク上昇
      setDay(d => d + 1);
      
      // 確率でハッキングイベント発生
      if (Math.random() < 0.3) {
        setIsHacked(true);
      }
    } else if (action === 'setup') {
      // 対策実行: 安全確保
      setSecurityLevel(100);
    }
  };

  if (isHacked) {
    return (
      <div className="p-8 bg-red-900 text-white rounded-xl shadow-lg border-4 border-red-600 text-center animate-in shake">
        <div className="text-6xl mb-4">💀</div>
        <h3 className="text-2xl font-bold mb-2">HACKED!</h3>
        <p className="mb-6">
          「あとでやる」と言い続けている間に、<br/>アカウントが乗っ取られました。
        </p>
        <button onClick={() => window.location.reload()} className="bg-card text-red-900 dark:text-red-200 px-4 py-2 rounded font-bold">リセット</button>
      </div>
    );
  }

  if (securityLevel === 100) {
    return (
      <div className="p-8 bg-green-50 dark:bg-green-900/30 rounded-xl shadow-lg border border-green-200 dark:border-green-800 text-center animate-in zoom-in">
        <div className="text-6xl mb-4">🛡️</div>
        <h3 className="text-xl font-bold text-green-800 dark:text-green-200 mb-2">Security Completed</h3>
        <p className="text-green-700 dark:text-green-300">
          面倒な設定を完了しましたね！<br/>
          これで将来の脅威から守られます。
        </p>
        <div className="mt-4 text-xs text-muted-foreground">（現在バイアスに打ち勝ちました）</div>
      </div>
    );
  }

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <div className="flex justify-between items-center mb-6">
        <span className="font-bold text-muted-foreground">Day {day}</span>
        <div className="bg-muted rounded-full h-2 w-24 overflow-hidden">
           <div className="bg-destructive h-full" style={{ width: `${securityLevel}%` }}></div>
        </div>
      </div>

      <div className="text-center mb-8">
        <div className="text-4xl mb-4">🔒</div>
        <h3 className="font-bold text-card-foreground">2段階認証を設定しますか？</h3>
        <p className="text-sm text-muted-foreground mt-2">
          設定には約3分かかりますが、<br/>セキュリティが劇的に向上します。
        </p>
      </div>

      <div className="space-y-3">
        <button 
          onClick={() => nextDay('setup')}
          className="w-full bg-primary text-primary-foreground font-bold py-3 rounded-lg shadow hover:bg-primary/90 transition"
        >
          今すぐ設定する (面倒...)
        </button>
        <button 
          onClick={() => nextDay('skip')}
          className="w-full bg-muted text-muted-foreground font-bold py-3 rounded-lg hover:bg-muted transition"
        >
          あとでやる (今は楽したい)
        </button>
      </div>
      
      <p className="mt-4 text-center text-xs text-red-400">
        ※「あとでやる」を選ぶと、30%の確率でハッキングされます。
      </p>
    </div>
  );
};

render(<PresentBiasDemo />);