/* global React, Btn, Reveal */

// ============================================================================
//  Hero — dancer vologram with mouse parallax + drag-to-rotate
// ============================================================================

function Hero({ accent = "pink", motion = "subtle", variant = "split" }) {
  // variant: "split" | "centered" | "overlay"
  const stageRef = React.useRef(null);
  const innerRef = React.useRef(null);
  const dragRef = React.useRef({ dragging: false, x: 0, y: 0, rx: 0, ry: 0, baseRx: 0, baseRy: 0 });
  const targetRef = React.useRef({ rx: 0, ry: 0 });
  const currentRef = React.useRef({ rx: 0, ry: 0 });

  React.useEffect(() => {
    const stage = stageRef.current;
    const inner = innerRef.current;
    if (!stage || !inner) return;

    let raf = 0;
    const tick = () => {
      const c = currentRef.current;
      const t = targetRef.current;
      // ease toward target
      c.rx += (t.rx - c.rx) * 0.08;
      c.ry += (t.ry - c.ry) * 0.08;
      inner.style.transform = `rotateX(${c.rx.toFixed(2)}deg) rotateY(${c.ry.toFixed(2)}deg)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onMove = (e) => {
      if (motion === "off") return;
      const d = dragRef.current;
      if (d.dragging) return; // drag takes over
      const rect = stage.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width - 0.5;
      const y = (e.clientY - rect.top) / rect.height - 0.5;
      targetRef.current.ry = x * 18;     // left/right
      targetRef.current.rx = -y * 12;    // up/down
    };
    const onLeave = () => {
      if (!dragRef.current.dragging) {
        targetRef.current.rx = 0;
        targetRef.current.ry = 0;
      }
    };

    const onPointerDown = (e) => {
      const d = dragRef.current;
      d.dragging = true;
      d.x = e.clientX;
      d.y = e.clientY;
      d.baseRx = targetRef.current.rx;
      d.baseRy = targetRef.current.ry;
      stage.setPointerCapture?.(e.pointerId);
      stage.style.cursor = "grabbing";
    };
    const onPointerMove = (e) => {
      const d = dragRef.current;
      if (!d.dragging) return;
      const dx = e.clientX - d.x;
      const dy = e.clientY - d.y;
      targetRef.current.ry = d.baseRy + dx * 0.35;
      targetRef.current.rx = d.baseRx - dy * 0.25;
    };
    const onPointerUp = (e) => {
      const d = dragRef.current;
      if (!d.dragging) return;
      d.dragging = false;
      stage.releasePointerCapture?.(e.pointerId);
      stage.style.cursor = "grab";
    };

    window.addEventListener("mousemove", onMove);
    stage.addEventListener("mouseleave", onLeave);
    stage.addEventListener("pointerdown", onPointerDown);
    window.addEventListener("pointermove", onPointerMove);
    window.addEventListener("pointerup", onPointerUp);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
      stage.removeEventListener("mouseleave", onLeave);
      stage.removeEventListener("pointerdown", onPointerDown);
      window.removeEventListener("pointermove", onPointerMove);
      window.removeEventListener("pointerup", onPointerUp);
    };
  }, [motion]);

  const AccentWord = ({ children }) => (
    <span className={accent === "grad" ? "accent accent--grad" : "accent"}>{children}</span>
  );

  return (
    <section className="hero" id="top">
      <div className="hero__bg" aria-hidden="true"/>
      <div className="hero__noise" aria-hidden="true"/>
      <div className="page hero__grid">
        <div className="hero__copy">
          {/* <div className="eyebrow">Volumetric capture · at every scale</div> */}
          <h1 className="display">
            Volumetric capture,<br/>at every <AccentWord>scale</AccentWord>.
          </h1>
          <p className="lede">
            From a single phone to a multi-camera studio<br/>Volograms turns video
            into volumetric 3D. 
          </p>
          <div className="hero__ctas">
            <Btn variant="gradient" href="#studio" withArrow>Talk to Studios team</Btn>
            <Btn variant="ghost" href="#creator" withArrow>Try Creator</Btn>
          </div>
{/* 
          <div className="hero__metrics">
            <div className="hero__metric"><b>50+</b><span>Camera rigs deployed</span></div>
            <div className="hero__metric"><b>7 yrs</b><span>Volumetric research</span></div>
            <div className="hero__metric"><b>Single → many</b><span>Capture range</span></div>
          </div> */}
        </div>

        <div className="hero__stage" ref={stageRef} style={{ cursor: "grab" }}>
          <div className="hero__scaffold" aria-hidden="true"/>
          <div className="hero__halo" aria-hidden="true"/>
          <div className="hero__floor" aria-hidden="true"/>

          <div className="hero__tag">
            <span><span className="dot"/>Live · interactive</span>
            <b>Vologram_001.glb</b>
            <span>Single-camera · 4D mesh</span>
          </div>

          <div className="hero__stage-inner" ref={innerRef}>
            <div className="hero__dancer-wrap">
              <img className="hero__dancer" src="assets/dancer-vologram.gif" alt="Volumetric capture of a dancer"/>
            </div>
          </div>

          <div className="hero__pill">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M20 12a8 8 0 1 1-2.3-5.6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              <path d="M20 4v4h-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Drag to rotate
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });