/* 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 ChartZoom({ slide }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" className="chart-zoom" onClick={() => setOpen(true)} aria-label="Open chart full size">
        <img src={slide.src} alt={slide.alt} />
      </button>
      {open && <ChartLightbox slide={slide} onClose={() => setOpen(false)} />}
    </>
  );
}

// ─── Nav ─────────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="https://www.nordman-algorithms.com/" className="logo">
          <span className="logo-mark"></span>
          <span>Nordman Algorithms</span>
        </a>
        <div className="nav-links">
          <a href="#problem">The Problem</a>
          <a href="#indicators">Indicators</a>
          <a href="#demo">Live Demo</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }}>Request access</a>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero — generic neutral chart visual (no specific platform look) ────────
function ChartVisual() {
  return (
    <div className="flow-card hero-visual">
      <div className="flow-header">
        <div className="flow-title mono">Volume Trader bundle · Ninja Trader 8</div>
        <div className="flow-status"><span className="dot"></span> LIVE</div>
      </div>
      <div className="chart-shot">
        <ChartZoom
          slide={{
            src: `scenario-01-chart-2.png?v=${CHART_V}`,
            alt: 'ES SEP26 5-minute chart — Volume Profile and Footprint order flow view',
          }}
        />
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div data-reveal>
            <div className="eyebrow">NT8 PROFESSIONAL SUITE · COMPATIBLE WITH BLOODHOUND &amp; BLACKBIRD FOR AUTO-TRADING</div>
            <h1>
              Stop guessing levels. Start seeing&nbsp;<span className="accent">where the big money moves</span> on the chart.
            </h1>
            <p className="hero-sub">
              A professional volume suite of&nbsp;5&nbsp;indicators for NinjaTrader&nbsp;8. Combine market structure,
              dynamic volume-weighted price (VWAP) and&nbsp;Footprint cluster analysis into&nbsp;one coordinate system
              for reading the market auction with precision.
            </p>
            <div className="hero-cta">
              <a href="#cta" className="btn btn-primary btn-lg">
                Request access
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </a>
              <a href="https://nordman-algorithms.com" target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
                Need something custom built? We develop automation to order →
              </a>
            </div>
            <div className="hero-note">One-time purchase, lifetime license. Full access to all 5 tools and ready-made chart templates, with priority support.</div>
          </div>
          <ChartVisual />
        </div>
      </div>
    </section>
  );
}

// ─── Situational breakdown ("Recognize your own trades?") ───────────────────
function Situations() {
  const items = [
    {
      title: 'Systematic false breakouts.',
      what: 'Price approaches a visual resistance level, breaks it with a momentum candle, you open a long chasing the trend. A second later price reverses hard, hits your stop-loss and drops.',
      why: 'You entered inside the Value Area — the balance zone holding 70% of the session\u2019s volume. Large participants used your market buy orders to close their own positions or add to their short at a good price. The Footprint chart showed no buyer defense at that level — you just couldn\u2019t see it.',
    },
    {
      title: 'Expectancy erosion from slippage.',
      what: 'You entered on a system signal, but your broker filled it at a worse price. The trade closed in profit, but instead of the planned 10-tick move you only captured 6.',
      why: 'A market entry during low liquidity, or order-send delay. On fast impulsive moves, even 0.5 seconds of execution lag worsens your entry price by several ticks. Over hundreds of trades, this hidden erosion turns a profitable system into a losing one.',
    },
    {
      title: 'Stop-loss triggered right before the reversal.',
      what: 'You open a position off a support level, set a tight technical stop behind the candle\u2019s local low. Price takes your stop with a wick and instantly runs toward your original target.',
      why: 'You were trading blind. With Footprint Order Flow you would have seen a large limit buyer pull orders from the book to let price dip lower and sweep liquidity — placing a tight stop behind that local level was mathematically unsound.',
    },
  ];
  return (
    <section className="section" id="problem">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">the crisis of intuitive technical analysis</span>
          <h2>Why do classic chart patterns lead to systematic losses?</h2>
          <p>Drawing horizontal support lines off local extremes on a bare chart ignores market physics. Price is moved by&nbsp;real money volume — not geometric shapes. Without analyzing liquidity distribution, intraday traders make three systematic mistakes:</p>
        </div>
        <div className="situations">
          {items.map((it, i) => (
            <div key={i} className="situation-card" data-reveal>
              <div className="situation-num">SITUATION<span>0{i + 1}</span></div>
              <div className="situation-body">
                <h3>{it.title}</h3>
                <div className="situation-row">
                  <span className="sit-label">On the chart</span>
                  <p>{it.what}</p>
                </div>
                <div className="situation-row cause">
                  <span className="sit-label">Technical cause</span>
                  <p>{it.why}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Situations });