/* Yellow Stone Traders & General Supplies — Services hero background
 * A low-poly house/building under construction, in the same gold-metal
 * finish as the homepage ore cluster, with a small crane arm alongside it.
 * Same interaction model as scene-gold.js: slow auto-rotation, mouse
 * parallax, and a scroll-driven fade/scale — just a different subject
 * (house contracting) for the Services page.
 * 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.6, 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);

  // Same warm/cool studio lighting rig as the homepage ore scene.
  scene.add(new THREE.AmbientLight(0x2a2116, 1.1));
  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.82, roughness: 0.34, flatShading: true
  });
  var steelMat = new THREE.MeshStandardMaterial({
    color: 0x2a2016, metalness: 0.6, roughness: 0.5, flatShading: true
  });

  var group = new THREE.Group();

  // ---- the house: walls + a four-sided (hip-style) roof + chimney ----
  var house = new THREE.Group();
  var walls = new THREE.Mesh(new THREE.BoxGeometry(2.6, 1.5, 2.2), goldMat);
  walls.position.y = 0.75;
  house.add(walls);

  var roof = new THREE.Mesh(new THREE.ConeGeometry(2.05, 1.25, 4), goldMat);
  roof.rotation.y = Math.PI / 4;
  roof.position.y = 1.5 + 0.62;
  house.add(roof);

  var chimney = new THREE.Mesh(new THREE.BoxGeometry(0.32, 0.9, 0.32), steelMat);
  chimney.position.set(0.7, 1.9, 0.5);
  house.add(chimney);

  house.position.set(0.9, -0.5, 0);
  group.add(house);

  // ---- a small crane beside the house, under-construction feel ----
  var crane = new THREE.Group();
  var mast = new THREE.Mesh(new THREE.BoxGeometry(0.12, 3.4, 0.12), steelMat);
  mast.position.y = 1.7;
  crane.add(mast);
  var jib = new THREE.Mesh(new THREE.BoxGeometry(2.6, 0.1, 0.1), steelMat);
  jib.position.set(-1.1, 3.3, 0);
  crane.add(jib);
  var counterJib = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.1, 0.1), steelMat);
  counterJib.position.set(0.65, 3.3, 0);
  crane.add(counterJib);
  var hookLine = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.015, 1.1, 6), steelMat);
  hookLine.position.set(-1.9, 2.75, 0);
  crane.add(hookLine);
  var hookBlock = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.22, 0.22), goldMat);
  hookBlock.position.set(-1.9, 2.2, 0);
  crane.add(hookBlock);
  crane.position.set(-2.6, -1.9, -0.6);
  group.add(crane);

  // ---- scattered gold "blocks" (bricks/materials on site), like the
  // floating nuggets in the homepage scene ----
  var blocks = [];
  var blockLayout = [
    { s: 0.36, x: 3.1, y: -1.6, z: 0.6 },
    { s: 0.26, x: 3.6, y: -1.0, z: -0.3 },
    { s: 0.3, x: 2.5, y: -2.0, z: -0.5 },
    { s: 0.2, x: -0.4, y: -1.9, z: 0.9 }
  ];
  blockLayout.forEach(function (d) {
    var m = new THREE.Mesh(new THREE.BoxGeometry(d.s, d.s, d.s), goldMat);
    m.position.set(d.x, d.y, d.z);
    m.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
    group.add(m);
    blocks.push(m);
  });

  // Faint wireframe orbit ring — the same blueprint/survey nod as the homepage scene.
  var ringGeo = new THREE.TorusGeometry(4.6, 0.008, 8, 96);
  var ringMat = new THREE.MeshBasicMaterial({ color: 0xfdaf17, transparent: true, opacity: 0.22 });
  var ring = new THREE.Mesh(ringGeo, ringMat);
  ring.rotation.x = Math.PI / 2.4;
  scene.add(ring);

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

  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();
  function animate() {
    requestAnimationFrame(animate);
    var delta = clock.getDelta();

    group.rotation.y += delta * 0.1;
    ring.rotation.z += delta * 0.05;

    blocks.forEach(function (m, i) {
      m.rotation.y += delta * (0.06 + i * 0.01);
    });
    crane.children[3].rotation.y += delta * 0.02; // hook line drifts almost imperceptibly

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

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

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