// "Humans vs Machines" hero — a punchy lead-in that frames the pitch:
// machines already do the trading. Either you have one working for you, or
// you are the liquidity it takes from.
//
// Animated horizontal volume bar fills from 0 → ~80% machine share over
// 4 years. Live-style ticker of "machine-executed orders this second" runs
// underneath. Clean, factual, no AI-slop gradients.

window.ApexHeroMachines = (function () {
  const { useState, useEffect, useRef, useMemo } = React;

  // Theme is passed in from the variation (terminal.jsx) so colors stay consistent.
  function HumansVsMachinesHero({ theme, r, onApply }) {
    const t = theme;

    // --- 1) Animated machine-share bar (timeline 2003 → 2025) -------------
    // Sourced from publicly-cited industry research (Select USA, FINRA,
    // academic surveys). Shown as illustrative, not real-time data.
    const series = useMemo(() => ([
      { y: 2003, m: 15 },
      { y: 2007, m: 35 },
      { y: 2010, m: 56 },
      { y: 2014, m: 65 },
      { y: 2018, m: 70 },
      { y: 2022, m: 75 },
      { y: 2025, m: 78 },
    ]), []);
    const FINAL_M = series[series.length - 1].m; // 78
    const FINAL_H = 100 - FINAL_M;

    const [progress, setProgress] = useState(0); // 0..1 over animation
    const startedRef = useRef(false);
    const containerRef = useRef(null);

    // Animate when scrolled into view — but also kick off on mount because
    // the hero sits at the top of the page anyway.
    useEffect(() => {
      let raf;
      const DURATION = 2200;
      const t0 = performance.now();
      function frame(now) {
        const p = Math.min(1, (now - t0) / DURATION);
        // ease-out cubic
        const eased = 1 - Math.pow(1 - p, 3);
        setProgress(eased);
        if (p < 1) raf = requestAnimationFrame(frame);
      }
      raf = requestAnimationFrame(frame);
      return () => cancelAnimationFrame(raf);
    }, []);

    const machinePct = FINAL_M * progress;
    const humanPct = 100 - machinePct;

    // --- 2) Live-style "orders this second" odometer ---------------------
    // ~ 70M algorithmic orders/sec across global equity venues at peak is a
    // common public estimate; we tick a counter that drifts so it feels live.
    const [orderCount, setOrderCount] = useState(0);
    useEffect(() => {
      const id = setInterval(() => {
        // 800–1400 orders per ~80ms tick → reads as ~10-17k/sec
        setOrderCount(c => c + 800 + Math.floor(Math.random() * 600));
      }, 80);
      return () => clearInterval(id);
    }, []);

    // --- 3) Layout --------------------------------------------------------
    const sidePad = r.isMobile ? 16 : 32;

    return (
      <section
        ref={containerRef}
        style={{
          padding: r.isMobile ? '36px 16px 28px' : '64px 32px 48px',
          borderBottom: `1px solid ${t.border}`,
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Subtle grid texture */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(${t.border} 1px, transparent 1px), linear-gradient(90deg, ${t.border} 1px, transparent 1px)`,
          backgroundSize: '64px 64px',
          maskImage: 'radial-gradient(ellipse at 70% 30%, #000 25%, transparent 75%)',
          opacity: 0.5, pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          {/* Headline */}
          <h1 style={{
            fontFamily: t.sans,
            fontSize: r.isMobile ? 32 : 68,
            lineHeight: 1.02,
            letterSpacing: '-0.035em',
            margin: 0, fontWeight: 500,
            maxWidth: 1100,
          }}>
            <span style={{ color: t.fg }}>78% of trades are placed by </span>
            <span style={{ color: t.accent }}>machines</span>
            <span style={{ color: t.fg }}>.</span>
            <br />
            <span style={{ color: t.dim }}>Don't be the other 22%.</span>
          </h1>

          <p style={{
            fontSize: r.isMobile ? 15 : 19, color: t.dim, lineHeight: 1.5,
            maxWidth: 640, marginTop: r.isMobile ? 22 : 28,
          }}>
            <span style={{ color: t.fg }}>Our complex models trade for you.</span> A portfolio of systematic strategies, combined to minimize drawdown and maximize returns — executed automatically through your own brokerage, on your own capital, with no performance fee.
          </p>

          {/* Pull quote */}
          <div style={{
            marginTop: r.isMobile ? 32 : 48,
            display: 'grid',
            gridTemplateColumns: r.isMobile ? '1fr' : '1fr 1fr',
            gap: r.isMobile ? 24 : 56,
            alignItems: 'flex-start',
          }}>
            <div style={{
              fontFamily: t.sans, fontSize: r.isMobile ? 22 : 28,
              lineHeight: 1.25, letterSpacing: '-0.015em', color: t.fg,
              maxWidth: 560,
            }}>
              The question stopped being<br />
              <span style={{ color: t.dim }}>“can computers trade?”</span><br />
              <span style={{ color: t.fg }}>around 2010.</span><br />
              <span style={{ color: t.accent }}>It’s now: whose computers are trading for you?</span>
            </div>
            <div style={{
              fontFamily: t.mono, fontSize: r.isMobile ? 12.5 : 13,
              color: t.dim, lineHeight: 1.7,
              borderLeft: `1px solid ${t.border}`,
              paddingLeft: r.isMobile ? 16 : 24,
            }}>
              <span style={{ color: t.fg }}>You don’t have to out-trade the machines.</span><br />
              You just have to stop being the only one without one.
            </div>
          </div>
        </div>
      </section>
    );
  }

  function FactCell({ t, r, k, v, note, accent, border }) {
    return (
      <div style={{
        padding: r.isMobile ? '16px 16px' : '20px 22px',
        borderRight: border ? `1px solid ${t.border}` : 'none',
        borderBottom: r.isMobile ? `1px solid ${t.border}` : 'none',
        background: t.surface,
      }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.14em', color: t.dimmer,
          fontFamily: t.mono, textTransform: 'uppercase',
        }}>{k}</div>
        <div style={{
          fontFamily: t.mono, fontSize: r.isMobile ? 22 : 28,
          color: accent ? t.accent : t.fg, marginTop: 6,
          letterSpacing: '-0.01em',
        }}>{v}</div>
        <div style={{
          fontSize: 11, color: t.dim, marginTop: 4, fontFamily: t.mono,
        }}>{note}</div>
      </div>
    );
  }

  return { HumansVsMachinesHero };
})();