const INDICATOR_CHART_SLIDES = [
  { src: 'chart-1.png', alt: 'Ghost on chart — full module set, dashboard + tutorial table + chart legend' },
  { src: 'chart-2.png', alt: 'Ghost on chart — supply/demand zones, signals, and trend ribbon' },
  { src: 'chart-3.png', alt: 'Ghost on chart — clean view with EMA ribbon, BUY/SELL signals, and reversal pivots' },
];

function IndicatorChartSlideshow() {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % INDICATOR_CHART_SLIDES.length), 4500);
    return () => clearInterval(t);
  }, [paused]);
  return (
    <div className="chart-slideshow"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}>
      <div className="chart-slideshow-eyebrow">
        <span className="accent">·</span> Live On Chart · TradingView
      </div>
      <div className="chart-slideshow-frame">
        {INDICATOR_CHART_SLIDES.map((s, i) => (
          <img key={s.src}
               src={s.src}
               alt={s.alt}
               className={'chart-slide' + (i === idx ? ' is-active' : '')}
               loading="lazy" />
        ))}
      </div>
      <div className="chart-slideshow-dots">
        {INDICATOR_CHART_SLIDES.map((_, i) => (
          <button key={i}
                  type="button"
                  aria-label={'View chart ' + (i + 1)}
                  className={'chart-dot' + (i === idx ? ' is-active' : '')}
                  onClick={() => setIdx(i)} />
        ))}
      </div>
    </div>
  );
}

const CONFLUENCE_SLIDES = [
  { src: 'confluence-1.png', alt: 'NQ 5M chart — chop zones, No-Trade ✕ filters, and a volume-based reversal bubble at the swing low; signals only fire after the stack clears.' },
  { src: 'confluence-2.png', alt: 'NQ 5M zoomed-in view — the moment all three confluences align: chop ends, ✕ veto lifts, large volume bubble prints at the demand pivot, BUY signal triggers.' },
];

function ConfluenceSlideshow() {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % CONFLUENCE_SLIDES.length), 5000);
    return () => clearInterval(t);
  }, [paused]);
  return (
    <div className="chart-slideshow"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}>
      <div className="chart-slideshow-eyebrow">
        <span className="accent">·</span> NQ1! · 5M · The Stack Aligns
      </div>
      <div className="chart-slideshow-frame">
        {CONFLUENCE_SLIDES.map((s, i) => (
          <img key={s.src}
               src={s.src}
               alt={s.alt}
               className={'chart-slide' + (i === idx ? ' is-active' : '')}
               loading="lazy" />
        ))}
      </div>
      <div className="chart-slideshow-dots">
        {CONFLUENCE_SLIDES.map((_, i) => (
          <button key={i}
                  type="button"
                  aria-label={'View chart ' + (i + 1)}
                  className={'chart-dot' + (i === idx ? ' is-active' : '')}
                  onClick={() => setIdx(i)} />
        ))}
      </div>
    </div>
  );
}

function Indicator() {
  return (
    <>
      <Nav current="indicator" />
      <section className="indicator-hero">
        <div>
          <div className="hero-eyebrow"><span className="accent">INDICATOR</span> · TradingView · Pine Script v6</div>
          <h1 style={{ fontSize: 'clamp(32px, 5vw, 52px)', margin: '0 0 20px', letterSpacing: '-0.02em', lineHeight: 1, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span className="hero-logo-mark" role="img" aria-label="GHOST"></span>
            <span>Runs on TradingView.</span>
          </h1>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.6, margin: '0 0 28px' }}>
            One indicator. Seven independent modules. A live confluence dashboard pinned
            to your chart, a structural pivot classifier, an independent SMA-ribbon
            signal layer, swing-pivot liquidity levels, ATR chop detection, a session
            lockout system that silences signals during low-quality windows, an
            optional tutorial walkthrough with pattern detection, and a context-sensitive
            chart legend.
          </p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" href="pricing.html">Get Access →</a>
            <a className="btn btn-ghost" href="guide.html">Read the Guide</a>
          </div>
        </div>
        <div className="chart-mock">
          <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--ink-mute)', marginBottom: 14, fontSize: 10, letterSpacing: '0.16em' }}>
            <span>BTCUSD · 5M · BINANCE</span>
            <span style={{ color: 'var(--good)' }}>● LIVE</span>
          </div>
          <Dashboard push="UP" score={{ value: 9, dir: 'UP' }} status="TRENDING" signal="BUY" />
          <div style={{ marginTop: 18, padding: 14, border: '1px solid var(--line)', borderRadius: 4, fontSize: 11, color: 'var(--ink-3)' }}>
            <div style={{ color: 'var(--orange)', fontSize: 10, letterSpacing: '0.18em', marginBottom: 8 }}>Chart Legend</div>
            <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: '6px 14px' }}>
              <span style={{ color: 'var(--good)' }}>▲</span><span>BUY Entry Signal</span>
              <span style={{ color: 'var(--bad)' }}>▼</span><span>SELL Entry Signal</span>
              <span>◆</span><span>TP Line — 2× ATR Target</span>
              <span>▢</span><span>Chop Zone — Stand Down</span>
              <span>━</span><span>Supply / Demand Level</span>
              <span style={{ color: 'var(--good)' }}>B+</span><span>Ghost Signal — Bullish</span>
              <span style={{ color: 'var(--bad)' }}>S+</span><span>Ghost Signal — Bearish</span>
            </div>
          </div>
        </div>
      </section>

      <section className="chart-slideshow-section">
        <IndicatorChartSlideshow />
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·</span> What It Does</div>
        <h2 className="section-title">A Confluence Framework, Not a Black-Box Bot.</h2>
        <p className="section-deck">
          GHOST reads historical price data and visualises patterns. It does not
          predict the future. It does not know your situation. What it does, well, is
          give you a clear, top-to-bottom read of the market state — so you can
          decide whether the conditions you trade in are actually present.
        </p>
        <div className="feature-grid">
          <div className="feature"><div className="ico">Read</div><h4>The Dashboard</h4><p>Four cells: Push, Score, Status, Signal. Always renders. Tells you at a glance whether the stack is aligned.</p></div>
          <div className="feature"><div className="ico">Filter</div><h4>Chop Zones</h4><p>ATR-based range detection. Yellow boxes mark no-trade ranges. Combined with No-Trade ✕, signals fired in chop become untradeable automatically.</p></div>
          <div className="feature"><div className="ico">Context</div><h4>Supply / Demand</h4><p>Swing-pivot liquidity levels. Auto-clusters within ATR tolerance. Auto-deletes when swept. Targets, stop placement, structural bias.</p></div>
          <div className="feature"><div className="ico">Structure</div><h4>Reversal Signals</h4><p>HH / LH / LL / HL classification. Auto-sensitivity by timeframe. Volume circles or Tag style. Confirmed-only or with real-time tentatives.</p></div>
          <div className="feature"><div className="ico">Suppress</div><h4>🔒 Session Lockout</h4><p>Hard signal suppression during low-quality session windows. Three Dead Zones (thin tape) and three Sweep Windows (algorithmic liquidity hunts). Inside a window, BUY/SELL/TP/alerts all go silent, candles overlay with a MACD-intensity gradient.</p></div>
          <div className="feature"><div className="ico">Parallel</div><h4>👻 Ghost Signals</h4><p>Independent 5-8-13 SMA ribbon layer. Three conditions must align: ribbon alignment, confirmation, ATR proximity. Does not consult the confluence stack.</p></div>
          <div className="feature"><div className="ico">Learn</div><h4>Tutorial Mode + Chart Legend</h4><p>Optional second dashboard with live, contextual explanations of each stack layer. Plus a context-sensitive chart legend that adapts to your active modules.</p></div>
          <div className="feature"><div className="ico">Detect</div><h4>Candle &amp; Chart Patterns</h4><p>13 classifiers running live: Hammer, Shooting Star, Engulfing, Doji, Marubozu, Inside / Outside Bar plus structural patterns — Double Top / Bottom, Head &amp; Shoulders, Triangles, Wedges, Flags. Surfaced as a dedicated row in Tutorial Mode and a floating label on the most recent qualifying bar.</p></div>
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·</span> Spotlight · Pure Signal Entry</div>
        <h2 className="section-title">Three Filters. One Clean Trigger.</h2>
        <p className="section-deck">
          Chop Zones, the No-Trade <span style={{ color: 'var(--ink-2)' }}>✕</span> filter, and the volume-based Reversal Bubbles
          aren't separate features — they're a stacked filter chain. When all three
          align, what's left is the cleanest possible entry: a high-volume reversal
          at structure, breaking out of range, with no veto on the bar.
        </p>

        <div style={{ marginBottom: 28 }}>
          <ConfluenceSlideshow />
        </div>

        <div className="feature-grid">
          <div className="feature">
            <div className="ico">▢</div>
            <h4>Chop Zone — The Range</h4>
            <p>Yellow boxes mark ATR-compressed range. Tells you the market is consolidating. Any signal fired <em>inside</em> the box is automatically suspect — price is rotating, not trending.</p>
          </div>
          <div className="feature">
            <div className="ico">✕</div>
            <h4>No-Trade ✕ — The Veto</h4>
            <p>A gray ✕ stamps any BUY/SELL that fires while the stack disagrees — chop active, score too low, bias mismatched. The trigger renders so you can see it, but it's flagged untradeable at a glance.</p>
          </div>
          <div className="feature">
            <div className="ico">●</div>
            <h4>Volume Bubble — The Confirmation</h4>
            <p>Reversal pivots size by relative volume. Big bubbles = real participation at the level. Small bubbles = thin, ignorable. The bubble at the swing is your structural footprint.</p>
          </div>
          <div className="feature">
            <div className="ico">⛓</div>
            <h4>Stacked Means Pure</h4>
            <p>Chop ends → ✕ lifts → large volume bubble at the demand pivot → BUY fires clean. Three independent filters all pointing the same way. That's the entry.</p>
          </div>
        </div>

        <div className="callout" style={{ marginTop: 24 }}>
          <span className="callout-tag">Read the chart left-to-right</span>
          <p>The early bars are inside chop, vetoed by ✕. Price grinds sideways. A high-volume bubble prints at the demand pivot — the structural turn. Chop dissolves. The next BUY is clean: no ✕, fresh trigger, ribbon flipping green. That's not luck. That's three filters refusing to fire until the stack agrees.</p>
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent" style={{ color: '#b18cff' }}>·</span> <span style={{ color: '#b18cff' }}>Spotlight · Session Lockout</span></div>
        <h2 className="section-title">Some Sessions Should Not Be Traded.</h2>
        <p className="section-deck">
          Asia Dead Zone. NY Lunch. London Lunch. London Open sweep. NY Open sweep.
          Six windows where retail signal generators chew themselves to pieces.
          Lockout silences the indicator at the source — no BUY, no SELL, no TP, no
          alerts — and tints the candles so you can see why.
        </p>

        <div style={{ border: '1px solid var(--line-2)', background: 'var(--bg-1)', padding: 12, marginBottom: 28 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--ink-mute)', textTransform: 'uppercase', padding: '4px 6px 10px' }}>
            <span className="accent" style={{ color: 'var(--orange)', fontWeight: 700 }}>·</span> SPY · 3M · Asia Dead Zone Active
          </div>
          <img src="lockout-example.png"
               alt="GHOST Session Lockout active during the Asia Dead Zone — dashboard reads LOCKOUT, candles overlay with a purple gradient inside the window."
               style={{ display: 'block', width: '100%', height: 'auto' }}
               loading="lazy" />
        </div>

        <div className="feature-grid">
          <div className="feature">
            <div className="ico">🌙</div>
            <h4>Three Dead Zones</h4>
            <p>Asia, NY Lunch, London Lunch. Lowest-volume windows of the 24-hour cycle. Thin tape — most signals here are noise.</p>
          </div>
          <div className="feature">
            <div className="ico">⚡</div>
            <h4>Three Sweep Windows</h4>
            <p>London Open, London → NY Transition, NY Open. High-velocity liquidity hunts. Algos take both sides before committing direction.</p>
          </div>
          <div className="feature">
            <div className="ico">🎨</div>
            <h4>Candle Gradient</h4>
            <p>Purple inside Dead Zones, red inside Sweep Windows. MACD-style intensity — darker bars are where the algo is most aggressive.</p>
          </div>
          <div className="feature">
            <div className="ico">🔇</div>
            <h4>Hard Suppression</h4>
            <p>Inside a window, every signal layer goes silent at its source. No BUY / SELL labels, no TP lines, no alerts firing in your inbox.</p>
          </div>
          <div className="feature">
            <div className="ico">📋</div>
            <h4>Dashboard Telegraph</h4>
            <p>Status cell flips to <strong style={{ color: 'var(--orange)' }}>🔒 LOCKOUT</strong>. Signal cell names the active window so you know why the chart went quiet.</p>
          </div>
          <div className="feature">
            <div className="ico">⚙</div>
            <h4>Per-Window Toggles</h4>
            <p>Enable Lockout once, then choose which windows you respect. Trade the London Open if you specialize in it. Skip the rest.</p>
          </div>
          <div className="feature">
            <div className="ico">📊</div>
            <h4>Statistically Earned</h4>
            <p>The six windows aren't arbitrary clock times. They map to the lowest-quality session segments in real volume and follow-through data — the segments where momentum signals statistically fail.</p>
          </div>
          <div className="feature">
            <div className="ico">🧘</div>
            <h4>Forces Patience</h4>
            <p>Discipline isn't a willpower problem when the indicator literally won't show you a setup. The default state is <em>wait</em> — and you have to override it on purpose, not by accident.</p>
          </div>
        </div>

        <div className="callout" style={{ marginTop: 24 }}>
          <span className="callout-tag">Why it matters</span>
          <p>Most blown trades happen in the same six windows every day. Lockout removes the temptation to take them — no signal renders, no alert fires, the chart literally tells you to wait. The cleanest edge in trading is the one you skip.</p>
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·</span> How to Add It</div>
        <h2 className="section-title">Three Steps to Live on Your Chart.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
          <div className="feature">
            <div className="ico">01</div>
            <h4>Add to Your Chart</h4>
            <p>Open the GHOST script page on TradingView. Click <em>Add to favorites</em> or <em>Use on chart</em> directly. The script compiles and loads.</p>
          </div>
          <div className="feature">
            <div className="ico">02</div>
            <h4>Accept the Disclaimer</h4>
            <p>Open the indicator settings (gear icon), find the ⚙ Setup section, check the box marked <em>"I have Read & Accept the Disclaimer."</em> This unlocks all visual modules.</p>
          </div>
          <div className="feature">
            <div className="ico">03</div>
            <h4>Pick Your Modules</h4>
            <p>In the 🧩 Modules group, toggle each major feature on or off. Chop Zones and Supply/Demand default ON; Reversal Signals, Ghost Signals, Session Lockout, Tutorial Mode, and Chart Legend default OFF.</p>
          </div>
        </div>
        <div className="callout" style={{ marginTop: 28 }}>
          <span className="callout-tag">Built for traders who do the work</span>
          <p>GHOST gives you a framework, not a fantasy. No magic buy-now arrows, no &ldquo;guaranteed&rdquo; signals — just a clean, top-to-bottom read of the market state so <em>you</em> can call the shot. The disclaimer is there to set the standard before you ever click an arrow: this is a tool that sharpens your edge, not one that thinks for you.</p>
        </div>
      </section>

      <section className="section">
        <div className="cta-strip">
          <div>
            <h3>Ready to Run Ghost?</h3>
            <p>Pick a plan, complete checkout, drop your TradingView username — and Ghost loads on your chart.</p>
          </div>
          <a className="btn btn-primary" href="pricing.html">See Pricing & Plans →</a>
        </div>
      </section>

      <Footer />
    </>
  );
}

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