// 首页 (支持双语)
function HomePage({ onNavigate, onOpenRebate, lang = 'zh', t, liveStats }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;
  const h = i18n.home;
  const isEn = lang === 'en';

  const dailyFlow = isEn ? [
    { step: 1, title: 'Sentiment Ingestion', description: 'Our proprietary quantitative engine scans Twitter, Reddit, and global financial wires daily to rank the top 10 US equities with maximum social volume.' },
    { step: 2, title: 'Quantitative Screening', description: 'Computes intraday momentum and sentiment vectors, outputting 5-tier systematic ratings from Strong Bearish to Strong Bullish.' },
    { step: 3, title: 'Discretionary Finalization', description: 'Lead quant selects the 3 optimal setups, cross-referencing sector rotation, news catalysts, and volume profile structures.' },
    { step: 4, title: 'Community Broadcast', description: 'Published pre-market with exact entry zones, stop losses, profit targets, breakeven triggers, and continuous intraday updates.' }
  ] : DAILY_FLOW;

  return (
    <div className="page home-page">
      {/* Hero Section */}
      <section className="hero-section">
        <div className="hero-inner">
          <div className="hero-badge">
            <span className="badge-dot"></span>
            {h.heroBadge}
          </div>
          <h1 className="hero-title">
            {h.heroTitlePrefix}<span className="hl">{h.heroTitleHighlight}</span>
            <br />{h.heroTitleSuffix}
          </h1>
          <p className="hero-subtitle">
            {h.heroDesc}
          </p>
          <div className="hero-actions">
            <button className="btn-primary" onClick={() => onNavigate('record')}>
              {h.viewRecordsBtn}
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </button>
            <a
              href="https://t.me/gib137"
              target="_blank"
              rel="noopener noreferrer"
              className="btn-ghost"
            >
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z" />
              </svg>
              {i18n.nav.joinTg}
            </a>
          </div>
          <div className="hero-note">
            <span className="note-dot"></span>
            {h.heroNote}
          </div>
        </div>

        {/* Hero 右侧：迷你收益曲线预览 */}
        <div className="hero-chart">
          <div className="chart-card">
            <div className="chart-card-header">
              <span className="chart-card-title">{h.chartCardTitle}</span>
              <span className="chart-card-badge">{h.chartCardBadge}</span>
            </div>
            {(!liveStats || liveStats.totalTrades === 0) ? (
              <div style={{ height: '180px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: '13px' }}>
                <span style={{ fontSize: '24px', marginBottom: '8px' }}>📈</span>
                <span>{isEn ? 'Waiting for first trade batch' : '等待管理员导入首批实盘数据'}</span>
              </div>
            ) : (
              <>
                <div id="heroMiniChart" style={{ width: '100%', height: '180px' }}></div>
                <div className="chart-card-footer">
                  <span className="chart-stat">
                    <span className="dot dot-positive"></span>
                    {h.chartReturn} +{(liveStats ? liveStats.cumulativeReturn : SITE_STATS.cumulativeReturn)}%
                  </span>
                  <span className="chart-stat">
                    <span className="dot dot-negative"></span>
                    {h.chartMaxDD} {(liveStats ? liveStats.maxDrawdown : SITE_STATS.maxDrawdown)}%
                  </span>
                </div>
              </>
            )}
          </div>
        </div>
      </section>

      {/* 差异化说明 */}
      <section className="section diff-section">
        <div className="section-inner">
          <div className="section-header centered">
            <h2 className="section-title">{h.diffTitle}</h2>
            <p className="section-desc">{h.diffSubtitle}</p>
          </div>

          <div className="diff-grid">
            {h.diffItems.map(item => (
              <div key={item.num} className="diff-card">
                <div className="diff-num">{item.num}</div>
                <h3 className="diff-title">{item.title}</h3>
                <p className="diff-desc">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 运作流程速览 */}
      <section className="section flow-section">
        <div className="section-inner">
          <div className="flow-content">
            <div className="flow-left">
              <div className="eyebrow">{h.flowEyebrow}</div>
              <h2 className="flow-title">{h.flowTitle}</h2>
              <p className="flow-desc">{h.flowDesc}</p>
              <button className="btn-link" onClick={() => onNavigate('methodology')}>
                {h.learnMethodologyBtn}
              </button>
            </div>
            <div className="flow-right">
              {dailyFlow.map((step) => (
                <div key={step.step} className="flow-step">
                  <div className="flow-step-num">{step.step}</div>
                  <div className="flow-step-body">
                    <div className="flow-step-title">{step.title}</div>
                    <div className="flow-step-desc">{step.description}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section cta-section">
        <div className="section-inner">
          <div className="cta-block">
            <div className="cta-block-left">
              <h2 className="cta-title">{h.ctaTitle}</h2>
              <p className="cta-desc">{h.ctaDesc}</p>
            </div>
            <div className="cta-block-right">
              <button className="btn-primary btn-lg" onClick={() => onNavigate('record')}>
                {h.ctaRecordsBtn}
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M12 5l7 7-7 7" />
                </svg>
              </button>
              <button className="btn-ghost" onClick={() => onNavigate('faq')}>
                {h.ctaFaqBtn}
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });