/* global React */

function IndicatorField({ label, half, children }) {
  return (
    <div className={`indicator-field ${half ? 'half' : ''}`}>
      <h4>{label}</h4>
      {children}
    </div>
  );
}

function IndicatorCard({ num, name, concept, explanation, displays, interpretation, limitations }) {
  return (
    <div className="indicator-card" data-reveal>
      <div className="indicator-head">
        <span className="indicator-num">{num}</span>
        <h3>{name}</h3>
      </div>
      <div className="indicator-grid">
        <IndicatorField label="Concept" half>
          <p>{concept}</p>
        </IndicatorField>
        <IndicatorField label="How it works" half>
          <p>{explanation}</p>
        </IndicatorField>
        <IndicatorField label="What it displays">
          <ul>{displays.map((d, i) => <li key={i}>{d}</li>)}</ul>
        </IndicatorField>
        <IndicatorField label="How to use it" half>
          <p>{interpretation}</p>
        </IndicatorField>
        <IndicatorField label="Technical limitations" half>
          <div className="limits"><p>{limitations}</p></div>
        </IndicatorField>
      </div>
    </div>
  );
}

function TechnicalBreakdown() {
  const indicators = [
    {
      num: '01',
      name: 'NinjaTrader Volume Profile Indicator',
      concept: 'A tool that groups and visualizes traded volume by price level over a chosen period — session, week, month, or a custom range.',
      explanation: 'The indicator reads tick data inside every bar and distributes the accumulated volume across the price axis. This reveals zones where buyer and seller interest agreed (high volume / balance) and zones the market moved through with no resistance (low volume / imbalance).',
      displays: [
        <><b>Volume Profile Histogram:</b>&nbsp;a horizontal histogram of liquidity distribution.</>,
        <><b>POC (Point of Control):</b>&nbsp;the price line where the maximum volume for the selected period occurred.</>,
        <><b>Value Area (VA):</b>&nbsp;the price range holding 70% of total traded volume, bounded by VAH (Value Area High) and VAL (Value Area Low).</>,
        <><b>Virgin POC (VPOC):</b>&nbsp;historical POC levels from past sessions that price has not yet retested.</>,
      ],
      interpretation: 'POC and Virgin POC levels act as strong magnets and support/resistance zones. Trade from the Value Area boundaries (VAH/VAL) inward during range conditions, or use them as targets when price breaks out of balance.',
      limitations: 'Profile accuracy depends directly on the quality of historical tick data supplied by your broker or data feed. On illiquid instruments the histogram can appear sparse due to a lack of trades at intermediate price levels.',
    },
    {
      num: '02',
      name: 'NinjaTrader Intraday Value Area Breakout Indicator',
      concept: 'A specialized indicator that automatically detects and signals when price moves outside the current trading day\u2019s Value Area.',
      explanation: 'The indicator continuously compares bar closes against the current dynamic VAH and VAL boundaries. Once a bar closes beyond these lines, it identifies an attempted breakout of the liquidity range.',
      displays: [
        'Visual markers (arrows) at confirmed breakouts above VAH or below VAL.',
        'The dynamic balance-zone boundaries for the current day.',
        <><b>Two signal-filtering modes:</b>&nbsp;Live Mode (signal appears in real time on the open bar) and Locked Mode (signal confirms strictly after the candle closes, minimizing false triggers).</>,
      ],
      interpretation: 'Used for breakout trading and catching the start of trend moves. A bar closing above VAH in Locked Mode indicates initiative buyers are in control and opens a case for entering with the momentum.',
      limitations: 'During deep consolidation phases, when Value Area boundaries narrow, the indicator can generate false signals at the range edges. Requires confirmation of momentum strength from the VWAP indicator.',
    },
    {
      num: '03',
      name: 'NinjaTrader VWAP Indicator (Volume-Weighted Average Price)',
      concept: 'The dynamic volume-weighted average price of an instrument over a chosen time interval.',
      explanation: 'Calculates the ratio of the sum of each trade\u2019s price multiplied by its volume to total traded volume over the period. The formula weights every transaction, making the metric the benchmark for institutional participants\u2019 true price.',
      displays: [
        'The central volume-weighted average price (VWAP) line.',
        'Up to three standard deviation bands that dynamically expand or contract with market volatility.',
      ],
      interpretation: 'Price\u2019s position relative to the VWAP line defines the broader intraday trend (above the line favors buyers, below favors sellers). The deviation bands act as overbought/oversold zones. Price reaching the 2nd or 3rd deviation signals a mathematical inefficiency and a likely pullback to the mean price.',
      limitations: 'Effective only on instruments with real exchange volume (futures, stocks). On markets without centralized clearing (e.g. spot forex) the indicator relies on your broker\u2019s tick volume, which can reduce deviation accuracy compared to CME futures quotes.',
    },
    {
      num: '04',
      name: 'NinjaTrader Anchored VWAP Indicator',
      concept: 'A volume-weighted average price whose calculation begins from a reference point (an \u201canchor\u201d) chosen by the trader on the chart.',
      explanation: 'Uses the same mathematical model as classic VWAP, but resets accumulated data not on a calendar schedule (day open) but strictly at the bar the user selects.',
      displays: [
        'An average-price line starting from the chosen point (event).',
        'Standard deviation bands calculated from the moment the anchor is set.',
      ],
      interpretation: 'The anchor is set on key market events that shifted the balance of power: a major economic release, a session open, or the formation of a significant local high/low. The indicator shows who has held control of the market — buyers or sellers — since that event.',
      limitations: 'The accuracy and usefulness of the reading depend entirely on the trader\u2019s skill. An incorrectly chosen anchor point (placed on insignificant intra-session noise) makes the resulting lines uninformative.',
    },
    {
      num: '05',
      name: 'NinjaTrader FootPrint OrderFlow Indicator',
      concept: 'A cluster chart displaying the distribution of executed buy and sell market orders at every price level inside every candle.',
      explanation: 'Aggregates the tick-by-tick trade stream (Time & Sales) and distributes it within each bar by price level, splitting executed orders into market buys at the Ask price (right side) and market sells at the Bid price (left side).',
      displays: [
        <><b>Cluster bar:</b>&nbsp;a candle with a detailed numeric grid of traded volume at every price tick.</>,
        <><b>Bid/Ask Imbalance:</b>&nbsp;automatic highlighting of levels where market buys exceed market sells (or vice versa) by a user-defined percentage (diagonal imbalance).</>,
        <><b>Stacked Imbalances:</b>&nbsp;zones where several imbalance levels line up consecutively — a signal of aggressive capital flow.</>,
      ],
      interpretation: 'Used as a precise entry trigger. When price tests a strong level (e.g. the horizontal profile\u2019s POC or a VWAP deviation), the trader looks for a Stacked Imbalance of buyers (for a long) or sellers (for a short) confirming that a large player is defending the level.',
      limitations: 'Requires a continuous real-time Level 1 / Last Trade tick data feed. Footprint creates significant CPU load when several high-liquidity charts are open at once.',
    },
  ];

  return (
    <section className="section" id="indicators">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">the full volume toolkit</span>
          <h2>5 Nordman indicators. One logic for reading the market auction.</h2>
        </div>
        <div className="indicators">
          {indicators.map((ind, i) => <IndicatorCard key={i} {...ind} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TechnicalBreakdown });