(() => {
  const section = document.getElementById("scanner-showcase");
  if (!section) return;

  const pillText = document.getElementById("scanPillText");
  const bars = section.querySelectorAll(".confidence-fill, .pred-bar-fill");

  const DURATIONS = {
    scanning: 2400,
    detecting: 650,
    result: 3400,
  };

  function setState(state) {
    section.dataset.scanState = state;

    if (state === "scanning") {
      pillText.textContent = "Scanning...";
      bars.forEach((bar) => {
        bar.style.width = "0%";
      });
    } else if (state === "detecting") {
      pillText.textContent = "Detecting...";
    } else if (state === "result") {
      pillText.textContent = "Detected";
      bars.forEach((bar) => {
        bar.style.width = bar.dataset.target;
      });
    }
  }

  function cycle(state) {
    setState(state);
    const next = state === "scanning" ? "detecting" : state === "detecting" ? "result" : "scanning";
    setTimeout(() => cycle(next), DURATIONS[state]);
  }

  cycle("scanning");
})();