/* global React */

// ─── Trust / founder block ───────────────────────────────────────────────────
function Founder() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">building trading software since 2008</span>
          <h2>&ldquo;We removed subjective drawings from the chart to give traders a mathematical edge&rdquo;</h2>
        </div>
        <div className="founder-wrap">
          <div className="founder-card" data-reveal>
            <div className="founder-avatar"><img src="founder.jpg" alt="Alexei Kuntysh" /></div>
            <div className="founder-name">Alexei Kuntysh</div>
            <div className="founder-role">Founder, Nordman Algorithms</div>
            <a href="https://www.trustpilot.com/review/nordman-algorithms.com" target="_blank" rel="noopener" className="founder-rating">4.7 ★<span>Trustpilot</span></a>
          </div>
          <div className="founder-text" data-reveal>
            <p>I'm Alexei Kuntysh, founder of Nordman Algorithms. I've been building software for traders since 2008, and in 2018 we brought that work under Nordman Algorithms — designing custom indicators, cloud trade-copying systems and automation. Across those years we've delivered more than 3,000 projects for private traders and investment funds.</p>
            <p>My path into algorithmic trading started in fintech and large-scale e-commerce operations, where I ran development teams of 10 to 50 people. Once I moved into financial markets, I quickly saw the core problem retail traders face: they're analyzing an empty chart. Geometric shapes, trendlines drawn off candle wicks, and repainting oscillators create an illusion of analysis — while the market obeys only one law: supply, demand and the volume of real money.</p>
            <p>We built Nordman Indicators to do more than draw a pretty picture. Our goal is to give you reliable infrastructure that captures tick data from the exchange, structures it, and renders the clean physics of the market auction on your screen. Every product calculates on closed bars, follows NinjaTrader 8 mechanics strictly, and never repaints. We take our reputation seriously and build software you can rely on in live trading.</p>
            <div className="founder-stats">
              <div className="founder-stat"><div className="num">3,000+</div><div className="lbl">projects delivered</div></div>
              <div className="founder-stat"><div className="num">4.7★</div><div className="lbl">Trustpilot rating</div></div>
              <div className="founder-stat"><div className="num">2008</div><div className="lbl">building for traders since</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing matrix ──────────────────────────────────────────────────────────
function Pricing() {
  const components = [
    { name: 'NinjaTrader Volume Profile Indicator', desc: 'Dynamic POC, Virgin POC, Value Area', std: '€225', bundle: '€180' },
    { name: 'NinjaTrader FootPrint OrderFlow Indicator', desc: 'Cluster volume, Bid/Ask analysis, delta', std: '€225', bundle: '€180' },
    { name: 'NinjaTrader Intraday Value Area Breakout Indicator', desc: 'Range-breakout signals', std: '€200', bundle: '€160' },
    { name: 'NinjaTrader Anchored VWAP Indicator', desc: 'Control analysis from any chosen point', std: '€150', bundle: '€120' },
    { name: 'NinjaTrader VWAP Indicator', desc: 'Dynamic session average price with 3 deviations', std: '€150', bundle: '€120' },
  ];

  const lifetimeFeatures = [
    'Lifetime license for all 5 bundle indicators',
    'All future software updates included',
    'Exposed Plots for BloodHound and BlackBird',
    'License for 1 working PC',
    'Priority technical support',
  ];

  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">bundle value structure</span>
          <h2>Invest in professional software once — use it forever</h2>
          <p>Standalone catalog prices vs. what each tool costs inside the bundle. The bundle price applies only when the full suite is purchased together.</p>
        </div>

        <table className="value-table" data-reveal>
          <thead>
            <tr><th>#</th><th>Indicator</th><th className="col-price">Standalone</th><th className="col-price">In bundle</th></tr>
          </thead>
          <tbody>
            {components.map((c, i) => (
              <tr key={i}>
                <td className="mono">{i + 1}</td>
                <td><b style={{ color: 'var(--text)' }}>{c.name}</b><br /><span style={{ fontSize: 13, color: 'var(--text-dim)' }}>{c.desc}</span></td>
                <td className="price struck">{c.std}</td>
                <td className="price bundle">{c.bundle}</td>
              </tr>
            ))}
            <tr className="total">
              <td colSpan={2}>Total for all 5 indicators</td>
              <td className="price struck">€950</td>
              <td className="price bundle">€760</td>
            </tr>
          </tbody>
        </table>

        <div className="bonus-cards">
          <div className="bonus-card" data-reveal>
            <span className="bonus-tag">INCLUDED · 01</span>
            <h4>Priority technical support</h4>
            <p>Skip the queue. Get direct, priority help with installation, chart-template import and display configuration — fast answers from the team that built the indicators, not a generic ticket line.</p>
          </div>
          <div className="bonus-card" data-reveal>
            <span className="bonus-tag">INCLUDED · 02</span>
            <h4>Exposed Plots — no-code automation, ready to wire in</h4>
            <p>Every indicator exposes its data series. Wire them directly into BloodHound or BlackBird (SharkIndicators), or reference them in your own NinjaTrader C# strategy — automate entries off POC or VWAP deviation tests without writing code.</p>
          </div>
        </div>

        <div className="plans single">
          <div className="plan-card featured" data-reveal>
            <span className="plan-badge">SAVE €190</span>
            <div className="plan-name">LIFETIME BUNDLE</div>
            <div className="plan-price"><span className="amount">€760</span><span className="period">one-time</span></div>
            <div className="plan-save">20% off the €950 catalog total · pay once, own it forever</div>
            <ul className="plan-features">{lifetimeFeatures.map((f, i) => <li key={i}>{f}</li>)}</ul>
            <a href="#cta" className="btn btn-primary btn-lg">Request access</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Founder, Pricing });