const SpotlightDemo = () => {
  const [scenario, setScenario] = useState(null);
  
  const scenarios = [
    { 
      id: 1, 
      text: "カフェで飲み物をこぼしてしまった！", 
      userThink: 90, // % of people noticed (User's fear)
      reality: 15,   // % of people noticed (Reality)
    },
    { 
      id: 2, 
      text: "今日、髪型を変えて出社した！", 
      userThink: 80, 
      reality: 10,
    },
    { 
      id: 3, 
      text: "Zoom会議で一瞬変な顔が映った！", 
      userThink: 100, 
      reality: 5,
    },
  ];

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="font-bold text-card-foreground mb-6 text-center">自意識過剰チェック</h3>
      
      {!scenario ? (
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground mb-4 text-center">シチュエーションを選んでください</p>
           {scenarios.map(s => (
             <button
               key={s.id}
               onClick={() => setScenario(s)}
               className="w-full p-4 text-left border rounded-lg hover:bg-muted/30 text-sm font-bold text-foreground transition-colors"
             >
               {s.text}
             </button>
           ))}
         </div>
      ) : (
        <div className="animate-in zoom-in">
          <button onClick={() => setScenario(null)} className="text-xs text-muted-foreground mb-4">← 戻る</button>
          
          <h4 className="font-bold text-lg mb-6">{scenario.text}</h4>
          
          <div className="space-y-6 mb-8">
            {/* User Think */}
            <div>
              <div className="flex justify-between text-xs font-bold mb-1 text-destructive">
                <span>あなたの不安（気づかれたと思う割合）</span>
                <span>{scenario.userThink}%</span>
              </div>
              <div className="w-full bg-muted rounded-full h-4">
                <div className="bg-destructive h-4 rounded-full transition-all duration-1000" style={{ width: `${scenario.userThink}%` }}></div>
              </div>
            </div>

            {/* Reality */}
            <div>
              <div className="flex justify-between text-xs font-bold mb-1 text-blue-500">
                <span>現実（実際に気づいた人）</span>
                <span>{scenario.reality}%</span>
              </div>
              <div className="w-full bg-muted rounded-full h-4 relative">
                <div className="absolute top-0 left-0 h-full w-full bg-[url('https://www.transparenttextures.com/patterns/diagmonds-light.png')] opacity-20"></div>
                <div className="bg-primary/100 h-4 rounded-full transition-all duration-1000 delay-500" style={{ width: `${scenario.reality}%` }}></div>
              </div>
            </div>
          </div>

          <div className="bg-muted/30 p-4 rounded-lg text-sm text-foreground">
            <p className="mb-2 font-bold">💡 解説</p>
            <p>
              この圧倒的なギャップが<strong>「スポットライト効果」</strong>です。
              <br/>
              他人はあなたが思うほど、あなたの失敗や変化を見ていません。
              ユーザーが過剰に恥ずかしがって行動を止めないよう、
              「誰も気にしていませんよ（または、非公開ですよ）」と伝えてあげましょう。
            </p>
          </div>
        </div>
      )}
    </div>
  );
};

render(<SpotlightDemo />);