function Methodology({ go }) {
  const wide = useWide();
  const Section = ({ label, children }) => (
    <div style={{ marginTop: 52, marginBottom: 8 }}>
      <div style={{ fontFamily: TH.serif, fontSize: wide ? 26 : 22, fontWeight: 400, letterSpacing: -0.4, color: TH.ink, marginBottom: 16, borderBottom: `1px solid ${TH.rule}`, paddingBottom: 12 }}>
        {label}
      </div>
      {children}
    </div>
  );
  const P = ({ children }) => (
    <p style={{ fontFamily: TH.serif, fontSize: wide ? 17 : 15, lineHeight: 1.8, color: TH.inkSoft, margin: '16px 0' }}>{children}</p>
  );
  const Callout = ({ children }) => (
    <div style={{ borderLeft: `3px solid ${TH.accent}`, paddingLeft: 20, margin: '24px 0', color: TH.inkSoft, fontFamily: TH.serif, fontSize: wide ? 16 : 14, lineHeight: 1.65, fontStyle: 'italic' }}>
      {children}
    </div>
  );

  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      {/* Breadcrumb */}
      <div style={{ borderBottom: `1px solid ${TH.rule}`, padding: wide ? '12px 32px' : '12px 20px', fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 1.5 }}>
        <span onClick={() => go('landing')} style={{ cursor: 'pointer', color: TH.accent }}>HOME</span>
        <span style={{ margin: '0 10px' }}>›</span>
        <span>METHODOLOGY</span>
      </div>

      <div style={{ maxWidth: 780, margin: '0 auto', padding: wide ? '56px 32px 96px' : '36px 20px 72px' }}>
        {/* Header */}
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 18 }}>§ METHODOLOGY</div>
        <h1 style={{ fontFamily: TH.serif, fontSize: wide ? 52 : 34, fontWeight: 400, lineHeight: 1.05, letterSpacing: -1.5, margin: '0 0 24px', color: TH.ink }}>
          Why walk-forward<br/>validation.
        </h1>
        <div style={{ fontFamily: TH.serif, fontSize: wide ? 19 : 16, color: TH.inkSoft, lineHeight: 1.6, marginBottom: 32, maxWidth: 640, fontStyle: 'italic' }}>
          The standard backtest is a biased estimator. This is how we account for that.
        </div>
        <div style={{ height: 1, background: TH.rule, marginBottom: 8 }}/>

        {/* Body */}
        <Section label="The problem">
          <P>
            Most published backtests are not backtests. They are curve fits — strategies optimized against the same data they will be judged on. The parameters look good because the researcher kept adjusting them until they did. The result is a strategy that worked in the past because it was designed to work in the past.
          </P>
          <P>
            This is not dishonesty. It is the default outcome of any optimization process applied to a finite dataset. When you fit a model to data and then measure it on that same data, you are measuring how well you memorized the data, not how well the model generalizes to new observations.
          </P>
          <P>
            In trading, this means the strategy you deploy in live markets will underperform its backtest — often substantially. The gap between reported and live performance is almost entirely explained by overfitting.
          </P>
          <P>
            Walk-forward validation is the discipline of separating optimization from evaluation. It is the closest thing systematic traders have to an honest test.
          </P>
        </Section>

        <Section label="How it works">
          <P>
            We divide historical data into rolling windows. Each window has two parts: an in-sample period where parameters are optimized, and an out-of-sample period where the optimized parameters are run blind — no further adjustment allowed. The window then steps forward and the process repeats.
          </P>
          <Callout>
            Example: 3-year in-sample · 1-year out-of-sample · 6-month step.<br/><br/>
            Parameters are optimized on years 1–3, then tested unchanged on year 4. The window advances 6 months. New optimization on years 1.5–4.5, tested on year 5.5. Repeat until data is exhausted. The metrics we report come from the out-of-sample periods only.
          </Callout>
          <P>
            A strategy that survives this process has demonstrated that its parameters generalize. It has not merely memorized its training data. That is a low bar — most strategies fail it — but it is the minimum threshold for taking a system seriously before allocating capital to it.
          </P>
        </Section>

        <Section label="What we require before publishing">
          <P>Every strategy published at Walkforward must meet the following criteria on its out-of-sample results:</P>
          <div style={{ margin: '20px 0', display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              ['Minimum 30 out-of-sample trades', 'Below this threshold, the statistics are not meaningful. A Sharpe ratio computed on 8 trades tells you almost nothing.'],
              ['Out-of-sample Sharpe ≥ 0.5', 'Strategies below this level do not compensate for the risk and operational effort they carry.'],
              ['Maximum drawdown documented and stress-tested', 'Against the two worst historical periods in the asset\'s data, not the average period.'],
              ['Parameter stability check', 'The result should not require precise parameter values. If moving the fast MA from 50 to 48 collapses the strategy, the strategy is fragile. We test a grid of neighboring values.'],
              ['Net-of-fees reporting', 'All metrics are net of 0.10% per trade and 5bps slippage. Gross-of-fees results are not published.'],
            ].map(([title, desc], i) => (
              <div key={i} style={{ padding: '16px 0', borderBottom: `1px solid ${TH.rule}`, display: 'grid', gridTemplateColumns: wide ? '220px 1fr' : '1fr', gap: wide ? 24 : 6 }}>
                <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 0.5, lineHeight: 1.4 }}>{title}</div>
                <div style={{ fontFamily: TH.serif, fontSize: 14, color: TH.inkSoft, lineHeight: 1.6 }}>{desc}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section label="Data sources">
          <P>
            Crypto price data comes from Binance via their public REST API. TradFi assets (S&P 500, Nasdaq, Gold, Silver) come from Yahoo Finance. All price data is daily close. We do not use tick data or order book data for strategy backtesting — daily bars have sufficient resolution for the types of trend-following and mean-reversion systems we test, and the data quality is materially more reliable.
          </P>
          <P>
            Our backtester is open to members. The parameters, the data, and the full equity curves are visible. We do not publish conclusions without showing the work.
          </P>
          <div style={{ display: 'grid', gridTemplateColumns: wide ? 'repeat(2, 1fr)' : '1fr', gap: 12, margin: '24px 0' }}>
            {[
              ['Crypto', 'Binance REST API · BTC, ETH, SOL, and 30+ others · daily close'],
              ['TradFi', 'Yahoo Finance · S&P 500, Nasdaq, Gold, Silver · daily close'],
              ['History', '2017 or first available date · updated daily'],
              ['Coverage', '~7 years for major assets · minimum 3 years required to publish'],
            ].map(([label, val], i) => (
              <div key={i} style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 16 }}>
                <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5, marginBottom: 6 }}>{label.toUpperCase()}</div>
                <div style={{ fontFamily: TH.serif, fontSize: 14, color: TH.inkSoft, lineHeight: 1.5 }}>{val}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section label="Limitations">
          <P>
            Walk-forward validation reduces overfitting — it does not eliminate it. A strategy can pass a walk-forward test and still fail in live trading due to execution differences, regime changes, or bad luck in the test window. We document these risks for every strategy we publish.
          </P>
          <P>
            The size of the test window matters. A 1-year out-of-sample period that happened to contain a strong trend will inflate results for a trend-following strategy. We check for this by reviewing the distribution across all out-of-sample windows, not just the aggregate.
          </P>
          <Callout>
            Nothing on this site is a recommendation to trade any specific strategy. The research is one input. Position sizing, portfolio construction, and execution decisions are the trader's responsibility.
          </Callout>
          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5, marginTop: 40 }}>
            METHODOLOGY REV. 1 · MAY 2026
          </div>
        </Section>

        {/* CTA */}
        <div style={{ marginTop: 56, padding: wide ? 36 : 24, background: TH.panel, border: `1px solid ${TH.rule}` }}>
          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 12 }}>§ SEE IT IN PRACTICE</div>
          <div style={{ fontFamily: TH.serif, fontSize: wide ? 24 : 20, marginBottom: 10, letterSpacing: -0.4 }}>
            The backtester is open to members.
          </div>
          <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6, marginBottom: 22, maxWidth: 520 }}>
            Run walk-forward backtests yourself on 7 years of data. The methodology above is what the tool implements.
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <Btn primary onClick={() => go('research')}>See example results →</Btn>
            <Btn ghost onClick={() => go('pricing')}>View membership</Btn>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Methodology });