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

// ─── Honest split — who this is / isn't for ─────────────────────────────────
function ForWhom() {
  return (
    <section className="section" id="honest">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">honest terms and discipline</span>
          <h2>This software won't make you a profitable trader if you lack discipline</h2>
          <p>Let's be straight. There's no magic formula or indicator in trading that predicts the future with 100% accuracy. Our software isn't a profit button — it's a high-precision tool for professional market-structure analysis.</p>
        </div>
        <div className="for-whom">
          <div className="fw-col no" data-reveal>
            <h4><span className="badge">✕</span>Not a fit for</h4>
            <ul>
              <li><b>Swing traders.</b> If you hold positions for weeks off daily charts, close this tab — the Volume Trader Bundle isn't built for your timeframe, and your broker's free charts already cover it.</li>
              <li><b>Grail seekers.</b> If you expect indicators to magically turn a losing strategy profitable without changing your discipline or risk parameters, this product won't help.</li>
              <li><b>Remote, low-quality connections.</b> If your broker sits in the US and you're trading without a proper VPS, your own network latency can cancel out the benefit of fast data processing.</li>
            </ul>
          </div>
          <div className="fw-col yes" data-reveal>
            <h4><span className="badge">✓</span>Built for you if</h4>
            <ul>
              <li>You trade futures intraday — gold, Nasdaq/S&amp;P 500 indices, crude oil, currency contracts — on NinjaTrader 8. This bundle becomes your core edge: it removes guesswork, shows the real price zones institutional capital is working, and protects your account from impulsive emotional entries.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Reviews ─────────────────────────────────────────────────────────────────
function Stars({ n }) {
  return (
    <span className="stars" aria-label={`${n} out of 5`}>
      {[0, 1, 2, 3, 4].map((i) => <span key={i} className={i < n ? 'on' : 'off'}>★</span>)}
    </span>
  );
}

function Reviews() {
  const items = [
    { s: 5, t: 'Bought the bundle mostly for the Footprint - was already using a free Volume Profile from the NinjaTrader community. The Nordman one is night and day. Cleaner rendering, no lag on NQ. The Anchored VWAP I didn\u2019t even plan to use, but now it\u2019s on every chart. Bundle pricing saved me maybe $300 vs buying individually.', a: 'R. Tanaka, futures trader', c: 'JP' },
    { s: 5, t: 'I trade ES and NQ intraday. Had a Volume Profile from another vendor that kept freezing on reload. Switched to Nordman\u2019s - no issues in 3 months. The Value Area Breakout indicator is what sold me though. I was drawing those levels by hand like an idiot.', a: 'Marcus W.', c: 'US' },
    { s: 5, t: 'Spent two weeks trying free VWAP indicators from NinjaTrader forums. Half of them repaint, the other half crash on rollover days. Got the bundle, everything just loaded and worked. Not much else to say.', a: 'Chris B.', c: 'AU' },
    { s: 5, t: 'Got it for the Footprint. I\u2019ve used Sierra Chart for orderflow before - way more powerful, sure, but I don\u2019t need a Bloomberg terminal to scalp MES. Nordman\u2019s Footprint does what I need right inside NT8 without a separate data feed.', a: 'Danny L.', c: 'UK' },
    { s: 4, t: 'Four out of five for me only because I wish the Anchored VWAP had a shortcut key to anchor. Other than that, the whole bundle is solid. Volume Profile renders fast even on tick charts. Support answered my setup question in about two hours on a Saturday.', a: 'Tom\u00e1s H.', c: 'MX' },
    { s: 5, t: 'I\u2019m not a programmer. Bought the bundle, installed all five in maybe 15 minutes total. Every indicator had a PDF with screenshots. That\u2019s rare - most NT8 vendors give you a zip file and say \u201cgood luck\u201d.', a: 'Anika P.', c: 'NL' },
  ];

  const [idx, setIdx] = useState(0);
  const [perView, setPerView] = useState(3);
  useEffect(() => {
    const calc = () => setPerView(window.innerWidth < 640 ? 1 : window.innerWidth < 960 ? 2 : 3);
    calc();
    window.addEventListener('resize', calc);
    return () => window.removeEventListener('resize', calc);
  }, []);
  const pages = Math.max(1, items.length - perView + 1);
  const clamped = Math.min(idx, pages - 1);
  const step = 100 / perView;
  const prev = () => setIdx((i) => Math.max(0, i - 1));
  const next = () => setIdx((i) => Math.min(pages - 1, i + 1));

  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">what traders say</span>
          <h2>Real workflows, real desks</h2>
          <p>Feedback from traders running the Volume Trader Bundle live on NinjaTrader 8.</p>
        </div>
        <div className="review-carousel" data-reveal>
          <div className="review-viewport">
            <div className="review-track" style={{ transform: `translateX(-${clamped * step}%)` }}>
              {items.map((r, i) => (
                <figure key={i} className="review-card" style={{ flex: `0 0 ${step}%` }}>
                  <Stars n={r.s} />
                  <blockquote>{r.t}</blockquote>
                  <figcaption>
                    <span className="rc-name">{r.a}</span>
                    <span className="rc-country">{r.c}</span>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
          <div className="review-controls">
            <button className="review-arrow" onClick={prev} disabled={clamped === 0} aria-label="Previous reviews">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 18l-6-6 6-6" /></svg>
            </button>
            <div className="review-dots">
              {Array.from({ length: pages }).map((_, i) => (
                <button key={i} className={`review-dot ${i === clamped ? 'on' : ''}`} onClick={() => setIdx(i)} aria-label={`Go to review ${i + 1}`}></button>
              ))}
            </div>
            <button className="review-arrow" onClick={next} disabled={clamped === pages - 1} aria-label="Next reviews">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6" /></svg>
            </button>
          </div>
        </div>
        <p className="review-disclaimer" data-reveal>Testimonials reflect individual experiences and are not a guarantee of future performance or results.</p>
      </div>
    </section>
  );
}

// ─── CTA (layout mockup — states for handoff) ───────────────────────────────
function CTAForm() {
  return (
    <section className="section" id="cta">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">get the bundle</span>
          <h2>Start seeing the market through institutional eyes</h2>
          <p>Request access to the Volume Trader Bundle. Tell us where to send your license and files, and the team will get you set up.</p>
        </div>
        <div className="cta-form-wrap">
          <div>
            <p style={{ color: 'var(--text-2)', fontSize: 15, lineHeight: 1.7, marginBottom: 20 }}>
              One-time purchase, lifetime license for all 5 indicators — with ready-made chart templates, Exposed Plots for no-code automation, and priority support from the team that built them.
            </p>
            <div className="hero-note" style={{ marginBottom: 0 }}>🔒 No spam, no cold calls, no auto-dialers. We respect your inbox — we only use your details to deliver the bundle and support it.</div>
          </div>

          {/* State 1 — default form */}
          <form className="cta-form" onSubmit={(e) => {
            e.preventDefault()
            console.log("Submit")

            const f = e.target;
            const name = f.name.value.trim();
            const email = f.email.value.trim();
            const tg = f.telegram.value.trim();
            const body = `Name: ${name}\nEmail: ${email}\nTelegram: ${tg || '-'}\n\nI would like to request access to the Volume Trader Bundle.`;

            const submitButton = document.querySelector("#submit-button")
            const waitButton = document.querySelector("#waiting-button")
            const msgError = document.querySelector("#msg-error")
            const msgSuccess = document.querySelector("#msg-success")

            console.log("Send Request... Contact");
            waitButton.style.display = "block"
            submitButton.style.display = "none"
            fetch('https://nordman-algorithms.com/wp-json/myapi/nt8-bundle-request', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json', // Indicate the content type
              },
              body: JSON.stringify({
                user_name:name,
                user_email:email,
                user_tg:tg
              }),}).then((rsp) => {
              return rsp.text()
            }).then((data) => {
              console.log(data);
              if(data === "success"){
                waitButton.style.display = "none"
                msgSuccess.style.display = "block"
              } else {
                waitButton.style.display = "none"
                msgError.style.display = "block"
              }
              console.log(data)
            });

            console.log(body);

          }}>
            <div className="cta-form-fields">
              <div className="form-field">
                <label>Your name</label>
                <input name="name" type="text" placeholder="Name" />
              </div>
              <div className="form-field">
                <label>Work email</label>
                <input name="email" type="email" placeholder="you@company.com" />
                <span className="form-note">Your license and setup instructions are sent here.</span>
              </div>
              <div className="form-field">
                <label>Telegram (optional)</label>
                <input name="telegram" type="text" placeholder="@username" />
                <span className="form-note">For direct contact with support.</span>
              </div>

              <button id="submit-button" type="submit" className="btn btn-primary btn-lg cta-submit-btn">
                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>
              </button>

            </div>

            {/* State 2 — loading CTA (outline, dark fill, thinking dots) */}
            <button id="waiting-button" type="button" className="btn btn-lg cta-btn-loading" disabled aria-label="Sending request" style={{ display: 'none' }}>
              <span className="cta-loading-dots" aria-hidden="true">
                <span></span><span></span><span></span>
              </span>
            </button>

            {/* Alert states — layout reference */}
            <p id="msg-error" className="cta-form-alert cta-form-alert--error" role="alert" style={{ display: 'none' }}>
              Something went wrong. Please try again or email{' '}
              <a href="mailto:contact@nordman-algorithms.com">contact@nordman-algorithms.com</a>.
            </p>

            <p id="msg-success" className="cta-form-alert cta-form-alert--success" role="status" style={{ display: 'none' }}>
              Thank you for contacting us. We have received your request. We will contact you at the email address provided shortly.
            </p>

            <div className="form-secondary">
              Need something custom built? We develop automation to order → <a href="https://nordman-algorithms.com" target="_blank" rel="noopener">Request Custom Development</a>
            </div>

          </form>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    {
      q: 'Does Tick Replay need to be enabled for the indicators to work?',
      a: 'No. Our volume indicators don\u2019t require Tick Replay to be enabled — they work without it and base their calculations on other data available in your NT8 terminal. That said, enabling Tick Replay makes calculations more precise, since the indicator will then use historical tick data to accurately split volume into market buys (Ask) and market sells (Bid) inside every formed bar.',
    },
    {
      q: 'Do the indicators repaint their historical signals?',
      a: 'No, categorically. Every Nordman Indicators product calculates strictly on completed ticks and closed bars. Signals and markers shown on the historical chart are identical to what the software flagged in real time. We don\u2019t use repainting algorithms.',
    },
    {
      q: 'Can I use these indicators on Forex instruments?',
      a: 'The volume indicators, including Volume Profile and Footprint, use real exchange volume. Forex is a decentralized market with no standardized exchange volume. You can still use the indicators on Forex, but calculations will be based on your specific broker\u2019s tick volume, which can reduce liquidity-distribution accuracy compared to regulated CME futures contracts.',
    },
    {
      q: 'How does compatibility with BloodHound, BlackBird, and other no-code strategy automations work?',
      a: 'Every Nordman Indicators product has Exposed Plots — open data series. When you add the indicator inside any strategy builder, you can reference the software\u2019s output values directly — for example, POC levels, Value Area boundaries, or breakout signals — as triggers for automatically opening or closing orders, with no C# coding required.',
    },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head" data-reveal>
          <span className="eyebrow">faq</span>
          <h2>Technical questions, answered</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon"></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ForWhom, Reviews, CTAForm, FAQ });