// 方法论页 (支持双语)
function MethodologyPage({ onNavigate, lang = 'zh', t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;
  const m = i18n.methodology;
  const isEn = lang === 'en';

  const [winRate, setWinRate] = React.useState(67);
  const [rr, setRr] = React.useState(2.0);
  const [stopWidth, setStopWidth] = React.useState(1);
  const [leverage, setLeverage] = React.useState(5);

  const riskPerTrade = stopWidth * leverage;
  const expectancy = (winRate / 100 * rr) - ((100 - winRate) / 100 * 1);
  const lossRecoveryTrades = 1 / rr;
  const monthlyTrades = 20;
  const monthlyExpectancy = expectancy * monthlyTrades * (riskPerTrade / 100) * 100;

  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 methodology-page">
      <div className="page-header page-header-compact">
        <div className="section-inner">
          <div className="page-header-inner">
            <div>
              <h1 className="page-title page-title-compact">{m.pageTitle}</h1>
              <p className="page-desc page-desc-compact">
                {m.pageDesc}
              </p>
            </div>
            <div className="page-header-cta">
              <a
                href="https://xuanwu.gitbook.io/xuanwu/"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary btn-primary-sm"
              >
                {m.whitepaperBtn}
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M12 5l7 7-7 7" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* 每日运作流程 */}
      <section className="section">
        <div className="section-inner">
          <div className="section-header">
            <h2 className="section-title">{m.flowTitle}</h2>
            <p className="section-desc">{m.flowDesc}</p>
          </div>

          <div className="flow-timeline">
            {dailyFlow.map((step, i) => (
              <div key={step.step} className="flow-timeline-item">
                <div className="timeline-left">
                  <div className="timeline-step-num">{String(step.step).padStart(2, '0')}</div>
                  {i < dailyFlow.length - 1 && <div className="timeline-connector"></div>}
                </div>
                <div className="timeline-content">
                  <h3 className="timeline-title">{step.title}</h3>
                  <p className="timeline-desc">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 可计算性演示 */}
      <section className="section calc-section">
        <div className="section-inner">
          <div className="section-header">
            <h2 className="section-title">{m.calcTitle}</h2>
            <p className="section-desc">{m.calcDesc}</p>
          </div>

          <div className="calc-demo">
            <div className="calc-controls">
              <div className="calc-control-row">
                <label>
                  <span>{m.winRateLabel}</span>
                  <span className="control-value">{winRate}%</span>
                </label>
                <div className="slider-container">
                  <input
                    type="range"
                    min="30"
                    max="90"
                    value={winRate}
                    style={{ background: 'linear-gradient(to right, var(--accent) 0%, var(--accent) ' + ((winRate - 30) / (90 - 30) * 100) + '%, var(--bg-tertiary) ' + ((winRate - 30) / (90 - 30) * 100) + '%, var(--bg-tertiary) 100%)' }}
                    onChange={(e) => setWinRate(parseInt(e.target.value))}
                  />
                  <div className="slider-ticks">
                    <span>30%</span>
                    <span>50%</span>
                    <span>70%</span>
                    <span>90%</span>
                  </div>
                </div>
              </div>
              <div className="calc-control-row">
                <label>
                  <span>{m.rrLabel}</span>
                  <span className="control-value">{rr.toFixed(1)} R</span>
                </label>
                <div className="slider-container">
                  <input
                    type="range"
                    min="0.5"
                    max="4"
                    step="0.1"
                    value={rr}
                    style={{ background: 'linear-gradient(to right, var(--accent) 0%, var(--accent) ' + ((rr - 0.5) / (4 - 0.5) * 100) + '%, var(--bg-tertiary) ' + ((rr - 0.5) / (4 - 0.5) * 100) + '%, var(--bg-tertiary) 100%)' }}
                    onChange={(e) => setRr(parseFloat(e.target.value))}
                  />
                  <div className="slider-ticks">
                    <span>0.5R</span>
                    <span>1.5R</span>
                    <span>2.5R</span>
                    <span>4.0R</span>
                  </div>
                </div>
              </div>
              <div className="calc-control-row">
                <label>
                  <span>{m.stopWidthLabel}</span>
                  <span className="control-value">{stopWidth}%</span>
                </label>
                <div className="slider-container">
                  <input
                    type="range"
                    min="0.5"
                    max="10"
                    step="0.1"
                    value={stopWidth}
                    style={{ background: 'linear-gradient(to right, var(--accent) 0%, var(--accent) ' + ((stopWidth - 0.5) / (10 - 0.5) * 100) + '%, var(--bg-tertiary) ' + ((stopWidth - 0.5) / (10 - 0.5) * 100) + '%, var(--bg-tertiary) 100%)' }}
                    onChange={(e) => setStopWidth(parseFloat(e.target.value))}
                  />
                  <div className="slider-ticks">
                    <span>0.5%</span>
                    <span>3.0%</span>
                    <span>6.0%</span>
                    <span>10%</span>
                  </div>
                </div>
              </div>
              <div className="calc-control-row">
                <label>
                  <span>{m.leverageLabel}</span>
                  <span className="control-value">{leverage}x</span>
                </label>
                <div className="slider-container">
                  <input
                    type="range"
                    min="1"
                    max="50"
                    value={leverage}
                    style={{ background: 'linear-gradient(to right, var(--accent) 0%, var(--accent) ' + ((leverage - 1) / (50 - 1) * 100) + '%, var(--bg-tertiary) ' + ((leverage - 1) / (50 - 1) * 100) + '%, var(--bg-tertiary) 100%)' }}
                    onChange={(e) => setLeverage(parseInt(e.target.value))}
                  />
                  <div className="slider-ticks">
                    <span>1x</span>
                    <span>10x</span>
                    <span>25x</span>
                    <span>50x</span>
                  </div>
                </div>
              </div>

              <div className="calc-risk-summary">
                <span>{isEn ? 'Risk per Trade: ' : '单笔总风险：'}<strong>{riskPerTrade.toFixed(1)}%</strong> ({stopWidth}% × {leverage}x)</span>
              </div>
            </div>

            <div className="calc-results">
              <div className="calc-result-item">
                <div className="calc-result-label">{m.singleExpectancy}</div>
                <div className={'calc-result-value ' + (expectancy >= 0 ? 'positive' : 'negative')}>
                  {expectancy >= 0 ? '+' : ''}{expectancy.toFixed(2)} R
                </div>
                <div className="calc-result-sub">
                  = {isEn ? 'Win% × RR − Loss% × 1R' : '胜率 × 盈亏比 − 败率 × 1R'}
                </div>
              </div>
              <div className="calc-result-item">
                <div className="calc-result-label">{m.recoveryNeeded}</div>
                <div className="calc-result-value">
                  {lossRecoveryTrades.toFixed(1)} {isEn ? 'trades' : '单'}
                </div>
                <div className="calc-result-sub">
                  {isEn ? ('1 loss requires ' + lossRecoveryTrades.toFixed(1) + ' win to recover') : ('亏 1 单需赚 ' + lossRecoveryTrades.toFixed(1) + ' 单回本')}
                </div>
              </div>
              <div className="calc-result-item highlight">
                <div className="calc-result-label">{m.monthlyExpectancy}</div>
                <div className={'calc-result-value big ' + (monthlyExpectancy >= 0 ? 'positive' : 'negative')}>
                  {monthlyExpectancy >= 0 ? '+' : ''}{monthlyExpectancy.toFixed(2)}%
                </div>
                <div className="calc-result-sub">
                  {isEn ? ('Est. on 20 trades/mo × ' + riskPerTrade.toFixed(1) + '% risk') : ('按每月 20 单 × 每单风险 ' + riskPerTrade.toFixed(1) + '% 估算')}
                </div>
              </div>
            </div>

            <div className="calc-note">
              {m.calcNote}
            </div>
          </div>
        </div>
      </section>

      {/* TradingView 指标 + K线实图 */}
      <section className="section tv-section">
        <div className="section-inner">
          <div className="tv-block">
            <div className="tv-left">
              <div className="eyebrow">{m.tvEyebrow}</div>
              <h2 className="tv-title">{m.tvTitle}</h2>
              <p className="tv-desc">{m.tvDesc}</p>
              <ul className="tv-features">
                <li>
                  <span className="feature-check">✓</span>
                  {m.tvFeature1}
                </li>
                <li>
                  <span className="feature-check">✓</span>
                  {m.tvFeature2}
                </li>
                <li>
                  <span className="feature-check">✓</span>
                  {m.tvFeature3}
                </li>
              </ul>
              <div className="tv-actions">
                <a
                  href="https://t.me/gib137"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn-primary"
                >
                  {m.getTvAuthBtn}
                  <svg viewBox="0 0 24 24" width="18" height="18" 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>
                </a>
                <a
                  href="https://xuanwu.gitbook.io/xuanwu/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn-link"
                >
                  {m.tvTutorialBtn}
                </a>
              </div>
            </div>
            <div className="tv-right">
              <div className="tv-mockup tv-mockup-image">
                <div className="tv-mockup-header">
                  <div className="tv-tab">Bitget · NVDAUSDT · 1H</div>
                  <div className="tv-dot green"></div>
                  <div className="tv-dot yellow"></div>
                  <div className="tv-dot red"></div>
                </div>
                <div className="tv-mockup-body tv-image-body">
                  <img src="assets/kline-demo.png" alt="Xuanwu Quant Indicator Preview" className="kline-real-img" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 风险提示 */}
      <div className="section">
        <div className="section-inner">
          <RiskBanner lang={lang} t={t} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MethodologyPage });