import React from "react";

const SpatialClustering: React.FC = () => {
  return (
    <div className="page-container">
      <div className="page-header">
        <h1>Spatial clustering</h1>
        <p className="page-description">
          空间聚类分析 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子
        </p>
      </div>

      <div className="page-content">
        <div className="section">
          <h2>空间聚类功能</h2>
          <div className="clustering-features">
            <div className="cluster-card">
              <h3>细胞类型注释</h3>
              <p>基于基因表达谱和空间位置信息，自动识别和注释不同的细胞类型。</p>
            </div>
            <div className="cluster-card">
              <h3>基因共表达模块</h3>
              <p>识别在相同空间区域内共同表达的基因模块，揭示功能相关的基因网络。</p>
            </div>
            <div className="cluster-card">
              <h3>空间调控子</h3>
              <p>分析空间特异性的转录调控网络，理解组织形成的分子机制。</p>
            </div>
          </div>
        </div>

        <div className="section">
          <h2>交互式探索</h2>
          <div className="interactive-notice">
            <p>🚧 交互式空间聚类工具正在开发中...</p>
            <p>即将支持：</p>
            <ul>
              <li>实时聚类参数调整</li>
              <li>多种聚类算法选择</li>
              <li>聚类结果可视化</li>
              <li>差异基因分析</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SpatialClustering; 