const HindsightBiasDemo = () => {
  const [revealed, setRevealed] = useState(false);

  // 実際にはランダムに見えるが、答えを知ると規則性が見える数列
  // 例: 31, 28, 31, 30... (月の日数)
  const context = "ある規則に基づいた数字の並びです。";
  const sequence = [31, 28, 31, 30, 31, 30, "?"];
  const answer = "31 (7月の日数)";
  const explanation = "これはカレンダーの「各月の日数」でした。(1月, 2月, 3月...)";

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-6">次に来る数字は？</h3>
      
      <p className="text-muted-foreground mb-4 text-sm">{context}</p>
      
      <div className="flex gap-2 justify-center mb-8">
        {sequence.map((n, i) => (
          <div key={i} className={`w-10 h-12 flex items-center justify-center rounded border-2 font-mono text-lg font-bold ${n === '?' ? 'bg-indigo-100 border-indigo-300 text-indigo-600' : 'bg-muted/30 border-border'}`}>
            {n}
          </div>
        ))}
      </div>

      {!revealed ? (
        <button
          onClick={() => setRevealed(true)}
          className="bg-indigo-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-indigo-700 shadow-lg"
        >
          答えを見る
        </button>
      ) : (
        <div className="animate-in slide-in-from-bottom-4 fade-in">
          <div className="text-3xl font-bold text-indigo-600 mb-2">{answer}</div>
          <p className="text-card-foreground font-bold mb-4">{explanation}</p>
          
          <div className="bg-yellow-50 p-4 rounded text-left text-sm text-yellow-900 leading-relaxed">
            <p className="font-bold mb-1">💡 あなたの心の中で…</p>
            <p className="mb-2">
              「ああ！なんだ、カレンダーか！ <strong>簡単じゃん！</strong>」と思いませんでしたか？
            </p>
            <p>
              答えを聞く前はあれほど分からなかったのに、聞いた瞬間「明白なこと」に思えてしまう。これが<strong>後知恵バイアス</strong>です。
            </p>
          </div>
          
          <button
            onClick={() => setRevealed(false)}
            className="text-muted-foreground text-xs mt-4 underline"
          >
            隠す
          </button>
        </div>
      )}
    </div>
  );
};

render(<HindsightBiasDemo />);