/* global React */
// Animated Hero plate — bars roll out left→right on mount, numbers odometer up,
// and the whole plate parallaxes 4-6px on cursor for low-key liveliness.

const useStateHP = React.useState;
const useEffectHP = React.useEffect;
const useRefHP = React.useRef;

function useCountUp(target, ms = 900, start = 0) {
  const [v, setV] = useStateHP(start);
  useEffectHP(() => {
    let raf = 0; const t0 = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / ms);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(start + (target - start) * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, ms]);
  return v;
}

function HeroPlate() {
  const layers = [
    { code: "L·01", name: "Financial Rails",      n: 9 },
    { code: "L·02", name: "Merchant Systems",     n: 6 },
    { code: "L·03", name: "Urban Infrastructure", n: 4 },
    { code: "L·04", name: "Essential Services",   n: 2 },
  ];
  const max = 9;
  const [mounted, setMounted] = useStateHP(false);
  const [tilt, setTilt] = useStateHP({ x: 0, y: 0 });
  const ref = useRefHP(null);

  useEffectHP(() => {
    const id = requestAnimationFrame(() => setMounted(true));
    return () => cancelAnimationFrame(id);
  }, []);

  useEffectHP(() => {
    const onMove = (e) => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / r.width;
      const dy = (e.clientY - cy) / r.height;
      setTilt({ x: Math.max(-1, Math.min(1, dx)) * 6, y: Math.max(-1, Math.min(1, dy)) * 4 });
    };
    const onLeave = () => setTilt({ x: 0, y: 0 });
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseleave', onLeave);
    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseleave', onLeave); };
  }, []);

  const portfolio = useCountUp(mounted ? 21 : 0, 1100);
  const corridors = useCountUp(mounted ? 4 : 0, 900);
  const cities = useCountUp(mounted ? 15 : 0, 1100);
  const aum = useCountUp(mounted ? 102 : 0, 1300);

  return (
    <div ref={ref}
         className={`hp ${mounted ? 'hp-on' : ''}`}
         style={{transform: `translate3d(${tilt.x}px, ${tilt.y}px, 0)`}}>
      <div className="hp-rule"/>
      <div className="hp-head">
        <span>Field Plate · LM·R.02</span>
        <span className="hp-blink">Operating Layer Cross-section</span>
      </div>
      <div className="hp-body">
        {layers.map((l, i) => (
          <div className="hp-row" key={l.code} style={{'--i': i}}>
            <div className="hp-code">{l.code}</div>
            <div className="hp-bar">
              <div className="hp-bar-fill" style={{width: mounted ? `${(l.n / max) * 100}%` : '0%', transitionDelay: `${280 + i*120}ms`}}/>
              <div className="hp-bar-name">{l.name}</div>
              <div className="hp-bar-tick" style={{left: `${(l.n / max) * 100}%`, transitionDelay: `${280 + i*120 + 600}ms`}}/>
            </div>
            <div className="hp-count">
              <div className="v">{String(l.n).padStart(2, '0')}</div>
              <div className="l">cos.</div>
            </div>
          </div>
        ))}
      </div>
      <div className="hp-foot">
        <div><span className="k">Portfolio</span><span className="v">{Math.round(portfolio)}</span></div>
        <div><span className="k">Corridors</span><span className="v">{String(Math.round(corridors)).padStart(2,'0')}</span></div>
        <div><span className="k">Cities</span><span className="v">{Math.round(cities)}</span></div>
        <div><span className="k">AUM</span><span className="v">${Math.round(aum)}M</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroPlate });