import React from "react";
import { Link } from "react-router-dom";

const HomePage: React.FC = () => {
  return (
    <div className="homepage">
      <div className="hero-section">
        <div className="hero-content">
          <h1 className="hero-title">Digital Embryo</h1>
          <h2 className="hero-subtitle">数字胚胎发育时空转录组图谱</h2>
          <p className="hero-description">
            Digital Embryo 数据库包含了小鼠胚胎在 CS7、CS8、CS9 等不同发育阶段的空间转录组数据。
            我们提供基因表达的空间图谱，基因共表达模块和调控子信息，为深入研究哺乳动物发育的长期问题提供全景图谱。
          </p>
        </div>
      </div>

      <div className="features-section">
        <div className="features-grid">
          <div className="feature-card">
            <Link to="/spatial-clustering" className="feature-link">
              <div className="feature-icon">🧬</div>
              <h3 className="feature-title">Spatial clustering</h3>
              <p className="feature-description">
                空间聚类 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子。
              </p>
            </Link>
          </div>

          <div className="feature-card">
            <Link to="/gene-view" className="feature-link">
              <div className="feature-icon">📊</div>
              <h3 className="feature-title">Gene Expression</h3>
              <p className="feature-description">
                基因表达 - 查看和分析不同发育阶段的基因表达模式和空间分布。
              </p>
            </Link>
          </div>

          <div className="feature-card">
            <Link to="/resource" className="feature-link">
              <div className="feature-icon">🔬</div>
              <h3 className="feature-title">Resource</h3>
              <p className="feature-description">
                资源 - 我们为研究社区提供原始数据和分析软件资源。
              </p>
            </Link>
          </div>

          <div className="feature-card">
            <Link to="/download" className="feature-link">
              <div className="feature-icon">⬇️</div>
              <h3 className="feature-title">Download</h3>
              <p className="feature-description">
                下载 - 我们为研究社区提供处理后的数据和元数据。
              </p>
            </Link>
          </div>
        </div>
      </div>

      <div className="info-section">
        <div className="info-content">
          <h3>数据库详情</h3>
          <p>
            Digital Embryo 数据库包含了小鼠胚胎在 CS7（~早期发育）、CS8（~中期发育）、CS9（~后期发育）
            等不同发育阶段的高分辨率空间转录组数据。通过先进的空间转录组学技术，
            我们能够在细胞分辨率水平上揭示基因表达的空间模式，为理解胚胎发育的分子机制提供重要资源。
          </p>
          
          <div className="statistics">
            <div className="stat-item">
              <span className="stat-number">3</span>
              <span className="stat-label">发育阶段</span>
            </div>
            <div className="stat-item">
              <span className="stat-number">1000+</span>
              <span className="stat-label">基因</span>
            </div>
            <div className="stat-item">
              <span className="stat-number">10000+</span>
              <span className="stat-label">细胞</span>
            </div>
          </div>
        </div>
      </div>

      <div className="citation-section">
        <h3>如何引用</h3>
        <div className="citation-box">
          <p>
            Digital Embryo: A spatiotemporal transcriptomic atlas of mouse embryogenesis 
            using advanced spatial transcriptomics. <em>Development</em>, 2024.
          </p>
          <button className="copy-citation-btn">复制引用</button>
        </div>
      </div>
    </div>
  );
};

export default HomePage; 