const SpatialMapping = () => {
  const [activeBox, setActiveBox] = useState(null);

  // マッピングの悪い例（一列配置）か、良い例（空間配置）かを切り替えられるようにしても面白いが、
  // ここでは「良いマッピング」を示す。
  
  const boxes = [
    { id: 'TL', label: 'Top Left' },
    { id: 'TR', label: 'Top Right' },
    { id: 'BL', label: 'Btm Left' },
    { id: 'BR', label: 'Btm Right' },
  ];

  return (
    <div className="p-8 flex flex-col md:flex-row items-center justify-center gap-12 bg-muted/30 rounded-xl">
      
      {/* 操作される対象 (Objects) */}
      <div className="grid grid-cols-2 gap-4 p-4 bg-card shadow-inner rounded-xl">
        {boxes.map(box => (
          <div 
            key={box.id}
            className={`
              w-24 h-24 flex items-center justify-center rounded-lg font-bold transition-all duration-300
              ${activeBox === box.id ? 'bg-primary/100 text-white scale-105 shadow-lg' : 'bg-muted text-muted-foreground'}
            `}
          >
            {activeBox === box.id ? 'ON' : 'OFF'}
          </div>
        ))}
      </div>

      {/* 
        コントローラー (Controls)
        対象と全く同じ「2x2グリッド」で配置されているため、
        ラベルを読まなくてもどれがどれに対応するかが直感的にわかる。
        これが「自然なマッピング」。
      */}
      <div className="bg-secondary p-6 rounded-xl shadow-xl flex flex-col items-center">
        <p className="text-muted-foreground text-xs mb-4 uppercase tracking-widest">Control Panel</p>
        <div className="grid grid-cols-2 gap-6">
          {boxes.map(box => (
            <button
              key={box.id}
              onClick={() => setActiveBox(activeBox === box.id ? null : box.id)}
              className={`
                w-12 h-12 rounded-full border-4 transition-all duration-150 relative
                ${activeBox === box.id 
                  ? 'border-blue-500 bg-blue-900 shadow-[0_0_15px_rgba(59,130,246,0.5)]' 
                  : 'border-gray-600 bg-gray-700 hover:border-gray-500'}
              `}
              aria-label={`Toggle ${box.label}`}
            >
              <div className={`absolute inset-0 m-auto w-2 h-2 rounded-full ${activeBox === box.id ? 'bg-blue-400' : 'bg-gray-900 border border-gray-600'}`} />
            </button>
          ))}
        </div>
      </div>

    </div>
  );
};

render(<SpatialMapping />);