const GorillaDemo = () => {
  const [step, setStep] = useState('intro'); // intro, task, result
  const [score, setScore] = useState(0);
  const [gorillaVisible, setGorillaVisible] = useState(false);
  const [noticed, setNoticed] = useState(false);

  // Simple counting task
  useEffect(() => {
    if (step === 'task') {
      const interval = setInterval(() => {
        setScore(s => s + 1);
      }, 800);

      // Gorilla appears at 3s
      const timer1 = setTimeout(() => {
        setGorillaVisible(true);
      }, 3000);
      
      // Gorilla leaves at 6s
      const timer2 = setTimeout(() => {
        setGorillaVisible(false);
      }, 6000);

      const finishTimer = setTimeout(() => {
        setStep('result');
      }, 7000);

      return () => { clearInterval(interval); clearTimeout(timer1); clearTimeout(timer2); clearTimeout(finishTimer); };
    }
  }, [step]);

  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>

      {step === 'intro' && (
        <div className="text-center">
          <p className="mb-4 text-sm text-muted-foreground">
            これから画面中央に数字が表示されます。<br/>
            <strong>「偶数」が表示された回数</strong>を正確に数えてください。<br/>
            (※数字はランダムに切り替わります)
          </p>
          <button onClick={() => {setStep('task'); setScore(0);}} className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold">
            スタート
          </button>
        </div>
      )}

      {step === 'task' && (
        <div className="h-48 relative flex items-center justify-center bg-muted/30 rounded-xl overflow-hidden border">
           {/* The Task Item (Spotlight) */}
           <div className="text-6xl font-black text-primary animate-pulse">
             {Math.floor(Math.random() * 99)}
           </div>

           {/* The Gorilla (Unexpected Item) */}
           {gorillaVisible && (
             <div 
               className="absolute top-4 right-4 text-4xl animate-bounce cursor-pointer transition-opacity duration-1000"
               onClick={() => setNoticed(true)}
             >
               🦍 
               <span className="text-xs block bg-black text-white px-1">Here!</span>
             </div>
           )}

           <div className="absolute bottom-2 text-xs text-muted-foreground">数字に集中してください...</div>
        </div>
      )}

      {step === 'result' && (
        <div className="animate-in fade-in text-center">
           <p className="mb-4 font-bold">終了！</p>
           
           <div className="bg-muted p-4 rounded-lg mb-4 text-left">
             <p className="font-bold mb-2">質問：</p>
             <p className="mb-4">画面の右上に<strong>「ゴリラ」</strong>が出現したのに気づきましたか？</p>
             
             {noticed ? (
               <p className="text-green-500 font-bold">→ 「はい、クリックしました！」(素晴らしい周辺視野です)</p>
             ) : (
               <p className="text-destructive font-bold">→ 「えっ、ゴリラなんていた？」(これが非注意性盲目です)</p>
             )}
           </div>
           
           <p className="text-xs text-muted-foreground">
             ユーザーは「タスク（偶数を数える）」に集中している時、それ以外のものを無視します。<br/>
             「目立つ場所に置いたから気づくはず」というのは設計者の思い込みです。
           </p>

           <button onClick={() => {setStep('intro'); setNoticed(false);}} className="mt-6 text-blue-500 underline text-xs">もう一度</button>
        </div>
      )}
    </div>
  );
};

render(<GorillaDemo />);