/* guide.jsx — full Ghost user guide, restyled into the website chrome */

const GUIDE_TOC = [
  { num: '01', id: 'setup', name: 'Quick Setup' },
  { num: '02', id: 'playbook', name: 'The Confluence Playbook' },
  { num: '03', id: 'modules', name: 'Module Reference' },
  { num: '04', id: 'display', name: 'Display Toggles' },
  { num: '05', id: 'dashboard', name: 'The Dashboard & Tutorial' },
  { num: '06', id: 'lockout', name: 'Session Lockout' },
  { num: '07', id: 'limits', name: 'Honest Limitations' },
  { num: '08', id: 'trouble', name: 'Troubleshooting' },
];

function Toc({ active }) {
  return (
    <nav className="doc-toc">
      <h5>On this page</h5>
      {GUIDE_TOC.map(t => (
        <a key={t.id} href={'#' + t.id} className={active === t.id ? 'active' : ''}>
          <span className="n">{t.num}</span>
          <span>{t.name}</span>
        </a>
      ))}
    </nav>
  );
}

function Guide() {
  const [active, setActive] = useS('setup');
  // ScrollSpy
  React.useEffect(() => {
    const handler = () => {
      const ids = GUIDE_TOC.map(t => t.id);
      const scrollY = window.scrollY + 140;
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= scrollY) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', handler);
    handler();
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <>
      <Nav current="guide" />
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '40px 24px 24px' }}>
          <div className="hero-eyebrow"><span className="accent">GUIDE</span> · Pine Script · Updated 2026</div>
          <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', margin: 0, letterSpacing: '-0.02em', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span className="hero-logo-mark" role="img" aria-label="GHOST"></span>
            <span>Guide</span>
          </h1>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, maxWidth: 700, margin: '14px 0 0' }}>
            A confluence-based Trading Framework for TradingView. Read the chart, wait for the stack to align, take the trade — or step aside.
          </p>
        </div>
      </section>

      <div className="doc-layout">
        <Toc active={active} />
        <article className="doc-content">

          <div className="callout warn">
            <span className="callout-tag">⚠ Educational tool only</span>
            <p>GHOST is a visual decision-support indicator, not a trading system or financial adviser. All signals are derived from historical price data. Past performance does not guarantee future results. Trading involves substantial risk, including the possible loss of all capital. You are solely responsible for your own trading decisions.</p>
          </div>

          {/* 01 SETUP */}
          <h2 id="setup"><span className="num">01 / 08</span>Quick Setup</h2>
          <p>Three steps to get from blank chart to live indicator.</p>

          <h3>Add Ghost to Your Chart</h3>
          <p>Open the GHOST script page on TradingView at <a href="https://www.tradingview.com/script/cpnTMAyd-Ghost/" target="_blank" rel="noopener noreferrer">tradingview.com/script/cpnTMAyd-Ghost</a>, then either click <em>Add to favorites</em> (so it's available from your indicator list on any chart) or hit <em>Use on chart</em> directly to load it onto your current chart.</p>

          <h3>Accept the Disclaimer to Enable</h3>
          <p>By default GHOST loads blank — only the dashboard renders, showing a red OFF status with the message <code>ACCEPT DISCLAIMER TO ENABLE</code>. Open the indicator settings (gear icon), find the ⚙ Setup section, and check the box marked <em>"I have Read &amp; Accept the Disclaimer."</em></p>

          <div className="callout">
            <span className="callout-tag">Why the Gate Exists</span>
            <p>GHOST is a decision-support tool, not a trading system. The disclaimer makes that explicit before anything renders.</p>
          </div>

          <h3>Pick Your Modules</h3>
          <p>In the 🧩 Modules settings group, toggle each major feature on or off. Defaults are sensible for most traders:</p>
          <ul>
            <li><strong>Chop Zones</strong> (default ON): flags no-trade ranges where signals are unreliable</li>
            <li><strong>Supply/Demand</strong> (default ON): marks swing-pivot liquidity levels</li>
            <li><strong>Reversal Signals</strong> (default OFF): swing-structure classified reversal markers</li>
            <li><strong>👻 Ghost Signals</strong> (default OFF): independent 5-8-13 SMA ribbon signal layer — B+ / S+ capsules</li>
            <li><strong>🔒 Session Lockout</strong> (default OFF): suppresses signals during low-quality session windows</li>
            <li><strong>🎓 Tutorial Mode</strong> (default OFF): live confluence walkthrough with pattern detection</li>
          </ul>

          {/* 02 PLAYBOOK */}
          <h2 id="playbook"><span className="num">02 / 08</span>The Confluence Playbook</h2>
          <p>GHOST is built around one idea: <strong>one signal is noise; multiple signals aligning is signal.</strong> The main dashboard shows you — at a glance — whether the conditions you trade in are actually present. If the stack doesn't align, you don't take the trade. The best edge is often the trade you didn't take.</p>

          <h3>Read the Dashboard, Top to Bottom</h3>
          <ul>
            <li><strong>Push</strong> — Short-term trend from the EMA ribbon. Up arrow = fast EMA above slow. This is your directional bias.</li>
            <li><strong>Score</strong> — Multi-period Donchian agreement, 0/10 to 10/10. <code>≥ 6/10</code> needed for a valid setup; <code>≥ 8/10</code> is strong confluence.</li>
            <li><strong>Status</strong> — TRENDING, CHOP, or 🔒 LOCKOUT. CHOP or LOCKOUT = take no new trades. Trending = green light to look for entries.</li>
            <li><strong>Signal</strong> — The current trigger: BUY, SELL, Buy Setup, Sell Setup, NO TRADE ✕, or the active session reason during a lockout.</li>
          </ul>

          <h3>Run the Confluence Checklist Before You Click Anything</h3>
          <p>The BUY / SELL label is the entry trigger — but it alone isn't enough. All of the following must be true:</p>
          <div className="callout">
            <span className="callout-tag">Confluence Checklist — All Must Align</span>
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              <li>Direction agrees: Push and Score (≥ 6/10) both point the same way as the trigger</li>
              <li>Status is TRENDING: not CHOP, not 🔒 LOCKOUT</li>
              <li>No active Lockout: the Status cell does not show 🔒 LOCKOUT</li>
              <li>Trigger is clean: the label shows BUY or SELL, not a gray ✕</li>
              <li>Bias confirmed by structure: for longs, price above demand. For shorts, the inverse.</li>
            </ul>
          </div>

          <div className="callout bad">
            <span className="callout-tag">Auto-Veto — Any of These = No Trade</span>
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              <li>Signal cell shows ✕ NO TRADE for any reason</li>
              <li>Status reads CHOP or 🔒 LOCKOUT</li>
              <li>Score is below 4/10 (timeframes disagree)</li>
              <li>Push and Score point in opposite directions</li>
            </ul>
          </div>

          <h3>Place the Entry</h3>
          <p>If the stack aligns, enter at the close of the trigger bar — or use a stop-limit just past the bar's high (long) / low (short) for confirmation. GHOST gives you the signal, not the execution.</p>

          <h3>Set TP From the Projected Line</h3>
          <p>The moment the trigger fires, GHOST draws a horizontal dotted line at entry ± 2× ATR with a floating tag showing the exact target price. When price reaches the line, a yellow TP label fires and the line auto-deletes. That's your exit.</p>

          <h3>Manage the Trade</h3>
          <p>GHOST doesn't manage stops or trail anything — that's intentional. Use your own risk-management approach. Watch the dashboard while in the trade. If Status flips to CHOP or the Score drops sharply, the confluence is breaking down — consider tightening or exiting.</p>

          <h3>Use Reversal Signals as a Tape-Reading Aid</h3>
          <p>Reversal markers aren't entries on their own. They mark structural swing pivots — places where the market has actually shifted from the prior swing.</p>
          <ul>
            <li><strong>HH</strong> — Higher High → bearish reversal candidate. Top of an uptrend leg.</li>
            <li><strong>LH</strong> — Lower High → bearish reversal candidate. Failed retest of a prior high.</li>
            <li><strong>LL</strong> — Lower Low → bullish reversal candidate. Bottom of a downtrend leg.</li>
            <li><strong>HL</strong> — Higher Low → bullish reversal candidate. Higher base than the prior low.</li>
          </ul>

          <h3>Ghost Signals Are Separate</h3>
          <p>If Ghost Signals is enabled, you'll see B+ and S+ capsules on the chart. These are a separate signal layer — they do not pass through the confluence checklist above. They have their own logic (5-8-13 SMA ribbon) and can fire when the main stack disagrees. Read them independently.</p>

          <h3>A Note on Patience</h3>
          <p>Most of the time, the confluence stack won't align. That's the indicator working as intended. GHOST is biased toward fewer, higher-quality signals. If you find yourself overriding the No-Trade ✕ or trading inside Lockout windows regularly, you're using the tool against itself.</p>

          {/* 03 MODULES */}
          <h2 id="modules"><span className="num">03 / 08</span>Module Reference</h2>
          <p>Each module is independently toggleable from the 🧩 Modules settings group.</p>

          <h3>Chop Zones — Default ON</h3>
          <p>Detects compressed price action using ATR — when the recent N-bar range divided by ATR drops below a threshold, the script draws a yellow translucent box marking the chop zone. Combined with the No-Trade ✕ toggle, any BUY/SELL signal fired inside an active chop zone is automatically flagged as untradeable. When Session Lockout is active and a chop box overlaps a lockout window, the box recolors to the lockout color.</p>

          <h3>Supply/Demand — Default ON</h3>
          <p>Marks recent swing highs (supply / sellside liquidity) and swing lows (demand / buyside liquidity) with horizontal lines and price tags. When multiple pivots cluster within ATR-defined tolerance, they merge into a single stronger level shown with a <code>×N</code> multiplier. Levels auto-delete when swept by price; levels inside lockout windows inherit the lockout color.</p>

          <h3>Reversal Signals — Default OFF</h3>
          <p>Marks confirmed swing pivots — but only when they qualify as a meaningful structure event. Each confirmed pivot is compared against the previous swing of the same type and classified as one of four states (HH, LH, LL, HL).</p>
          <p><strong>Auto Sensitivity by Timeframe.</strong> Reversal Sensitivity adapts automatically to the chart's timeframe — no manual tuning needed:</p>
          <ul>
            <li>1s – 15s charts → 18 (very strict — second bars are noisy)</li>
            <li>16s – 1m charts → 10 (strict)</li>
            <li>2m and above → 5 (balanced)</li>
          </ul>
          <p><strong>Reversal Style.</strong> <em>Volume:</em> circles sized by how violently price reversed off the pivot (normalized by ATR). Five tiers — tiny (&lt;1× ATR) through huge (&gt;4× ATR). <em>Tag:</em> a small "R" label — bearish above the bar, bullish below.</p>
          <p><strong>Reversal Mode.</strong> <em>Confirmed Only</em> (default) — markers appear after the pivot confirms, lagging real time by the sensitivity window. <em>Real-Time + Confirmed</em> — adds hollow rings (~0.4× ATR above/below the bar) on bars that look like reversals.</p>
          <p><strong>Lockout Color Inheritance.</strong> Reversal markers whose pivot bar falls inside a lockout window automatically render in the lockout color (at the same opacity as the normal Reversal Color), so they visually register as "detected during a suppressed window."</p>

          <h3>👻 Ghost Signals — Default OFF</h3>
          <p>A parallel signal layer based on a 5-8-13 SMA ribbon. Renders B+ capsules below the bar on bullish entries and S+ capsules above on bearish entries.</p>
          <div className="callout bad">
            <span className="callout-tag">Independent of the Confluence Stack</span>
            <p>B+ / S+ do not consult Push, Score, CHOP, or No-Trade ✕. Read them on their own merits. Inside a lockout window, all Ghost Signal visuals inherit the lockout color.</p>
          </div>
          <p><strong>Signal logic — three conditions must align:</strong> ribbon alignment (fast &gt; mid &gt; slow for bullish, inverse for bearish), confirmation sustained for the preset's window, and price within the preset's ATR multiple of the fast or mid SMA.</p>
          <p><strong>Preset Mode.</strong> <em>Auto:</em> ≤3m → Scalp · ≤15m → Intraday · ≤4H → Swing · &gt;4H → Macro. <em>Advanced</em> (default): 1/7/9 SMAs, 1.1× ATR proximity, 3 confirmation bars.</p>
          <p><strong>Alerts.</strong> Four alert conditions available: Ghost Signals — B+, Ghost Signals — S+, Ghost Signals — Long Exit, Ghost Signals — Short Exit.</p>

          <h3>Visualization — EMA Ribbon Shadow (Always On)</h3>
          <p>Tints the EMA ribbon fill based on multi-period Donchian confluence — green in an uptrend, red in a downtrend. The deeper the tint, the more timeframe periods agree on direction. Inside a lockout window the ribbon overrides to the lockout fill color.</p>

          {/* 04 DISPLAY */}
          <h2 id="display"><span className="num">04 / 08</span>Display Toggles</h2>
          <p>Controls for what shows on the chart and how it looks. None of these change the underlying signal logic — they only affect rendering.</p>
          <ul>
            <li><strong>Trend Markers</strong> — green/red triangles at top/bottom of every bar reflecting the EMA ribbon direction. Inside a lockout window they swap to <strong>squares</strong> in the lockout color — a universal stop symbol signaling no entry.</li>
            <li><strong>Buy / Sell Labels</strong> — the BUY and SELL labels that print on entry triggers. Inside a lockout window, signals that would have fired instead render in the lockout color so you can see what the indicator detected without acting on it.</li>
            <li><strong>Confirmed Signals Only</strong> — when ON, signals only fire on closed bars. Use ON for backtests/journaling; OFF for real-time entry.</li>
            <li><strong>No-Trade ✕</strong> — BUY/SELL signals inside chop or against trend become gray ✕ marks instead.</li>
            <li><strong>Take Profit Signals</strong> — master toggle for the TP line, price tag, and TP-hit label. Target fixed at 2× ATR.</li>
            <li><strong>TP Tag Detail</strong> — Full ("TP 2× ATR │ 4647.0") or Compact (just "TP").</li>
            <li><strong>Buy / Sell Label Style</strong> — separate color pickers for Buy / Sell background and text. Label Size: Tiny → Huge.</li>
          </ul>

          {/* 05 DASHBOARD */}
          <h2 id="dashboard"><span className="num">05 / 08</span>The Dashboard &amp; Tutorial</h2>
          <p>The live status panel, pinned to a screen corner. Always renders so you can see at a glance whether the confluence stack is aligned.</p>

          <h3>Bullish Stack — Green Light</h3>
          <Dashboard push="UP" score={{ value: 9, dir: 'UP' }} status="TRENDING" signal="BUY" />
          <p style={{ marginTop: 12 }}>Bullish EMA push, near-perfect multi-period agreement, no chop, and a fresh entry trigger. That's a green light.</p>

          <h3>Chop / No Entry — Stand Down</h3>
          <Dashboard push="UP" score={{ value: 3 }} status="CHOP" signal="NO_TRADE" />
          <p style={{ marginTop: 12 }}>Push says up but the timeframes don't agree, and a chop zone is active — so any entry trigger that fires here gets converted to ✕ NO TRADE.</p>

          <h3>Lockout Active — Stand Down</h3>
          <Dashboard push="UP" score={{ value: 8, dir: 'UP' }} status="LOCKOUT" signal="LOCKOUT_REASON" signalText="NY Open Sweep" />
          <p style={{ marginTop: 12 }}>A Session Lockout window is active. The Status cell shows 🔒 LOCKOUT and the Signal cell shows the reason. All entry signals are suppressed at their source — even if Push, Score, and Bias agree.</p>

          <h3>Customizing the Dashboard</h3>
          <ul>
            <li><strong>Show Dashboard</strong> — master toggle</li>
            <li><strong>Layout</strong> — Horizontal (default) or Vertical (stacked label-value rows)</li>
            <li><strong>Position</strong> — six corner options. Default Top Right.</li>
            <li><strong>Text Size</strong> — Tiny / Small / Normal / Large</li>
          </ul>

          <h3>Tutorial Mode — the Second Dashboard</h3>
          <p>An optional secondary dashboard that walks you through the confluence stack with live, contextual explanations, candle type identification, and chart pattern detection. Each row reads one layer of the stack and is color-coded — green ✓ = condition met, red ✕ = not met, yellow ⚠ = partial, gray — = neutral or module disabled.</p>
          <ul>
            <li><strong>Row 1 — Push.</strong> EMA ribbon direction. Bullish if fast above slow; bearish if below.</li>
            <li><strong>Row 2 — Score.</strong> Donchian score. ✓ when ≥ threshold (default 6/10).</li>
            <li><strong>Row 3 — Status.</strong> Chop Zone filter. ✓ trending; ✕ in active chop zone.</li>
            <li><strong>Row 4 — Bias.</strong> Supply/Demand levels. ✓ when price is above nearest demand (long) or below nearest supply (short).</li>
            <li><strong>Row 5 — Trigger.</strong> Current signal. ✓ fresh BUY/SELL; ⚠ pullback setup; ✕ no trigger.</li>
            <li><strong>Row 6 — Pattern.</strong> Always-visible candle type and chart pattern. <strong>Never overwritten</strong> by higher-priority signals.</li>
            <li><strong>Row 7 — Context.</strong> Optional context message (Table Row mode). Priority-based — highest urgency wins.</li>
          </ul>

          <h3>Pattern Detection</h3>
          <p>The Pattern row (and the Floating Label's second line) detects 13 candle types and chart patterns in real time:</p>
          <p><strong>Candle types:</strong> 📊 Doji · 🔨 Hammer · 🌠 Shooting Star · 💚 Bullish Marubozu · ❤️ Bearish Marubozu · 📦 Inside Bar · ⚡ Outside Bar.</p>
          <p><strong>Multi-bar chart patterns:</strong> 🚩 Bull Flag · 🚩 Bear Flag · W Double Bottom · M Double Top · ↑ Inv. Head &amp; Shoulders · ↓ Head &amp; Shoulders.</p>
          <p>Priority order: chart patterns (H&amp;S, flags) overwrite candle types. But the Pattern row is <em>always</em> independent — even when "In Trade" or a BUY signal overwrites the Context Message, the Pattern row stays untouched.</p>

          <div className="callout">
            <span className="callout-tag">Floating Label — Two Lines</span>
            <p>When Context Message is set to <em>Floating Label</em>, the label above the current bar shows two lines: the context message (top) and the pattern detection (bottom). The pattern line is always present regardless of what the context message says.</p>
          </div>

          <h3>Chart Legend</h3>
          <p>An optional reference table pinned to any corner of the chart showing what each on-chart symbol means. Context-sensitive — only shows entries for modules currently enabled, including a dedicated Lockout section when Session Lockout is on.</p>
          <ul>
            <li><strong>Show Chart Legend</strong> — master toggle (default OFF)</li>
            <li><strong>Legend Position</strong> — six corners. Default Bottom Right.</li>
            <li><strong>Legend Text Size</strong> — Tiny (default) → Large.</li>
          </ul>

          {/* 06 SESSION LOCKOUT */}
          <h2 id="lockout"><span className="num">06 / 08</span>Session Lockout</h2>
          <p>Session Lockout is a hard signal suppression system that identifies windows when trading conditions are poor — either because volume is too thin to trust signals, or because algorithmic liquidity sweeps dominate price action before real direction reveals. Default <strong>OFF</strong>; opt-in from the 🔒 Session Lockout settings group.</p>

          <div className="callout warn">
            <span className="callout-tag">What happens inside a lockout window</span>
            <p>Every signal source goes silent: BUY/SELL labels, TP lines, alerts. The dashboard Status cell shows <strong>🔒 LOCKOUT</strong>. A colored box covers the lockout bars on the chart with a label explaining the session type and timing. Candles overlay with an intensity gradient. Suppressed signals render in the lockout color so you can see what would have fired.</p>
          </div>

          <h3>Dead Zones — Thin Tape, Signals Are Noise</h3>
          <p>Three windows where institutional volume has dried up and price action is mostly random noise:</p>
          <ul>
            <li><strong>🌙 Asia Dead Zone</strong> — 1:00–5:00 PM PT. Lowest volume of the 24-hour cycle. Between the NY close and real Asian overnight flow.</li>
            <li><strong>🍽️ NY Lunch</strong> — 9:00–10:30 AM PT. Institutional desks step away. Directional moves stall and reverse unpredictably.</li>
            <li><strong>☕ London Lunch</strong> — 4:00–5:00 AM PT. Same pattern, London session. Volume drops; low-conviction tape.</li>
          </ul>

          <h3>Sweep Windows — Liquidity Hunts Before Real Direction</h3>
          <p>The first 60 minutes of each major session open. During these windows, algorithmic stop-hunting dominates — price spikes through the prior session's range highs/lows to collect liquidity before the real directional move begins.</p>
          <ul>
            <li><strong>🌍 London Open Sweep</strong> — 12:00–1:00 AM PT. Algorithms hunt the Asian session range.</li>
            <li><strong>🔀 London → NY Transition</strong> — 5:00–6:00 AM PT. London positions unwind as NY opens. Liquidity grab before real NY direction.</li>
            <li><strong>🗽 NY Open Sweep</strong> — 6:30–7:30 AM PT. Algorithms hunt the overnight range. Real trend reveals after 7:30 AM PT.</li>
          </ul>

          <div className="callout">
            <span className="callout-tag">Why "sweep" windows matter</span>
            <p>Retail traders who enter during the first 30–60 minutes of a major session open often get stopped out by the initial range expansion — which is by design. The institutions that create real directional flow typically wait until the sweep is complete. Lockout keeps you out of that trap.</p>
          </div>

          <h3>Lockout Box Labels</h3>
          <p>Each lockout window draws a colored box on the chart with a label showing the session emoji + name, a one-line explanation, and Start/End times. The End time updates every bar so you can see how far into the window you are. Session times display in your chart's own timezone automatically — no manual timezone setup needed.</p>

          <h3>Lockout Candle Gradient</h3>
          <p>Inside a lockout window, native candles are overlaid with colored candles driven by the MACD histogram absolute value, normalized over a 20-bar rolling maximum. The color intensity reflects momentum strength — near-black for weak MACD, pure white for the strongest momentum. Dark candles = quiet, low-momentum consolidation. White candles = explosive momentum spike. This lets you see consolidation building toward a breakout even while signals are suppressed — the gradient is your "pressure gauge" for when the lockout ends.</p>

          <h3>Lockout Colors</h3>
          <p>Found at the bottom of the 🔒 Session Lockout settings group. Two controls on the same row:</p>
          <ul>
            <li><strong>Lockout Color</strong> — base color for all lockout visuals: candle overlay, EMA ribbon lines, trend markers (squares), box border, suppressed BUY/SELL label backgrounds. Default: dark indigo <code>#311b92</code>.</li>
            <li><strong>Fill</strong> — background fill for the lockout box and EMA ribbon fill. Default: dark gray at 80% transparency so candles underneath remain visible.</li>
          </ul>
          <p>Changing Lockout Color updates every lockout visual simultaneously — candles, boxes, markers, labels all stay in sync.</p>

          <h3>Suppressed Signals</h3>
          <p>When a BUY or SELL signal would have fired inside a lockout window, it renders as a label in the lockout color instead of being hidden entirely. This lets you study what the indicator detected without the visual being actionable — the color difference makes clear it's suppressed.</p>

          <div className="callout">
            <span className="callout-tag">All session times are America/Los_Angeles (PT)</span>
            <p>Dead Zone and Sweep Window definitions are in Pacific Time because market session boundaries are permanently defined in PT (NY Open is always 6:30 AM PT). Your chart's own timezone is used for label timestamps — so the Start/End times in the lockout box automatically display in whatever timezone you have your chart set to.</p>
          </div>

          {/* 07 LIMITS */}
          <h2 id="limits"><span className="num">07 / 08</span>Honest Limitations</h2>
          <p>Every indicator has them. Better to know upfront than discover under fire.</p>

          <div className="callout warn">
            <span className="callout-tag">Pivot Detection Has Structural Lag</span>
            <p>Reversal markers in Confirmed Only mode appear several bars after the actual swing — typically 5 bars at default sensitivity. The marker is drawn retroactively at the correct bar, but you can't see it on the live edge.</p>
          </div>

          <div className="callout warn">
            <span className="callout-tag">First Pivot of Each Type Produces No Marker</span>
            <p>The HH/HL/LH/LL classification compares each confirmed pivot against the previous swing of the same type. On a fresh chart, the first pivot has nothing to compare against.</p>
          </div>

          <div className="callout warn">
            <span className="callout-tag">Pattern Detection Is Approximate</span>
            <p>The chart patterns (H&amp;S, flags, double tops/bottoms) use simplified heuristics based on recent high/low arrays and ATR tolerances. They fire in real time, which means false positives are common. Treat pattern detections as a helpful structural hint — not a tradeable signal on their own.</p>
          </div>

          <div className="callout warn">
            <span className="callout-tag">Lockout Windows Are Fixed, Not Adaptive</span>
            <p>The Dead Zone and Sweep Window times are hard-coded based on typical market microstructure for US equity futures and major forex sessions. They may not reflect your specific instrument or unusual session behavior (holidays, early closes, major macro events). Disable Lockout on days where sessions behave differently.</p>
          </div>

          <div className="callout bad">
            <span className="callout-tag">Ghost Signals Ignore the Confluence Stack</span>
            <p>B+ / S+ capsules can fire during chop, against trend, or in any context the flagship BUY/SELL would auto-veto. That's by design — they're a parallel signal layer.</p>
          </div>

          <div className="callout warn">
            <span className="callout-tag">The Dashboard Reflects the Past, Not the Future</span>
            <p>"Score 9/10" doesn't mean the trend will continue. It means it has been strong recently. Trends end. Confluence breaks down.</p>
          </div>

          <div className="callout">
            <span className="callout-tag">No Backtest, No Statistics, No Win Rate</span>
            <p>GHOST is a visual aid for discretionary trading. There's no built-in backtest — you'd need to journal your own results to know whether the framework works for your market and timeframe.</p>
          </div>

          {/* 08 TROUBLESHOOTING */}
          <h2 id="trouble"><span className="num">08 / 08</span>Troubleshooting</h2>
          <ul>
            <li><strong>Nothing renders.</strong> Open ⚙ Setup → check the disclaimer box.</li>
            <li><strong>Status shows 🔒 LOCKOUT and no signals fire.</strong> A Session Lockout window is active. Check which window in the on-chart box label. The lockout releases automatically when the window ends. To opt out, disable 🔒 Session Lockout.</li>
            <li><strong>Trend markers are squares instead of triangles.</strong> You're inside a Session Lockout window. Markers swap to squares in the lockout color as a visual warning. They revert to triangles when the window ends.</li>
            <li><strong>Lockout box shows wrong timezone.</strong> The label uses your chart's exchange timezone automatically. Times inside the box should match the timestamps shown at the bottom of your TradingView chart.</li>
            <li><strong>Pattern row shows "No Pattern Detected".</strong> The current bar doesn't meet any of the 13 candle/pattern criteria. Normal for most bars.</li>
            <li><strong>Floating label only shows one line.</strong> Context Message must be set to "Floating Label" in Tutorial Mode settings, and Tutorial Mode itself must be ON.</li>
            <li><strong>Too many reversal markers.</strong> Switch Reversal Style to Tag for a lighter footprint.</li>
            <li><strong>Reversal markers never appear.</strong> Check Reversal Signals is ON. Chart needs enough bars for two confirmed pivots of each type.</li>
            <li><strong>Signals flicker intra-bar.</strong> Enable Confirmed Signals Only.</li>
            <li><strong>Too many BUY/SELL labels in chop.</strong> Enable No-Trade ✕.</li>
            <li><strong>B+ / S+ capsules don't appear.</strong> Show Ghost Signals defaults OFF — enable it. Also check disclaimer accepted.</li>
            <li><strong>Tutorial Mode doesn't appear.</strong> Tutorial Mode defaults OFF — enable it.</li>
            <li><strong>Tutorial Bias row shows "—".</strong> Supply/Demand is off, or no qualifying levels exist yet.</li>
            <li><strong>Dashboard is too big / small.</strong> 📊 Dashboard → Text Size. Tutorial Mode has its own.</li>
          </ul>

          <div style={{ marginTop: 60, padding: '32px 0', borderTop: '1px solid var(--line)', color: 'var(--ink-mute)', fontSize: 12.5, fontFamily: 'var(--mono)', letterSpacing: '0.04em', lineHeight: 1.7 }}>
            <strong style={{ color: 'var(--ink-2)' }}>DISCLAIMER.</strong> This indicator and accompanying documentation are provided strictly for educational and informational purposes. Nothing produced by GHOST constitutes investment, trading, financial, legal, or tax advice. Trading involves substantial risk of loss. Past performance is not indicative of future results. By using GHOST you acknowledge that all trading decisions are yours alone, made entirely at your own risk.
          </div>

        </article>
      </div>

      <Footer />
    </>
  );
}

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