/* global React */
const { useState, useEffect } = React;
const CHART_V = '20260804';

function ChartLightbox({ slide, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div className="chart-lightbox" onClick={onClose} role="dialog" aria-modal="true" aria-label="Chart preview">
      <img src={slide.src} alt={slide.alt} onClick={(e) => e.stopPropagation()} />
    </div>
  );
}

function ScenarioChartSlider({ slides }) {
  const [idx, setIdx] = useState(0);
  const [lightbox, setLightbox] = useState(null);
  const last = slides.length - 1;
  const hasNav = slides.length > 1;
  const prev = () => setIdx((i) => (i === 0 ? last : i - 1));
  const next = () => setIdx((i) => (i === last ? 0 : i + 1));

  return (
    <div className="scenario-slider">
      <div className="scenario-slider-viewport">
        <div className="scenario-slider-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
          {slides.map((slide, i) => (
            <div key={i} className="scenario-slider-slide">
              <button
                type="button"
                className="scenario-slider-zoom"
                onClick={() => setLightbox(slide)}
                aria-label="Open chart full size"
              >
                <img src={slide.src} alt={slide.alt} loading="lazy" />
              </button>
            </div>
          ))}
        </div>
      </div>
      {hasNav && (
        <div className="scenario-slider-controls">
          <button type="button" className="scenario-slider-arrow" onClick={prev} aria-label="Previous chart">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 18l-6-6 6-6" /></svg>
          </button>
          <div className="scenario-slider-dots">
            {slides.map((_, i) => (
              <button
                key={i}
                type="button"
                className={`scenario-slider-dot ${i === idx ? 'on' : ''}`}
                onClick={() => setIdx(i)}
                aria-label={`Chart view ${i + 1}`}
              />
            ))}
          </div>
          <button type="button" className="scenario-slider-arrow" onClick={next} aria-label="Next chart">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6" /></svg>
          </button>
        </div>
      )}
      {lightbox && <ChartLightbox slide={lightbox} onClose={() => setLightbox(null)} />}
    </div>
  );
}

function ScenarioChart({ variant }) {
  if (variant === 'poc') {
    return (
      <svg viewBox="0 0 300 90" fill="none">
        <line x1="10" y1="60" x2="290" y2="60" stroke="#60A5FA" strokeWidth="1.2" strokeDasharray="2 4" />
        <path className="price-path" d="M10 20 L60 30 L110 42 L150 58 L180 61 L210 45 L250 30 L290 18" stroke="#E8ECF4" strokeWidth="1.8" fill="none" />
        <circle cx="180" cy="61" r="4" fill="#34D399" />
        {[8, 14, 22, 30, 18, 10].map((w, i) => <rect key={i} x={296 - w} y={52 + i * 5} width={w} height="3.5" fill="rgba(139,92,246,0.4)" />)}
      </svg>
    );
  }
  if (variant === 'breakout') {
    return (
      <svg viewBox="0 0 300 90" fill="none">
        <rect x="10" y="40" width="180" height="26" fill="rgba(139,92,246,0.1)" stroke="rgba(139,92,246,0.3)" strokeDasharray="2 3" />
        <path className="price-path" d="M10 52 L60 50 L110 54 L160 51 L190 40 L220 24 L250 14 L290 6" stroke="#E8ECF4" strokeWidth="1.8" fill="none" />
        <line x1="190" y1="10" x2="290" y2="10" stroke="#60A5FA" strokeWidth="1.2" strokeDasharray="2 4" />
        <path d="M188 34 l6 -8 l6 8 z" fill="#34D399" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 300 90" fill="none">
      <line x1="120" y1="8" x2="120" y2="82" stroke="#A78BFA" strokeWidth="1" strokeDasharray="2 3" />
      <path className="price-path" d="M10 46 L100 44 L120 10 L150 60 L180 50 L220 34 L260 40 L290 26" stroke="#E8ECF4" strokeWidth="1.8" fill="none" />
      <path d="M120 10 L150 60 L180 50 L220 34 L260 40 L290 26" stroke="#60A5FA" strokeWidth="1.2" strokeDasharray="2 3" fill="none" />
      <circle cx="120" cy="10" r="3.5" fill="#A78BFA" />
    </svg>
  );
}

function ScenarioCard({ tag, desc, variant, slides, title, context, steps }) {
  return (
    <div className="scenario-card" data-reveal>
      <div className="scenario-visual">
        <span className="scenario-visual-tag">{tag}</span>
        <div className={`scenario-chart${slides ? ' has-slider' : ''}`}>
          {slides ? <ScenarioChartSlider slides={slides} /> : <ScenarioChart variant={variant} />}
        </div>
        <p className="scenario-visual-desc">{desc}</p>
      </div>
      <div className="scenario-body">
        <h3>{title}</h3>
        <p className="scenario-context">{context}</p>
        <ol className="scenario-steps">
          {steps.map((s, i) => <li key={i}>{s}</li>)}
        </ol>
      </div>
    </div>
  );
}

function LiveDemo() {
  const scenarios = [
    {
      tag: 'Scenario 01 · Chart view',
      slides: [
        {
          src: `scenario-01-chart-1.png?v=${CHART_V}`,
          alt: 'ES SEP26 5-minute chart — Virgin POC at 7439.5 with Footprint bid imbalance at support',
        },
        {
          src: `scenario-01-chart-2.png?v=${CHART_V}`,
          alt: 'ES SEP26 5-minute chart — Volume Profile and Footprint confirming resting buy orders at POC',
        },
      ],
      desc: 'Price declines into a historical Virgin POC. Footprint instantly lights up a dense block of resting buy orders. Price bounces.',
      title: 'Testing a historical Virgin POC, confirmed by Footprint',
      context: 'You\u2019re planning a long from a strong support level. Classic technical analysis has you place a limit order \u201cblind\u201d on an arbitrary line.',
      steps: [
        'NinjaTrader Volume Profile has already found and plotted the Virgin POC on your chart — a price zone with maximum accumulated volume that the market hasn\u2019t retested yet.',
        'As price approaches the level, you don\u2019t risk capital upfront. You open NinjaTrader FootPrint OrderFlow and watch order distribution inside the current bar.',
        'The indicator automatically highlights a diagonal Bid Imbalance (large resting buy orders). You can see a large participant physically defending this level.',
        'You enter with a stop below the cluster\u2019s lower edge. Risk is minimized and the entry is confirmed by real volume.',
      ],
    },
    {
      tag: 'Scenario 02 · Chart view',
      slides: [
        {
          src: `scenario-02-chart-1.png?v=${CHART_V}`,
          alt: 'ES SEP26 5-minute chart — Intraday Value Area Breakout with VAH/VAL step lines and volume profile',
        },
      ],
      desc: 'Price consolidates in a narrow Value Area band, then closes above VAH. The breakout indicator confirms; price trends above a rising VWAP line.',
      title: 'A genuine Value Area breakout, managed with VWAP',
      context: 'You\u2019re looking for a breakout entry from consolidation, but you\u2019re worried about a false move and a reversal against your position.',
      steps: [
        'NinjaTrader Intraday Value Area Breakout continuously tracks the dynamic balance boundaries. As price exits the range, the indicator flags the breakout.',
        'To filter out false impulses, the software checks the breakout direction against the NinjaTrader VWAP line. If price holds above the volume-weighted average, the trend is confirmed.',
        'In Locked Mode, the breakout signal only confirms on candle close, filtering out noise while the bar is still forming. You enter with the momentum.',
        'The VWAP line and its first standard deviation act as a dynamic trailing stop — you hold the position as long as price keeps its trend structure above the line.',
      ],
    },
    {
      tag: 'Scenario 03 · Chart view',
      slides: [
        {
          src: `scenario-03-chart-1.png?v=${CHART_V}`,
          alt: 'ES SEP26 5-minute chart — Anchored VWAP from news impulse with deviation bands and economic calendar',
        },
      ],
      desc: 'A sharp vertical move follows a news release. The trader anchors VWAP to the first bar of the move; the line builds dynamic support that later pullbacks respect.',
      title: 'Locating control after a news impulse with Anchored VWAP',
      context: 'Major news just hit. The market is whipping around and volatility is spiking. Reading the chart with standard indicators is pointless — they lag hopelessly.',
      steps: [
        'You select NinjaTrader Anchored VWAP and anchor the reference point to the bar where the news impulse began.',
        'The indicator starts computing the volume-weighted average from that exact moment, discarding stale, no-longer-relevant volume.',
        'The Anchored VWAP line shows the average price at which large capital entered on the news. If price holds above the line, buyers are in control.',
        'On a pullback to the Anchored VWAP line, you look for an entry with the impulse — a chance to join at the day\u2019s fair institutional price.',
      ],
    },
  ];

  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">interactive verification mode</span>
          <h2>See how the system turns raw exchange data into trade logic</h2>
          <p>Three real intraday use cases for the bundle. No subjective guesswork or chart clutter — just clean volume math.</p>
        </div>
        <div className="scenarios">
          {scenarios.map((s, i) => <ScenarioCard key={i} {...s} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LiveDemo });