// 全站头部导航 + 语言切换 + CTA
function Header({ currentPage, onNavigate, onOpenRebate, lang = 'zh', onToggleLang, t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;

  const navItems = [
    { key: 'home', label: i18n.nav.home },
    { key: 'record', label: i18n.nav.record },
    { key: 'methodology', label: i18n.nav.methodology },
    { key: 'faq', label: i18n.nav.faq },
  ];

  return (
    <header className="site-header">
      <div className="header-inner">
        <div className="brand" onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>
          <span className="brand-text brand-text-only">
            <span className="brand-name">{i18n.brand.name}</span>
            <span className="brand-sub">{i18n.brand.sub}</span>
          </span>
        </div>

        <nav className="site-nav">
          {navItems.map((item) => (
            <button
              key={item.key}
              className={'nav-link ' + (currentPage === item.key ? 'active' : '')}
              onClick={() => onNavigate(item.key)}
            >
              {item.label}
            </button>
          ))}
        </nav>

        <div className="header-cta">
          <button
            className="cta-link lang-switch-btn"
            onClick={onToggleLang}
            title={lang === 'zh' ? 'Switch to English' : '切换为中文'}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '4px',
              padding: '6px 10px',
              border: '1px solid rgba(255,255,255,0.15)',
              borderRadius: '6px',
              background: 'rgba(255,255,255,0.03)',
              color: 'var(--text-primary)',
              fontWeight: 500,
              fontSize: '13px'
            }}
          >
            🌐 {i18n.nav.switchLang}
          </button>
          <button className="cta-link" onClick={onOpenRebate}>
            {i18n.nav.rebateRegister}
          </button>
          <a
            href="https://t.me/gib137"
            target="_blank"
            rel="noopener noreferrer"
            className="cta-btn"
          >
            <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>
    </header>
  );
}

// 全站页脚 + 合规声明 + CTA
function Footer({ onNavigate, onOpenRebate, lang = 'zh', t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;

  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-main">
          <div className="footer-brand footer-brand-text">
            <div>
              <div className="footer-brand-name">{i18n.brand.name}</div>
              <div className="footer-brand-sub">{i18n.brand.footerSub}</div>
            </div>
          </div>

          <div className="footer-navs">
            <div className="footer-col">
              <div className="footer-col-title">{i18n.footer.navTitle}</div>
              <button className="footer-link" onClick={() => onNavigate('home')}>{i18n.nav.home}</button>
              <button className="footer-link" onClick={() => onNavigate('record')}>{i18n.nav.record}</button>
              <button className="footer-link" onClick={() => onNavigate('methodology')}>{i18n.nav.methodology}</button>
              <button className="footer-link" onClick={() => onNavigate('faq')}>{i18n.nav.faq}</button>
            </div>
            <div className="footer-col">
              <div className="footer-col-title">{i18n.footer.joinTitle}</div>
              <button className="footer-link" onClick={onOpenRebate}>{i18n.footer.rebateFree}</button>
              <a href="https://t.me/gib137" target="_blank" rel="noopener noreferrer" className="footer-link">{i18n.nav.joinTg}</a>
              <a href="https://xuanwu.gitbook.io/xuanwu/" target="_blank" rel="noopener noreferrer" className="footer-link">{i18n.footer.whitepaper}</a>
            </div>
          </div>

          <div className="footer-cta-block">
            <div className="footer-cta-title">{i18n.footer.ctaBlockTitle}</div>
            <div className="footer-cta-desc">{i18n.footer.ctaBlockDesc}</div>
            <div className="footer-cta-btns">
              <a href="https://t.me/gib137" target="_blank" rel="noopener noreferrer" className="cta-btn cta-btn-sm">
                {i18n.nav.joinTg}
              </a>
              <button className="cta-link" onClick={onOpenRebate}>
                {i18n.nav.rebateRegister} →
              </button>
            </div>
          </div>
        </div>

        <div className="footer-compliance">
          <p>
            <strong>{i18n.footer.complianceTitle}</strong>
            {i18n.footer.complianceContent}
          </p>
        </div>

        <div className="footer-bottom">
          <span>{i18n.brand.rights}</span>
        </div>
      </div>
    </footer>
  );
}

// 统计带组件（首页 + 记录页共用）
function StatsBand({ stats, compact = false, variant = 'live', lang = 'zh', t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;
  const sb = i18n.statsBand;

  const items = [
    { label: sb.totalTrades, value: stats.totalTrades, unit: sb.unitTrades, sub: stats.dateRange },
    { label: sb.winRate, value: stats.winRate, unit: sb.unitPercent, sub: (stats.winningTrades || 0) + " " + (sb.winLossSub.split("/")[0] || "") + " / " + (stats.losingTrades || 0) + " " + (sb.winLossSub.split("/")[1] || "") },
    { label: sb.avgRR, value: stats.avgRR, unit: sb.unitR, sub: sb.avgRRSub },
    { label: sb.sharpe, value: stats.sharpeRatio, unit: '', sub: sb.sharpeSub },
    { label: sb.cumReturn, value: stats.cumulativeReturn, unit: sb.unitPercent, sub: sb.cumReturnSub, positive: true },
    { label: sb.maxDD, value: stats.maxDrawdown, unit: sb.unitPercent, sub: sb.maxDDSub, negative: true },
  ];

  const badgeLabel = variant === 'live' ? sb.badgeLive : sb.badgeSample;

  return (
    <div className={'stats-band ' + (compact ? 'compact' : '')}>
      {items.map((item, i) => (
        <div key={i} className="stat-item">
          <div className="stat-label">{item.label}</div>
          <div className={'stat-value ' + (item.positive ? 'positive' : item.negative ? 'negative' : '')}>
            {item.positive ? '+' : ''}{item.value}<span className="stat-unit">{item.unit}</span>
          </div>
          <div className="stat-sub">{item.sub}</div>
        </div>
      ))}
      <div className="stats-disclaimer">
        <span className={'disclaimer-badge ' + (variant === 'live' ? 'live' : '')}>{badgeLabel}</span>
        {sb.disclaimer}
      </div>
    </div>
  );
}

// 风险提示横幅
function RiskBanner({ lang = 'zh', t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;
  return (
    <div className="risk-banner">
      <span className="risk-icon">!</span>
      <span>
        <strong>{i18n.riskBanner.title}</strong>
        {i18n.riskBanner.content}
      </span>
    </div>
  );
}

// 返佣注册弹窗
function RebateModal({ onClose, lang = 'zh', t }) {
  const isEn = lang === 'en';

  React.useEffect(() => {
    const handleEsc = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', handleEsc);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', handleEsc);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  const lines = isEn ? [
    'Sign up on Bitget using our official partner link to join our private research channel.',
    'We charge zero tuition fees or subscription fees, providing objective quantitative tools and transparent records to help you build your trading framework.',
    'Our revenue stems directly from exchange rebates. Our incentives align with your longevity and sustainable risk management — not reckless liquidation.',
    'We grow with disciplined traders, not reckless gamblers.'
  ] : REBATE_MODAL_CONTENT.lines;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal rebate-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div className="modal-title-wrap">
            <h3 className="modal-title" style={{ fontSize: '18px' }}>
              {isEn ? 'Exchange Referral Registration' : '返佣注册'}
            </h3>
          </div>
          <button className="modal-close" onClick={onClose}>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="modal-body">
          <div className="rebate-content">
            {lines.map((line, i) => (
              <p key={i} className="rebate-line">{line}</p>
            ))}

            <div className="rebate-link-block">
              <div className="rebate-link-label">{isEn ? 'Referral Link' : '返佣链接'}</div>
              <div className="rebate-link-row">
                <code className="rebate-link">{REBATE_MODAL_CONTENT.link}</code>
                <a
                  href={REBATE_MODAL_CONTENT.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="rebate-link-btn"
                >
                  {isEn ? 'Open Link' : '打开链接'}
                </a>
              </div>
              <div className="rebate-invite">
                {isEn ? 'Or input referral code during signup: ' : '也可以直接注册时填写邀请码：'}
                <strong>{REBATE_MODAL_CONTENT.inviteCode}</strong>
              </div>
            </div>

            <p className="rebate-contact">
              {isEn ? 'After registration, contact admin on Telegram ' : REBATE_MODAL_CONTENT.contactNote}
              <a href="https://t.me/gib137" target="_blank" rel="noopener noreferrer" className="rebate-tg-link">
                @gib137 →
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Header,
  Footer,
  StatsBand,
  RiskBanner,
  RebateModal,
});