/* Yellow Stone Traders & General Supplies — Contact page hero background
 * A gold envelope with a wax-seal medallion — a direct "send us a message"
 * visual — with a few small floating nodes nearby standing in for the
 * different ways to reach the team (phone, email, a site visit). 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.5, 9.5);

  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.6, 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 cardMat = new THREE.MeshStandardMaterial({
    color: 0x201a10, metalness: 0.15, roughness: 0.55, flatShading: true
  });
  var goldMatFlat = 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.34,
    metalness: 0.85, roughness: 0.26
  });

  var group = new THREE.Group();

  // ---- envelope: a flat card with a gold-edged rim, a printed "V" flap
  // outline, and a wax-seal medallion where the flap point meets the body ----
  var envelope = new THREE.Group();

  var w = 2.7, h = 1.85;
  var envRim = new THREE.Mesh(new THREE.BoxGeometry(w + 0.1, h + 0.1, 0.05), goldMatFlat);
  envRim.position.z = -0.03;
  envelope.add(envRim);

  var card = new THREE.Mesh(new THREE.BoxGeometry(w, h, 0.07), cardMat);
  envelope.add(card);

  // flap outline, two bars forming a "V" from the top edge down to the seal
  function flapBar(length, angle, xOff) {
    var bar = new THREE.Mesh(new THREE.BoxGeometry(length, 0.06, 0.05), goldMatFlat);
    bar.position.set(xOff, h * 0.12, 0.05);
    bar.rotation.z = angle;
    return bar;
  }
  var halfDiag = Math.sqrt(Math.pow(w * 0.5, 2) + Math.pow(h * 0.38, 2));
  var angle = Math.atan2(h * 0.38, w * 0.5);
  envelope.add(flapBar(halfDiag, angle, -w * 0.25));
  envelope.add(flapBar(halfDiag, -angle, w * 0.25));

  // wax-seal medallion at the flap's point
  var seal = new THREE.Mesh(new THREE.CylinderGeometry(0.32, 0.32, 0.12, 24), goldMatSmooth);
  seal.rotation.x = Math.PI / 2;
  seal.position.set(0, h * 0.12, 0.1);
  envelope.add(seal);
  var sealRing = new THREE.Mesh(new THREE.TorusGeometry(0.2, 0.03, 10, 24), goldMatFlat);
  sealRing.position.set(0, h * 0.12, 0.17);
  envelope.add(sealRing);

  envelope.position.set(0, -0.1, 0);
  envelope.rotation.y = -0.25;
  envelope.rotation.x = 0.08;
  group.add(envelope);

  // ---- small floating "channel" nodes (phone / email / visit) ----
  var nodes = [];
  var nodeLayout = [
    { x: 2.6, y: -0.9, z: 0.5, s: 0.24, floatOffset: 0 },
    { x: -2.5, y: -0.6, z: -0.4, s: 0.28, floatOffset: 1.1 },
    { x: 1.9, y: 1.2, z: -0.6, s: 0.2, floatOffset: 2.1 }
  ];
  nodeLayout.forEach(function (d) {
    var m = new THREE.Mesh(new THREE.IcosahedronGeometry(d.s, 0), goldMatFlat);
    m.position.set(d.x, d.y, d.z);
    m.userData.baseY = d.y;
    m.userData.floatOffset = d.floatOffset;
    group.add(m);
    nodes.push(m);
  });

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

  var orbitRingGeo = new THREE.TorusGeometry(4.1, 0.008, 8, 96);
  var orbitRingMat = new THREE.MeshBasicMaterial({ color: 0xfdaf17, transparent: true, opacity: 0.22 });
  var orbitRing = new THREE.Mesh(orbitRingGeo, orbitRingMat);
  orbitRing.rotation.x = Math.PI / 2.4;
  orbitRing.position.copy(group.position);
  scene.add(orbitRing);

  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.09;
    orbitRing.rotation.z += delta * 0.045;

    nodes.forEach(function (m) {
      m.position.y = m.userData.baseY + Math.sin(t * 0.9 + m.userData.floatOffset) * 0.14;
      m.rotation.y += delta * 0.3;
    });

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

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

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