/* home.jsx — Site A homepage */

const STACK_ITEMS = [
  { num: '01', name: 'Push', desc: 'Short-term trend from the EMA ribbon. Up arrow = fast EMA above slow.', detail: 'This is your directional bias. Everything downstream — Score, Trigger, Bias — must agree with Push, or you have a stack disagreement.' },
  { num: '02', name: 'Score', desc: 'Multi-period Donchian agreement, 0/10 to 10/10.', detail: '≥ 6/10 needed for a valid setup. ≥ 8/10 is strong confluence. < 4/10 is auto-veto regardless of what else is on screen.' },
  { num: '03', name: 'Status', desc: 'TRENDING, CHOP, or 🔒 LOCKOUT. CHOP or LOCKOUT means take no new trades.', detail: 'A yellow box on the chart and CHOP in the dashboard means stand down. 🔒 LOCKOUT means a low-quality session window is active — every signal is suppressed at its source. Wait for the breakout or the lockout to end.work is biased toward fewer, higher-quality signals.' },
  { num: '04', name: 'Bias', desc: 'Structural confirmation: above demand for longs, below supply for shorts.', detail: 'Reads the Supply/Demand level arrays. Required for the Tutorial Bias row to evaluate. If the module is off, the row shows "—".' },
  { num: '05', name: 'Trigger', desc: 'The actual BUY / SELL label fired by an EMA cross.', detail: 'A clean BUY or SELL label is the entry trigger. A gray ✕ is auto-veto. A yellow ⚠ means a pullback setup is forming — wait for the cross.' },
];

function StackScroll() {
  const [active, setActive] = useS(0);
  const cur = STACK_ITEMS[active];
  return (
    <div className="stack-scroll">
      <div className="stack-list">
        {STACK_ITEMS.map((s, i) => (
          <div key={s.num}
               className={'stack-row' + (i === active ? ' active' : '')}
               onClick={() => setActive(i)}
               onMouseEnter={() => setActive(i)}>
            <div className="num">{s.num}</div>
            <div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="stack-side">
        <div className="num">{cur.num}</div>
        <h3>{cur.name}</h3>
        <p>{cur.desc}</p>
        <p style={{ color: 'var(--ink-3)', fontSize: 13.5, marginTop: 14 }}>
          {cur.detail}
        </p>
      </div>
    </div>
  );
}

const SCENES = [
  { label: 'Bullish stack',  push: 'UP',   score: { value: 9, dir: 'UP' },   status: 'TRENDING', signal: 'BUY',      caption: 'All five layers align — direction, score, status, bias, and trigger. Take the long.' },
  { label: 'Bearish stack',  push: 'DOWN', score: { value: 8, dir: 'DOWN' }, status: 'TRENDING', signal: 'SELL',     caption: 'Mirror of the bullish setup — same logic, opposite direction.' },
  { label: 'Chop / no trade',push: 'FLAT', score: { value: 4 },              status: 'CHOP',     signal: 'NO_TRADE', caption: 'Push is flat, score is weak, chop box active. Stand down and wait for breakout.' },
  { label: 'Push / Score disagree', push: 'UP', score: { value: 7, dir: 'DOWN' }, status: 'TRENDING', signal: 'BUY', caption: 'Push says up, Score says down — directional disagreement is auto-veto.' },
];

function HomeDemo() {
  const [i, setI] = useS(0);
  const s = SCENES[i];
  return (
    <div className="demo-card">
      <h3>Live Dashboard · Pick a Scenario</h3>
      <Dashboard push={s.push} score={s.score} status={s.status} signal={s.signal} />
      <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.55, minHeight: 48 }}>
        {s.caption}
      </p>
      <div className="demo-controls">
        {SCENES.map((sc, idx) => (
          <button key={idx}
            className={'demo-btn' + (idx === i ? ' active' : '')}
            onClick={() => setI(idx)}>{sc.label}</button>
        ))}
      </div>
    </div>
  );
}

const MODULES = [
  { meta: 'Module · default ON',  name: 'Chop Zones', body: 'No-trade range filter. Detects compressed price action via ATR — when the recent N-bar range divided by ATR drops below threshold, GHOST draws a yellow translucent box. Combined with No-Trade ✕, signals fired inside chop become untradeable. Inside a lockout window, chop boxes recolor to the lockout color.' },
  { meta: 'Module · default ON',  name: 'Supply / Demand', body: 'Marks recent swing highs (supply / sellside liquidity) and swing lows (demand / buyside liquidity) with horizontal lines and price tags. Multiple pivots within ATR-tolerance merge into a single stronger level (×N). Levels auto-delete when swept by price; levels inside lockout windows inherit the lockout color.' },
  { meta: 'Module · default OFF', name: 'Reversal Signals', body: 'Structure-classified swing markers — only when pivots qualify as a meaningful structure event (HH / LH / LL / HL). Auto-sensitivity by timeframe. Volume style sizes circles by ATR-normalized reversal magnitude (5 tiers); Tag style prints a small "R" label. Reversals inside a lockout window render in the lockout color.' },
  { meta: 'Module · default OFF', name: '👻 Ghost Signals', body: 'Independent Signal Generator. Renders B+ / S+ capsules on Bullish / Bearish entries. Three conditions must align: Ribbon Alignment, Confirmation Window & ATR Proximity. Independent of the confluence stack — does not consult Push, Score, CHOP, or No-Trade ✕. Inside a lockout window all Ghost Signal visuals inherit the lockout color.' },
  { meta: 'Module · default OFF', name: '🔒 Session Lockout', body: 'Hard signal suppression for low-quality session windows. Three Dead Zones (Asia, NY Lunch, London Lunch) and three Sweep Windows (London Open, London→NY Transition, NY Open) cover periods of thin tape or algorithmic liquidity hunts. Inside a window: BUY/SELL/TP/alerts go silent, the Status cell shows 🔒 LOCKOUT, candles overlay with a MACD-intensity gradient (dark→white).' },
  { meta: 'Module · default OFF', name: '🎓 Tutorial Mode', body: 'Optional secondary dashboard that walks you through the stack with live, contextual explanations. Reads each layer of the confluence stack and color-codes the result — green ✓, red ✕, yellow ⚠, gray —. Includes a Pattern row that detects 13 candle types and chart patterns (Doji, Hammer, Bull Flag, Head & Shoulders, etc.) and an optional Context Message with a 12-tier priority ladder.' },
  { meta: 'Module · default OFF', name: '🗺️ Chart Legend', body: 'Optional reference table pinned to a chart corner. Context-sensitive: only shows entries for modules currently enabled, including a dedicated Lockout section when Session Lockout is on. Adapts to your Reversal Style — shows Volume circles or Tag pills, never both.' },
];

function ModuleAccordion() {
  const [open, setOpen] = useS(0);
  return (
    <div className="accordion">
      {MODULES.map((m, i) => (
        <div key={i} className={'acc-item' + (i === open ? ' open' : '')}>
          <button className="acc-head" onClick={() => setOpen(o => o === i ? -1 : i)}>
            <div className="row">
              <span className="meta">{m.meta}</span>
              <span className="name">{m.name}</span>
            </div>
            <span className="acc-chev">›</span>
          </button>
          {i === open && (
            <div className="acc-body">
              <p>{m.body}</p>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function Home() {
  return (
    <>
      <Nav current="home" />

      {/* HERO */}
      <section className="hero">
        <div className="hero-eyebrow"><span className="accent">GHOST</span> · TradingView · Pine Script</div>
        <h1>Read the Chart.<br/>Wait for the <span className="em">Stack</span>.<br/>Take the Trade.</h1>
        <p className="hero-deck">
          GHOST is a confluence-based Trading Framework for TradingView. It reads the
          chart top to bottom and tells 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.
        </p>
        <div className="hero-cta-row">
          <a className="btn btn-primary" href="https://www.tradingview.com/script/cpnTMAyd-Ghost/" target="_blank" rel="noopener noreferrer">
            Add to TradingView →
          </a>
          <a className="btn btn-ghost" href="guide.html">Read the Guide</a>
          <a className="btn btn-ghost" href="pricing.html">Pricing & Plans</a>
        </div>
      </section>

      {/* LIVE DEMO */}
      <section className="section">
        <div className="section-eyebrow"><span className="accent">·01</span> · The Dashboard</div>
        <h2 className="section-title">A Four-Cell Read of the Entire Stack.</h2>
        <p className="section-deck">
          The live status panel pinned to a chart corner. Always renders so you can see at a glance whether the confluence stack is aligned. Click through the scenarios.
        </p>
        <div className="demo-wrap">
          <div className="demo-card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h3>What It Answers</h3>
            <ul style={{ paddingLeft: 18, color: 'var(--ink-2)', lineHeight: 1.7, margin: 0 }}>
              <li><strong>Push</strong> — short-term EMA direction</li>
              <li><strong>Score</strong> — Donchian agreement (0–10)</li>
              <li><strong>Status</strong> — Trending or Chop</li>
              <li><strong>Signal</strong> — BUY / SELL / Setup / ✕ NO TRADE</li>
            </ul>
            <p style={{ marginTop: 18, color: 'var(--ink-3)', fontSize: 13.5 }}>
              When all four agree and a fresh trigger fires, that's a green light. Anything else — auto-veto.
            </p>
          </div>
          <HomeDemo />
        </div>
      </section>

      {/* STACK */}
      <section className="section">
        <div className="section-eyebrow"><span className="accent">·02</span> · The Confluence Stack</div>
        <h2 className="section-title">One Signal Is Noise. Alignment Means Everything.</h2>
        <p className="section-deck">
          Five layers, top to bottom. Hover or click each row to read what it does and how it gates the trade.
        </p>
        <StackScroll />
      </section>

      {/* MODULES */}
      <section className="section">
        <div className="section-eyebrow"><span className="accent">·03</span> · Modules</div>
        <h2 className="section-title">Seven Independent Modules. Combine What Helps; Turn Off What Clutters.</h2>
        <div className="accordion-wrap" style={{ marginTop: 28 }}>
          <ModuleAccordion />
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section className="section">
        <div className="section-eyebrow"><span className="accent">·04</span> · Philosophy</div>
        <h2 className="section-title">Built Around Fewer, Higher-Quality Signals.</h2>
        <div className="feature-grid">
          <div className="feature">
            <div className="ico">Read</div>
            <h4>Top to Bottom, Every Time</h4>
            <p>Push → Score → Status → Bias → Trigger. The stack is the order GHOST wants you to read in. Each layer is a different question about the market.</p>
          </div>
          <div className="feature">
            <div className="ico">Wait</div>
            <h4>The Stack Must Align</h4>
            <p>Most of the time, it won't — and that's the indicator working as intended. The best edge is often the trade you didn't take.</p>
          </div>
          <div className="feature">
            <div className="ico">Decide</div>
            <h4>You Make the Call</h4>
            <p>GHOST is decision-support, not a trading system. It gives you the signal. You decide whether to act, manage your stops, and take the trade.</p>
          </div>
          <div className="feature">
            <div className="ico">Honest</div>
            <h4>No Backtest. No Win-Rate.</h4>
            <p>GHOST is a visual aid for discretionary traders. There's no built-in backtest, no win-rate statistic. You journal your own results.</p>
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section className="section">
        <div className="cta-strip">
          <div>
            <h3>Learn the Framework Before You Trade It.</h3>
            <p>The Ghost Learning Edition — 7 chapters, 6 simulator drills, a 24-question certification exam.</p>
          </div>
          <a className="btn btn-primary" href="course.html">Start the Course →</a>
        </div>
      </section>

      <Footer />
    </>
  );
}

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