/* global React, useMouseParallax */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

function Hero({ onBookDemo, onJump }) {
  const mouse = useMouseParallax(10);
  const heroRef = useRefHero(null);

  // cursor-tracking glow via CSS vars
  useEffectHero(() => {
    const el = heroRef.current;
    if (!el) return;
    const handler = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty("--mx", ((e.clientX - r.left) / r.width * 100) + "%");
      el.style.setProperty("--my", ((e.clientY - r.top) / r.height * 100) + "%");
    };
    el.addEventListener("mousemove", handler);
    return () => el.removeEventListener("mousemove", handler);
  }, []);

  return (
    <section className="hero" ref={heroRef} data-screen-label="01 Hero">
      <div className="hero-bg" />
      <video
        className="hero-video"
        src="hero.mp4"
        autoPlay
        loop
        muted
        playsInline
      />
      <div className="hero-cursor" />
      <div
        className="hero-topo"
        style={{ transform: `translate(${mouse.x * -0.4}px, ${mouse.y * -0.4}px)` }}
      >
        <HeroTopo />
      </div>

      <div className="hero-top">
        <span className="hero-eyebrow up" style={{ animationDelay: "0.05s" }}>
          <span className="live-dot" />
          The mineral lifecycle, modular
        </span>
        <div className="hero-coords up" style={{ animationDelay: "0.1s" }}>
          <div><strong>10.52°N · 7.44°E</strong> · Kaduna, NG</div>
          <div><strong>26.20°S · 28.05°E</strong> · South Africa</div>
        </div>
      </div>

      <div className="hero-center">
        <h1 className="hero-h1">
          <span
            className="hero-h1-row up"
            style={{ animationDelay: "0.15s", transform: `translate(${mouse.x * 0.18}px, ${mouse.y * 0.18}px)` }}
          >
            Mineral discovery,
          </span>
          <span
            className="hero-h1-row up"
            style={{ animationDelay: "0.28s", transform: `translate(${mouse.x * 0.32}px, ${mouse.y * 0.32}px)` }}
          >
            rebuilt.
          </span>
        </h1>

        <div className="hero-sub-row up" style={{ animationDelay: "0.42s" }}>
          <p className="hero-sub">
            A modular intelligence suite for the teams who find, develop, and hand back mines. Four apps, one shared map of the ground beneath them, composed however your work actually runs. Piloting now in Kaduna and South Africa.
          </p>
          <div className="hero-actions">
            <button className="btn btn-white" onClick={onBookDemo}>
              Book a demo
              <svg viewBox="0 0 14 14" fill="none">
                <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <button className="btn btn-ghost" onClick={() => onJump("process")}>
              How it works
            </button>
          </div>
        </div>
      </div>

      <div className="hero-bottom up" style={{ animationDelay: "0.6s" }}>
        <span className="hero-bottom-item">
          <span className="live-dot" />
          <span>Now piloting</span>
          <span className="v">Nigeria · South Africa</span>
        </span>
        <span className="hero-bottom-item"><span>Active targets</span><span className="vmono">2,148</span></span>
        <span className="hero-bottom-item"><span>Models</span><span className="vmono">14 commodities</span></span>
      </div>
    </section>
  );
}

/* ============================================================
   Animated topographic-contour SVG (signature lithosquare motif)
============================================================ */
function HeroTopo() {
  // Generate concentric/nested contour lines
  const lines = [];
  const cx = 1200, cy = 540;
  for (let i = 0; i < 22; i++) {
    const off = i * 14;
    lines.push(off);
  }
  return (
    <svg width="100%" height="100%" viewBox="0 0 2200 1200" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <radialGradient id="topo-fade" cx="60%" cy="50%" r="60%">
          <stop offset="0%"  stopColor="#ffffff" stopOpacity="0.0"/>
          <stop offset="55%" stopColor="#ffffff" stopOpacity="0.10"/>
          <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
        </radialGradient>
        <mask id="topo-mask">
          <rect width="2200" height="1200" fill="url(#topo-fade)"/>
        </mask>
      </defs>
      <g mask="url(#topo-mask)" fill="none" stroke="#ffffff" strokeOpacity="0.22" strokeWidth="0.7">
        {lines.map((off, i) => {
          // Smooth, organic contour using cubic curves
          const a = off;
          const d = `
            M ${-100 + a*0.4} ${cy - 60 + a*1.6}
            C ${300 + a*0.3} ${cy - 200 + a*1.4}, ${700 + a*0.2} ${cy - 320 + a*1.2}, ${cx} ${cy - 380 + a*1.0}
            S ${1600 + a*0.4} ${cy - 200 + a*0.9}, ${2300 - a*0.2} ${cy - 60 + a*1.1}
          `;
          return <path key={i} d={d} />;
        })}
        {/* second set, rotated */}
        {lines.slice(0, 14).map((off, i) => {
          const a = off + 50;
          const d = `
            M ${-100 + a*0.2} ${100 + a*1.3}
            C ${500} ${50 + a*1.2}, ${1100 + a*0.2} ${30 + a*1.1}, ${1600 + a*0.3} ${90 + a*1.0}
            S ${2100} ${200 + a*0.9}, ${2300} ${260 + a*0.95}
          `;
          return <path key={"b"+i} d={d} strokeOpacity="0.14" />;
        })}
      </g>

      {/* Crosshair / locator pin */}
      <g transform="translate(1660, 360)" opacity="0.7">
        <circle cx="0" cy="0" r="34" fill="none" stroke="#ffffff" strokeOpacity="0.18" />
        <circle cx="0" cy="0" r="20" fill="none" stroke="#ffffff" strokeOpacity="0.34" />
        <circle cx="0" cy="0" r="3" fill="#c8a45a" />
        <line x1="-46" y1="0" x2="-26" y2="0" stroke="#ffffff" strokeOpacity="0.4" />
        <line x1="26" y1="0" x2="46" y2="0" stroke="#ffffff" strokeOpacity="0.4" />
        <line x1="0" y1="-46" x2="0" y2="-26" stroke="#ffffff" strokeOpacity="0.4" />
        <line x1="0" y1="26" x2="0" y2="46" stroke="#ffffff" strokeOpacity="0.4" />
        <text x="50" y="4" fontFamily="Geist Mono, monospace" fontSize="12" fill="#ffffff" fillOpacity="0.55" letterSpacing="0.1em">TGT · KAD-001</text>
      </g>
    </svg>
  );
}

window.Hero = Hero;