// --- site.js ---

// 1) Footer year + nav animation trigger
document.addEventListener("DOMContentLoaded", () => {
  const yearEl = document.getElementById("year");
  if (yearEl) yearEl.textContent = new Date().getFullYear();

  // Trigger the CSS keyframe entrance next frame
  requestAnimationFrame(() => {
    document.documentElement.classList.add("vm-mounted");
  });

  // Start flakes once DOM is ready
  startFlakes();
});

// 2) Flakes / parallax
function startFlakes() {
  const cfg = [
    {
      id: "flake1",
      kind: "rotate",
      baseDeg: -20,
      rotPeriod: 70000,
      parallax: 18,
    },
    {
      id: "flake2",
      kind: "drift",
      ampX: 50,
      ampY: 50,
      period: 20000,
      parallax: 16,
    },
    { id: "flake3", kind: "rotate", baseDeg: 0, rotPeriod: 40000, parallax: 8 },
    {
      id: "flake4",
      kind: "drift",
      ampX: 10,
      ampY: 10,
      period: 4000,
      parallax: 12,
    },
    {
      id: "flake5",
      kind: "drift",
      ampX: 25,
      ampY: 18,
      period: 15000,
      parallax: 10,
    },
  ];

  const hero = document.querySelector(".hero");
  if (!hero) return;

  const flakes = [];
  cfg.forEach((c) => {
    const el = document.getElementById(c.id);
    if (!el) return;
    const cs = getComputedStyle(el);
    flakes.push({
      el,
      kind: c.kind,
      baseDeg: c.baseDeg || 0,
      rotPeriod: c.rotPeriod || 0,
      ampX: c.ampX || 0,
      ampY: c.ampY || 0,
      period: c.period || 0,
      parallax: c.parallax || 0,
      phaseX: Math.random() * Math.PI * 2,
      phaseY: Math.random() * Math.PI * 2,
    });
  });

  let targetPX = 0,
    targetPY = 0;
  let curPX = 0,
    curPY = 0;

  function onMove(e) {
    const r = hero.getBoundingClientRect();
    const nx = ((e.clientX - r.left) / r.width) * 2 - 1;
    const ny = ((e.clientY - r.top) / r.height) * 2 - 1;
    targetPX = nx;
    targetPY = ny;
  }
  hero.addEventListener("mousemove", onMove);
  hero.addEventListener("mouseleave", () => {
    targetPX = 0;
    targetPY = 0;
  });

  let last = performance.now();
  function tick(now) {
    const dt = now - last;
    last = now;
    const lerp = 1 - Math.pow(0.001, dt / 2000);
    curPX += (targetPX - curPX) * lerp;
    curPY += (targetPY - curPY) * lerp;

    flakes.forEach((f) => {
      let offX = 0,
        offY = 0,
        rot = 0;

      if (f.kind === "rotate" && f.rotPeriod > 0) {
        const dpm = 360 / f.rotPeriod; // deg/ms
        rot = f.baseDeg + now * dpm;
      } else if (f.kind === "drift" && f.period > 0) {
        const w = (Math.PI * 2) / f.period;
        offX = Math.sin(f.phaseX + now * w) * f.ampX;
        offY = Math.cos(f.phaseY + now * w) * f.ampY;
        offX += Math.sin(f.phaseX * 1.7 + now * w * 2.1) * (f.ampX * 0.15);
        offY += Math.cos(f.phaseY * 1.3 + now * w * 1.9) * (f.ampY * 0.15);
      }

      const pX = curPX * f.parallax;
      const pY = curPY * f.parallax;

      f.el.style.transform = `translate3d(${offX + pX}px, ${
        offY + pY
      }px, 0) rotate(${rot}deg)`;
    });

    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

// Smooth-scroll fallback for older browsers / Safari quirks
document.addEventListener("click", (e) => {
  const link = e.target.closest('a[href^="#"]');
  if (!link) return;

  const hash = link.getAttribute("href");
  // Ignore just "#" (top) and empty
  if (!hash || hash === "#") return;

  const id = decodeURIComponent(hash.slice(1));
  const target = document.getElementById(id);
  if (!target) return;

  e.preventDefault();
  target.scrollIntoView({ behavior: "smooth" });

  // Update the hash without jumping
  history.pushState(null, "", hash);
});

// 3) Google Maps (single guarded callback)
let __vmMapInited = false;
window.initMap = function () {
  if (__vmMapInited) return;
  __vmMapInited = true;

  const mapEl = document.getElementById("map");
  if (!mapEl || typeof google === "undefined" || !google.maps) return;

  const loc = { lat: 45.2103, lng: -123.1987 };
  const map = new google.maps.Map(mapEl, {
    center: loc,
    zoom: 15,
    styles: [
      {
        featureType: "landscape",
        elementType: "labels",
        stylers: [{ visibility: "off" }],
      },
      {
        featureType: "transit",
        elementType: "labels",
        stylers: [{ visibility: "off" }],
      },
      {
        featureType: "poi",
        elementType: "labels",
        stylers: [{ visibility: "off" }],
      },
      {
        featureType: "water",
        elementType: "labels",
        stylers: [{ visibility: "off" }],
      },
      {
        featureType: "road",
        elementType: "labels.icon",
        stylers: [{ visibility: "off" }],
      },
      {
        stylers: [
          { hue: "#00aaff" },
          { saturation: -100 },
          { gamma: 2.15 },
          { lightness: 12 },
        ],
      },
      {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{ visibility: "on" }, { lightness: 24 }],
      },
      {
        featureType: "road",
        elementType: "geometry",
        stylers: [{ lightness: 57 }],
      },
    ],
  });

  new google.maps.Marker({
    position: loc,
    map,
    title: "Velvet Monkey Tea Bar",
  });
};
