script.js

// === GLOBAL NAVIGATION HIGHLIGHT ===
(function highlightActiveNav() {
  const navLinks = document.querySelectorAll("header nav ul li a");
  navLinks.forEach((link) => {
    if (window.location.pathname.endsWith(link.getAttribute("href"))) {
      link.classList.add("active");
    }
  });
})();

// === STONE AGE INTERACTIVES ===
(function stoneAgeDemos() {
  // Wheel Spin
  const wheel = document.getElementById("stone-wheel");
  if (wheel) {
    let angle = 0,
      dragging = false,
      prevX = 0;
    wheel.addEventListener("mousedown", (e) => {
      dragging = true;
      prevX = e.clientX;
    });
    document.addEventListener("mousemove", (e) => {
      if (dragging) {
        angle += (e.clientX - prevX) * 0.9;
        wheel.style.transform = `rotate(${angle}deg)`;
        prevX = e.clientX;
      }
    });
    document.addEventListener("mouseup", () => (dragging = false));
    // Touch support
    wheel.addEventListener("touchstart", (e) => {
      dragging = true;
      prevX = e.touches[0].clientX;
    });
    document.addEventListener("touchmove", (e) => {
      if (dragging && e.touches && e.touches[0]) {
        angle += (e.touches[0].clientX - prevX) * 0.9;
        wheel.style.transform = `rotate(${angle}deg)`;
        prevX = e.touches[0].clientX;
      }
    });
    document.addEventListener("touchend", () => (dragging = false));
  }

  // Cave Art Drawing
  const cave = document.getElementById("cave-canvas");
  if (cave) {
    const ctx = cave.getContext("2d");
    let drawing = false;
    cave.addEventListener("mousedown", (e) => {
      drawing = true;
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);
    });
    cave.addEventListener("mousemove", (e) => {
      if (drawing) {
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.strokeStyle = "#7e5e2e";
        ctx.lineWidth = 3.5;
        ctx.lineCap = "round";
        ctx.stroke();
      }
    });
    cave.addEventListener("mouseup", () => {
      drawing = false;
    });
    cave.addEventListener("mouseleave", () => {
      drawing = false;
    });
    // Touch
    cave.addEventListener("touchstart", (e) => {
      drawing = true;
      const rect = cave.getBoundingClientRect();
      ctx.beginPath();
      ctx.moveTo(
        e.touches[0].clientX - rect.left,
        e.touches[0].clientY - rect.top,
      );
    });
    cave.addEventListener("touchmove", (e) => {
      if (drawing) {
        const rect = cave.getBoundingClientRect();
        ctx.lineTo(
          e.touches[0].clientX - rect.left,
          e.touches[0].clientY - rect.top,
        );
        ctx.strokeStyle = "#7e5e2e";
        ctx.lineWidth = 3.5;
        ctx.lineCap = "round";
        ctx.stroke();
      }
    });
    cave.addEventListener("touchend", () => {
      drawing = false;
    });
  }
})();

// === ANCIENT CIVILIZATIONS INTERACTIVES ===
(function ancientDemos() {
  // Pyramid Secret Chamber
  const pyramid = document.getElementById("pyramid");
  if (pyramid) {
    const chamber = document.getElementById("chamber");
    pyramid.addEventListener("click", () => {
      chamber.setAttribute(
        "opacity",
        chamber.getAttribute("opacity") === "1" ? "0" : "1",
      );
    });
  }

  // Cuneiform Typing Simulator
  const cuneiformInput = document.getElementById("cuneiform-input");
  const cuneiformOutput = document.getElementById("cuneiform-output");
  if (cuneiformInput && cuneiformOutput) {
    // Map Latin to a fake cuneiform font (or just unicode blocks for demo)
    cuneiformInput.addEventListener("input", () => {
      let val = cuneiformInput.value;
      cuneiformOutput.textContent = val.replace(/[A-Za-z]/g, (ch) =>
        String.fromCharCode(
          0x12000 + ((ch.toUpperCase().charCodeAt(0) - 65) % 80),
        ),
      );
    });
  }

  // Abacus (Simple Counter)
  const abacusInc = document.getElementById("abacus-inc");
  const abacusDec = document.getElementById("abacus-dec");
  const abacusVal = document.getElementById("abacus-value");
  if (abacusInc && abacusDec && abacusVal) {
    let value = 0;
    abacusInc.onclick = () => {
      value++;
      abacusVal.textContent = value;
    };
    abacusDec.onclick = () => {
      value--;
      abacusVal.textContent = value;
    };
  }
})();

// === INDUSTRIAL REVOLUTION INTERACTIVES ===
(function industrialDemos() {
  // Steam Engine Whistle
  const whistle = document.getElementById("whistle");
  const steam = document.getElementById("steam");
  if (whistle && steam) {
    whistle.addEventListener("mousedown", () => {
      steam.setAttribute("opacity", "0.9");
      setTimeout(() => steam.setAttribute("opacity", "0"), 700);
    });
    whistle.addEventListener("touchstart", () => {
      steam.setAttribute("opacity", "0.9");
      setTimeout(() => steam.setAttribute("opacity", "0"), 700);
    });
  }

  // Morse Code Tapper
  const morseBtn = document.getElementById("morse-btn");
  const morseOut = document.getElementById("morse-output");
  if (morseBtn && morseOut) {
    let code = "";
    let timer = null;
    morseBtn.addEventListener("mousedown", () => {
      morseBtn.textContent = "•";
      timer = setTimeout(() => {
        morseBtn.textContent = "–";
        code += "-";
      }, 250);
    });
    morseBtn.addEventListener("mouseup", () => {
      if (morseBtn.textContent === "•") code += ".";
      morseBtn.textContent = "Tap";
      clearTimeout(timer);
      morseOut.textContent = code;
    });
    morseBtn.addEventListener("mouseleave", () => {
      morseBtn.textContent = "Tap";
      clearTimeout(timer);
    });
    document.getElementById("morse-clear")?.addEventListener("click", () => {
      code = "";
      morseOut.textContent = "";
    });
  }

  // Spinning Jenny Animation
  const jenny = document.getElementById("jenny");
  if (jenny) {
    let spinning = false;
    jenny.addEventListener("click", () => {
      if (!spinning) {
        spinning = true;
        jenny.style.transition =
          "transform 2s cubic-bezier(.68,-0.55,.27,1.55)";
        jenny.style.transform = "rotate(720deg)";
        setTimeout(() => {
          jenny.style.transition = "";
          jenny.style.transform = "";
          spinning = false;
        }, 2000);
      }
    });
  }
})();

// === DIGITAL ERA INTERACTIVES ===
(function digitalDemos() {
  // Terminal Emulator
  const termInput = document.getElementById("terminal-input");
  const termOutput = document.getElementById("terminal-output");
  if (termInput && termOutput) {
    termInput.focus();
    termInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        let val = termInput.value.trim().toLowerCase();
        if (!val) return;
        if (val === "hello") termOutput.innerHTML = "👋 Hello, human!";
        else if (val === "who are you")
          termOutput.innerHTML = "🤖 I am a digital assistant.";
        else if (val === "history")
          termOutput.innerHTML =
            "Computers evolved from vacuum tubes to AI in less than a century!";
        else if (val === "ascii")
          termOutput.innerHTML = "<pre>01001000 01101001</pre>";
        else termOutput.innerHTML = "Unknown command.";
        termInput.value = "";
      }
    });
  }

  // Pixel Art Demo
  const pixelCanvas = document.getElementById("pixel-canvas");
  if (pixelCanvas) {
    const ctx = pixelCanvas.getContext("2d");
    let drawing = false;
    pixelCanvas.addEventListener("mousedown", (e) => {
      drawing = true;
      draw(e);
    });
    pixelCanvas.addEventListener("mousemove", (e) => {
      if (drawing) draw(e);
    });
    pixelCanvas.addEventListener("mouseup", () => {
      drawing = false;
    });
    pixelCanvas.addEventListener("mouseleave", () => {
      drawing = false;
    });
    function draw(e) {
      const rect = pixelCanvas.getBoundingClientRect();
      const x = Math.floor((e.clientX - rect.left) / 10) * 10;
      const y = Math.floor((e.clientY - rect.top) / 10) * 10;
      ctx.fillStyle = "#00c3ff";
      ctx.fillRect(x, y, 10, 10);
    }
  }

  // Turing Machine Demo (very simple)
  const turingBtn = document.getElementById("turing-btn");
  const turingTape = document.getElementById("turing-tape");
  if (turingBtn && turingTape) {
    let tape = [0, 0, 0, 0, 0],
      pos = 2;
    function renderTape() {
      turingTape.innerHTML = tape
        .map(
          (v, i) =>
            `<span style="padding:0.2em 0.5em;${i === pos ? "background:#00c3ff;color:#fff;" : ""}">${v}</span>`,
        )
        .join("");
    }
    renderTape();
    turingBtn.onclick = () => {
      tape[pos] = tape[pos] ? 0 : 1;
      pos = (pos + 1) % tape.length;
      renderTape();
    };
  }
})();

// === FUTURE INTERACTIVES ===
(function futureDemos() {
  // Rocket Launch
  const rocket = document.getElementById("rocket");
  const flame = document.getElementById("flame");
  if (rocket && flame) {
    rocket.addEventListener("click", () => {
      rocket.style.transition =
        "transform 1.2s cubic-bezier(.68,-0.55,.27,1.55)";
      flame.setAttribute("opacity", "1");
      rocket.style.transform = "translateY(-60px) scale(1.2)";
      setTimeout(() => {
        flame.setAttribute("opacity", "0");
        rocket.style.transform = "";
      }, 1000);
    });
  }

  // AI Chatbot (very simple)
  const aiInput = document.getElementById("ai-input");
  const aiOutput = document.getElementById("ai-output");
  if (aiInput && aiOutput) {
    aiInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        let val = aiInput.value.trim().toLowerCase();
        if (!val) return;
        if (val.includes("hello"))
          aiOutput.innerHTML = "🤖 Hello from the future!";
        else if (val.includes("ai"))
          aiOutput.innerHTML =
            "AI will augment human creativity, not replace it.";
        else if (val.includes("space"))
          aiOutput.innerHTML = "Mars is just the beginning!";
        else aiOutput.innerHTML = "I'm learning more every day...";
        aiInput.value = "";
      }
    });
  }

  // Quantum Bit Visualizer
  const qbit = document.getElementById("qbit");
  if (qbit) {
    let state = 0;
    qbit.addEventListener("click", () => {
      state = (state + 1) % 3;
      if (state === 0) qbit.textContent = "0";
      else if (state === 1) qbit.textContent = "1";
      else qbit.textContent = "ψ";
    });
  }
})();

// === GENERAL ===
// Keyboard accessibility for all interactive SVGs and demos
document.querySelectorAll("svg,canvas,button,input").forEach((el) => {
  el.setAttribute("tabindex", 0);
});