import { useLanguage } from '../../contexts/LanguageContext';

export default function FeaturesSection() {
  const { language } = useLanguage();

  return (
    <section className="core-features">
      <div className="container">
        <div className="section-header reveal">
          <div className="eyebrow">Core Features</div>
          <h2 className="section-title">
            {language === 'zh'
              ? '学生留下来的三个理由'
              : 'Three reasons students stay with TexPixel'}
          </h2>
        </div>

        <div className="cards-3">
          <div className="feature-card reveal reveal-delay-1">
            <div className="feature-mini">
              <span className="feature-speed">⚡ t &lt; 1s</span>
            </div>
            <div className="card-title">{language === 'zh' ? '极速识别' : 'Sub-second Recognition'}</div>
            <div className="card-desc">
              {language === 'zh'
                ? '上传截图，LaTeX 随即出现。拍下笔记，无需等待，直接复制。'
                : 'Upload a screenshot, LaTeX appears instantly. Take a photo of your notes and copy right away.'}
            </div>
          </div>

          <div className="feature-card reveal reveal-delay-2">
            <div className="feature-mini" style={{ fontSize: '13px', color: 'var(--text-body)' }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--primary)' }}>
                \int_0^1 x^2 dx
              </span>
            </div>
            <div className="card-title">{language === 'zh' ? '复杂公式支持' : 'Complex Formula Support'}</div>
            <div className="card-desc">
              {language === 'zh'
                ? '矩阵、积分、求和、化学式全部支持。多行公式对齐、角标嵌套一次识别。'
                : 'Matrices, integrals, summations, chemical formulas — all supported. Multi-line alignment and nested scripts in one pass.'}
            </div>
          </div>

          <div className="feature-card reveal reveal-delay-3">
            <div className="feature-mini">
              <span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-body)', fontSize: '13px' }}>
                \mathbf{'{A}'}<sup style={{ fontSize: '9px', color: 'var(--teal)' }}>−1</sup>b
              </span>
            </div>
            <div className="card-title">{language === 'zh' ? '高准确度' : 'High Accuracy'}</div>
            <div className="card-desc">
              {language === 'zh'
                ? '论文级别识别准确率。在 arXiv 截图测试集上准确率超过 95%，持续迭代提升中。'
                : 'Publication-grade accuracy. Over 95% on arXiv screenshot benchmarks, continuously improving.'}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}