const ChangeBlindnessDemo = () => {
  const [color, setColor] = useState('bg-primary/100');
  const [isBlank, setIsBlank] = useState(false);
  const [mode, setMode] = useState(null); // 'cut' or 'anim'

  // Cut Change Logic
  const triggerCutChange = () => {
    setIsBlank(true);
    setTimeout(() => {
      setColor(c => c === 'bg-primary/100' ? 'bg-purple-500' : 'bg-primary/100');
      setIsBlank(false);
    }, 200); // 200ms blank triggers change blindness
  };

  // Smooth Anim Logic
  const triggerAnimChange = () => {
    setColor(c => c === 'bg-primary/100' ? 'bg-purple-500' : 'bg-primary/100');
  };

  const reset = () => {
    setMode(null);
    setColor('bg-primary/100');
    setIsBlank(false);
  };

  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>

      {!mode ? (
        <div className="flex gap-2 justify-center">
          <button onClick={() => setMode('cut')} className="px-4 py-2 bg-muted rounded hover:bg-muted">
            A. 瞬き変化 (Change Blindness)
          </button>
          <button onClick={() => setMode('anim')} className="px-4 py-2 bg-primary/20 text-blue-800 rounded hover:bg-blue-200">
            B. 滑らかな変化
          </button>
        </div>
      ) : (
        <div className="animate-in fade-in text-center">
          <div className="h-64 relative bg-muted rounded-lg flex items-center justify-center mb-6 overflow-hidden border">
             {isBlank && <div className="absolute inset-0 bg-card z-50"></div>}
             
             <div 
               className={`w-32 h-32 rounded-xl shadow-lg flex items-center justify-center text-white font-bold text-xl
                 ${color} 
                 ${mode === 'anim' ? 'transition-colors duration-1000' : ''}
               `}
             >
               BOX
             </div>
          </div>

          <button 
            onClick={mode === 'cut' ? triggerCutChange : triggerAnimChange}
            className="bg-black text-white px-8 py-3 rounded-full font-bold hover:scale-105 transition"
          >
            変化させる！
          </button>

          <p className="mt-6 text-sm text-muted-foreground text-left bg-muted/30 p-4 rounded">
            {mode === 'cut' ? (
              <span>
                <strong>Aの場合：</strong><br/>
                一瞬ホワイトアウト（瞬き）が挟まると、色の変化に気づきにくかったり、「あれ？なんか変わった？」と脳が処理落ちしませんでしたか？これが変化盲です。
              </span>
            ) : (
              <span>
                <strong>Bの場合：</strong><br/>
                滑らかに色が移り変わるので、変化の過程を確実に目で追うことができます。<br/>
                重要な変化にはアニメーションが必要です。
              </span>
            )}
          </p>
          
          <button onClick={reset} className="block mx-auto mt-4 text-xs text-muted-foreground underline">戻る</button>
        </div>
      )}
    </div>
  );
};

render(<ChangeBlindnessDemo />);