/* Yellow Stone Traders & General Supplies — Projects page hero background
 * A small cluster of gold location-pin markers, like sites plotted on a
 * map — one for each engagement. Same interaction model as the other hero
 * scenes: slow auto-rotation, mouse parallax, scroll-driven fade/scale.
 * Skipped on small screens and prefers-reduced-motion.
 */
(function () {
  var canvas = document.getElementById('heroCanvas');
  if (!canvas || typeof THREE === 'undefined') return;
  if (window.matchMedia('(max-width: 700px)').matches) return;

  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.set(0, 0.8, 10);

  var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
  renderer.setClearColor(0x000000, 0);

  scene.add(new THREE.AmbientLight(0x2a2116, 1.15));
  var key = new THREE.PointLight(0xffcf7a, 3.4, 40);
  key.position.set(6, 6, 8);
  scene.add(key);
  var rim = new THREE.PointLight(0x6d7dff, 1.1, 40);
  rim.position.set(-7, -3, 5);
  scene.add(rim);
  var fill = new THREE.PointLight(0xffb347, 1.6, 40);
  fill.position.set(-4, 5, -4);
  scene.add(fill);

  var goldMat = new THREE.MeshStandardMaterial({
    color: 0xf3ab1c, emissive: 0x3a2200, emissiveIntensity: 0.32,
    metalness: 0.85, roughness: 0.3, flatShading: true
  });
  var goldMatSmooth = new THREE.MeshStandardMaterial({
    color: 0xf3ab1c, emissive: 0x3a2200, emissiveIntensity: 0.32,
    metalness: 0.85, roughness: 0.3
  });

  function makePin(scale) {
    // Teardrop map-pin: a sphere head over a cone point, plus a small base ring.
    var pin = new THREE.Group();
    var head = new THREE.Mesh(new THREE.SphereGeometry(0.42 * scale, 20, 16), goldMatSmooth);
    head.position.y = 0.42 * scale;
    pin.add(head);
    var point = new THREE.Mesh(new THREE.ConeGeometry(0.42 * scale, 0.62 * scale, 20), goldMatSmooth);
    point.position.y = -0.06 * scale;
    point.rotation.x = Math.PI;
    pin.add(point);
    var hole = new THREE.Mesh(new THREE.SphereGeometry(0.14 * scale, 12, 10), goldMat);
    hole.position.y = 0.42 * scale;
    hole.scale.set(1, 1, 0.4);
    pin.add(hole);
    return pin;
  }

  var group = new THREE.Group();
  var pins = [];
  // Varying heights/positions — like markers dropped across a site map, one
  // taller "featured" pin among a scatter of others.
  var layout = [
    { s: 1.15, x: 0.4,  y: -0.2, z: 0.2, floatY: 0 },
    { s: 0.7,  x: -1.7, y: -1.3, z: -0.4, floatY: 0.3 },
    { s: 0.6,  x: 1.9,  y: -1.5, z: 0.6, floatY: 0.6 },
    { s: 0.55, x: -0.6, y: -1.7, z: 0.9, floatY: 0.9 },
    { s: 0.5,  x: 2.4,  y: -0.6, z: -0.8, floatY: 1.2 }
  ];
  layout.forEach(function (d) {
    var pin = makePin(d.s);
    pin.position.set(d.x, d.y, d.z);
    pin.userData.floatOffset = d.floatY;
    pin.userData.baseY = d.y;
    group.add(pin);
    pins.push(pin);
  });

  group.position.x = 0.5;
  scene.add(group);

  // A flat translucent "site plan" disc under the pins — grounds them as
  // markers on a plan rather than objects floating in space.
  var planGeo = new THREE.CircleGeometry(3.4, 48);
  var planMat = new THREE.MeshBasicMaterial({ color: 0xfdaf17, transparent: true, opacity: 0.06, side: THREE.DoubleSide });
  var plan = new THREE.Mesh(planGeo, planMat);
  plan.rotation.x = Math.PI / 2;
  plan.position.set(0.5, -2.05, 0);
  scene.add(plan);

  var ringGeo = new THREE.TorusGeometry(3.4, 0.008, 8, 96);
  var ringMat = new THREE.MeshBasicMaterial({ color: 0xfdaf17, transparent: true, opacity: 0.28 });
  var ring = new THREE.Mesh(ringGeo, ringMat);
  ring.rotation.x = Math.PI / 2;
  ring.position.copy(plan.position);
  scene.add(ring);

  function handleResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  window.addEventListener('resize', handleResize);

  var scrollProgress = 0;
  window.addEventListener('scroll', function () {
    var doc = document.documentElement;
    var max = doc.scrollHeight - doc.clientHeight;
    scrollProgress = max > 0 ? Math.min(window.scrollY / (window.innerHeight * 1.2), 1) : 0;
  }, { passive: true });

  var mouseX = 0, mouseY = 0;
  window.addEventListener('mousemove', function (e) {
    mouseX = (e.clientX / window.innerWidth - 0.5);
    mouseY = (e.clientY / window.innerHeight - 0.5);
  });

  if (reduceMotion) {
    renderer.render(scene, camera);
    return;
  }

  var clock = new THREE.Clock();
  var t = 0;
  function animate() {
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    t += delta;

    group.rotation.y += delta * 0.08;
    ring.rotation.z += delta * 0.04;

    pins.forEach(function (pin) {
      pin.position.y = pin.userData.baseY + Math.sin(t * 0.8 + pin.userData.floatOffset) * 0.08;
    });

    camera.position.x += (mouseX * 1.2 - camera.position.x) * 0.03;
    camera.position.y += (0.8 - mouseY * 0.6 - camera.position.y) * 0.03;
    camera.lookAt(0.5, -0.4, 0);

    group.position.y = -scrollProgress * 1.4;
    group.scale.setScalar(1 - scrollProgress * 0.1);

    renderer.render(scene, camera);
  }
  animate();
})();
