const FittsComparison = () => {
  const [clickCount, setClickCount] = useState(0);

  return (
    <div className="h-64 p-4 bg-muted rounded-xl relative overflow-hidden shadow-inner border border-border">
      
      {/* 
        [Bad Target]
        小さく、配置も端ではない中途半端な位置（あるいは遠い位置）。
        精密なマウス操作が必要で、認知負荷が高い。
      */}
      <button
        onClick={() => setClickCount(c => c + 1)}
        className="absolute top-4 right-4 w-6 h-6 bg-red-400 hover:bg-destructive rounded-full text-[10px] text-white flex items-center justify-center shadow-sm"
        title="Hard to click"
      >
        Bad
      </button>

      {/* 
        [Good Target]
        大きく、明確で、押しやすい位置にある。
        フィッツの法則的に「Index of Difficulty (ID)」が低い。
      */}
      <button
        onClick={() => setClickCount(c => c + 1)}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-48 py-4 bg-primary hover:bg-primary/100 text-white font-bold rounded-lg shadow-lg flex items-center justify-center transition-transform active:scale-95"
      >
        Easy to Click (Good UX)
      </button>

      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none">
        <p className="text-muted-foreground text-sm">Clicks: {clickCount}</p>
        <p className="text-xs text-gray-300 mt-1">Try clicking the red button vs blue button</p>
      </div>

    </div>
  );
};

render(<FittsComparison />);