const ResponseComparison = () => {
  const [fastStatus, setFastStatus] = useState('idle');
  const [slowStatus, setSlowStatus] = useState('idle');

  // 0.4秒未満 (ドハティの閾値内)
  const handleFastClick = () => {
    setFastStatus('loading');
    setTimeout(() => {
      setFastStatus('success');
      setTimeout(() => setFastStatus('idle'), 1500);
    }, 300); // 300ms
  };

  // 1.0秒 (閾値超え)
  const handleSlowClick = () => {
    setSlowStatus('loading');
    setTimeout(() => {
      setSlowStatus('success');
      setTimeout(() => setSlowStatus('idle'), 1500);
    }, 1000); // 1000ms
  };

  return (
    <div className="p-8 bg-muted/30 rounded-xl flex flex-col items-center gap-8">
      
      {/* Fast Response Case */}
      <div className="w-full max-w-sm">
        <div className="flex justify-between items-center mb-2">
          <h4 className="font-bold text-foreground">Within Threshold (300ms)</h4>
          <span className="text-xs bg-green-100 dark:bg-green-950 text-green-700 dark:text-green-200 px-2 py-1 rounded">Good UX</span>
        </div>
        <button
          onClick={handleFastClick}
          disabled={fastStatus !== 'idle'}
          className={`w-full py-3 rounded-lg font-medium transition-all ${
            fastStatus === 'idle' ? 'bg-primary hover:bg-primary/100 text-white shadow-md' :
            fastStatus === 'loading' ? 'bg-blue-300 dark:bg-blue-800 text-white cursor-wait' :
            'bg-green-600 text-white'
          }`}
        >
          {fastStatus === 'idle' && 'Click Me (Fast)'}
          {fastStatus === 'loading' && 'Loading...'}
          {fastStatus === 'success' && 'Done!'}
        </button>
        <p className="text-xs text-muted-foreground mt-1">
          反応が即座に感じられ、自分の操作の一部のように思えます。
        </p>
      </div>

      <div className="w-full border-t border-border"></div>

      {/* Slow Response Case */}
      <div className="w-full max-w-sm">
        <div className="flex justify-between items-center mb-2">
          <h4 className="font-bold text-foreground">Above Threshold (1000ms)</h4>
          <span className="text-xs bg-red-100 dark:bg-red-950 text-red-700 dark:text-red-200 px-2 py-1 rounded">Frustrating</span>
        </div>
        <button
          onClick={handleSlowClick}
          disabled={slowStatus !== 'idle'}
          className={`w-full py-3 rounded-lg font-medium transition-all ${
            slowStatus === 'idle' ? 'bg-gray-600 hover:bg-muted/300 text-white shadow-md' :
            slowStatus === 'loading' ? 'bg-gray-300 text-white cursor-wait' :
            'bg-green-600 text-white'
          }`}
        >
          {slowStatus === 'idle' && 'Click Me (Slow)'}
          {slowStatus === 'loading' && 'Loading...'}
          {slowStatus === 'success' && 'Done!'}
        </button>
        <p className="text-xs text-muted-foreground mt-1">
          一瞬の「間」があり、システムが止まったのか不安になります。
        </p>
      </div>

    </div>
  );
};

render(<ResponseComparison />);