function About() {
  return (
    <>
      <Nav current="about" />
      <section className="section">
        <div className="hero-eyebrow"><span className="accent">·</span> Philosophy</div>
        <h1 style={{ fontSize: 'clamp(34px, 5.4vw, 56px)', margin: '0 0 24px', letterSpacing: '-0.025em', maxWidth: 900 }}>
          The Best Edge Is Often the Trade You Didn't Take.
        </h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 18, lineHeight: 1.7, maxWidth: 720 }}>
          GHOST was built around a single, unfashionable idea: most of what looks
          like a setup isn't one. The framework is biased toward fewer signals,
          higher-quality reads, and an automatic veto when conditions don't agree.
          If you find yourself overriding the No-Trade ✕ regularly, you're using
          the tool against itself.
        </p>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·01</span> · Principles</div>
        <h2 className="section-title">Four Design Rules.</h2>
        <div className="feature-grid">
          <div className="feature">
            <div className="ico">01</div>
            <h4>One Signal Is Noise.</h4>
            <p>A single indicator firing means almost nothing. The dashboard's job is to ask whether <em>multiple, independent</em> reads agree — direction, confluence, regime, trigger. If they don't, the trade isn't there yet.</p>
          </div>
          <div className="feature">
            <div className="ico">02</div>
            <h4>Visualise Context, Don't Predict It.</h4>
            <p>GHOST does not forecast price. It reads what the market has already done, classifies it, and shows it to you cleanly. The decision is yours. The framework is a lens, not a crystal ball.</p>
          </div>
          <div className="feature">
            <div className="ico">03</div>
            <h4>Bias Toward Stepping Aside.</h4>
            <p>CHOP, No-Trade ✕, low Score — every "neutral" surface in the framework points the same direction: <em>not now</em>. Trading less and waiting for alignment is the entire edge of the tool.</p>
          </div>
          <div className="feature">
            <div className="ico">04</div>
            <h4>Modular Over Monolithic.</h4>
            <p>Six independent layers, all toggleable. Use the dashboard alone, or stack on Reversal Signals, Ghost Signals, Supply/Demand, Tutorial Mode, Chart Legend. Build the read you trust.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·02</span> · What Ghost Is Not</div>
        <h2 className="section-title">Honest About the Boundaries.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
          <div className="callout bad">
            <span className="callout-tag">Not a Trading System</span>
            <p>There is no automated execution, no entry/exit management, no built-in stop-loss. GHOST tells you when conditions are aligned. Risk management is yours.</p>
          </div>
          <div className="callout bad">
            <span className="callout-tag">Not Financial Advice</span>
            <p>Nothing rendered on screen is a recommendation. The disclaimer gate exists so this is explicit before any pixel paints.</p>
          </div>
          <div className="callout bad">
            <span className="callout-tag">Not a Backtest</span>
            <p>There's no built-in performance report. You journal your own trades; you learn whether the framework fits your market and timeframe.</p>
          </div>
          <div className="callout bad">
            <span className="callout-tag">Not a Guarantee</span>
            <p>"Score 9/10" doesn't mean the trend continues. Confluence breaks down. Trends end. Past performance is not future results.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="cta-strip">
          <div>
            <h3>Ready to Read the Framework?</h3>
            <p>Start with the Guide, then walk through the Learning Edition.</p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="btn btn-ghost" href="guide.html">Guide</a>
            <a className="btn btn-primary" href="course.html">Learning Edition →</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<About />);
