index2.js

const MODES = {
  state: {
    thesis:
      "Design city systems that still hold when policy pressure, media pressure, and crisis pressure arrive together.",
    note: "State mode: population-scale trust, governance fit, and operational continuity.",
    accent: "#1f50b5",
    accent2: "#d9422b"
  },
  capital: {
    thesis:
      "Back execution discipline, not innovation theater: deployability, measurable service outcomes, and institutional adoption loops.",
    note: "Capital mode: risk compression through tested implementation architecture.",
    accent: "#9f2d21",
    accent2: "#b48d18"
  },
  culture: {
    thesis:
      "Use anthropology and narrative as infrastructure for public imagination, behavioral design, and policy consequence testing.",
    note: "Culture mode: meaning systems translated into civic action.",
    accent: "#5f2d87",
    accent2: "#0e7a73"
  }
};

const TIMELINE = [
  {
    meta: "2004-2010 · Bangkok, MIT, Oxford",
    title: "Architecture as discipline",
    body:
      "Training across architecture and urban studies established the baseline: ideas matter only when they survive social reality.",
    image: "assets/media/portrait-side.jpg",
    alt: "Portrait of Non"
  },
  {
    meta: "2013-2016 · Shanghai fieldwork",
    title: "Urban anthropology under transformation",
    body:
      "Neighborhood fieldwork captured how housing, heritage, mobility, and negotiation shape real urban behavior.",
    image: "assets/media/fieldwork-shanghai-alley.jpg",
    alt: "Shanghai fieldwork"
  },
  {
    meta: "2015-2018 · Publications",
    title: "Research to framework",
    body:
      "Academic outputs connected ethnographic evidence with concrete arguments for city-level design and governance decisions.",
    image: "assets/media/fieldwork-presentation.jpg",
    alt: "Research presentation"
  },
  {
    meta: "2019-Present · depa + SLIC",
    title: "Policy translated to operations",
    body:
      "Technology-driven projects across all 77 provinces converted strategy into workflows, pilots, and measurable delivery.",
    image: "assets/media/lecture-stage-illustration.jpg",
    alt: "Framework whiteboard"
  },
  {
    meta: "2024-2025 · Hangzhou + Johor",
    title: "Regional scrutiny",
    body:
      "International stages and coalition work tested execution credibility in front of cross-border stakeholders.",
    image: "assets/media/award-stage.jpg",
    alt: "Global stage"
  },
  {
    meta: "2025-Now · ASEAN crisis operations",
    title: "Workshops under disruption",
    body:
      "ASEAN workshop methods were validated in flood conditions with active incident load and constrained response windows.",
    image: "assets/media/slic-meeting-room.jpg",
    alt: "Strategic meeting"
  }
];

const TOOLKITS = {
  intake: {
    name: "Citizen Issue Intake",
    channels: ["line_oa", "web_form", "field_agent"],
    schema: {
      issue_type: "string",
      urgency: "low|medium|high|critical",
      location: "lat,lng",
      media: ["image", "voice", "video"]
    },
    workflow: ["ingest", "ai_classify", "assign_owner", "notify_citizen", "close_loop"]
  },
  flood: {
    name: "Flood Golden Window",
    inputs: ["rain_sensor", "drainage_level", "citizen_reports"],
    thresholds: {
      rain_mm_per_hour: 55,
      watch_window_hours: 10,
      confidence_floor: 0.72
    },
    actions: ["warn_district", "deploy_field_unit", "notify_public", "start_damage_log"]
  },
  service: {
    name: "5-Star Service Loop",
    stages: ["report", "verify", "dispatch", "resolve", "rate"],
    targets: {
      response_time_hours: "<48",
      closure_rate_percent: ">90",
      citizen_rating: ">=4.2"
    },
    dashboard: ["issue_matrix", "agency_score", "hotspot_map"]
  },
  sprint: {
    name: "Workshop-to-Deployment Sprint",
    duration_days: 10,
    agenda: [
      "problem_framing",
      "stakeholder_map",
      "rapid_prototype",
      "live_field_test",
      "policy_alignment"
    ],
    outputs: ["service_blueprint", "pilot_kpi_contract", "owner_matrix"]
  },
  localai: {
    name: "Local AI Classifier",
    stack: ["local_embedding", "multilingual_llm", "rules_engine"],
    deployment: "on_prem_or_private_cloud",
    privacy: ["no_external_prompt_logging", "data_residency_enabled"],
    labels: ["flood", "waste", "mobility", "public_safety", "other"]
  }
};

const thesisNode = document.getElementById("mode-thesis");
const noteNode = document.getElementById("mode-note");
const modeButtons = Array.from(document.querySelectorAll(".mode-btn"));

const board = document.getElementById("composition-board");
const gridButtons = Array.from(document.querySelectorAll(".grid-btn"));
const rhythmRange = document.getElementById("rhythm-range");
const rhythmValue = document.getElementById("rhythm-value");
const scatterBtn = document.getElementById("scatter-btn");
const autoplayToggle = document.getElementById("autoplay-toggle");

const stageMeta = document.getElementById("stage-meta");
const stageTitle = document.getElementById("stage-title");
const stageBody = document.getElementById("stage-body");
const stageImage = document.getElementById("stage-image");
const stageButtons = Array.from(document.querySelectorAll(".stage-btn"));

const metricNodes = Array.from(document.querySelectorAll(".metric[data-counter]"));
const revealNodes = Array.from(document.querySelectorAll(".reveal"));

const utcClock = document.getElementById("utc-clock");
const zoneLabel = document.getElementById("zone-label");
const pulseLine = document.getElementById("pulse-line");

const kitButtons = Array.from(document.querySelectorAll(".kit-btn"));
const kitJson = document.getElementById("kit-json");

const GRID_MODES = ["straight", "diagonal", "radial"];
let activeMode = "state";
let activeGrid = "straight";
let activeStage = 0;
let autoGridEnabled = true;
let gridTimer;
let stageTimer;

const clockAnchorEpoch = Date.now();
const clockAnchorPerf = performance.now();

function rand(min, max) {
  return Math.random() * (max - min) + min;
}

function setMode(modeKey) {
  const mode = MODES[modeKey] || MODES.state;
  activeMode = modeKey in MODES ? modeKey : "state";

  if (thesisNode) thesisNode.textContent = mode.thesis;
  if (noteNode) noteNode.textContent = mode.note;

  document.documentElement.style.setProperty("--accent", mode.accent);
  document.documentElement.style.setProperty("--accent-2", mode.accent2);

  modeButtons.forEach((button) => {
    const isActive = button.dataset.mode === activeMode;
    button.classList.toggle("active", isActive);
    button.setAttribute("aria-selected", String(isActive));
    button.tabIndex = isActive ? 0 : -1;
  });
}

function setGrid(mode) {
  if (!board || !GRID_MODES.includes(mode)) return;
  activeGrid = mode;

  board.classList.remove(...GRID_MODES);
  board.classList.add(mode);

  gridButtons.forEach((button) => {
    const isActive = button.dataset.grid === mode;
    button.classList.toggle("active", isActive);
    button.setAttribute("aria-selected", String(isActive));
    button.tabIndex = isActive ? 0 : -1;
  });
}

function applyRhythm(percent) {
  const safe = Math.max(0, Math.min(100, Number(percent)));
  const normalized = safe / 100;

  document.documentElement.style.setProperty("--rhythm", normalized.toFixed(2));
  if (rhythmValue) rhythmValue.textContent = `${Math.round(safe)}%`;
}

function recomposeBoard(intensity = 1) {
  if (!board) return;

  const tiles = board.querySelectorAll(".tile");
  const rhythm = Number(getComputedStyle(document.documentElement).getPropertyValue("--rhythm")) || 0.6;
  const amp = (10 + rhythm * 20) * intensity;

  tiles.forEach((tile) => {
    tile.style.setProperty("--jx", `${rand(-amp, amp).toFixed(1)}px`);
    tile.style.setProperty("--jy", `${rand(-amp, amp).toFixed(1)}px`);
    tile.style.setProperty("--jr", `${rand(-2.2, 2.2).toFixed(2)}deg`);
    tile.style.setProperty("--rj", `${rand(-amp * 0.7, amp * 0.7).toFixed(1)}px`);
  });
}

function cycleGrid() {
  const idx = GRID_MODES.indexOf(activeGrid);
  setGrid(GRID_MODES[(idx + 1) % GRID_MODES.length]);
  recomposeBoard(0.8);
}

function startGridAuto() {
  stopGridAuto();
  gridTimer = setInterval(cycleGrid, 5200);
}

function stopGridAuto() {
  if (!gridTimer) return;
  clearInterval(gridTimer);
  gridTimer = undefined;
}

function toggleGridAuto() {
  autoGridEnabled = !autoGridEnabled;
  if (autoplayToggle) {
    autoplayToggle.textContent = `Auto Grid: ${autoGridEnabled ? "ON" : "OFF"}`;
    autoplayToggle.setAttribute("aria-pressed", String(autoGridEnabled));
  }

  if (autoGridEnabled) startGridAuto();
  else stopGridAuto();
}

function setupCompositionControls() {
  modeButtons.forEach((button) => {
    button.addEventListener("click", () => {
      setMode(button.dataset.mode || "state");
    });
  });

  gridButtons.forEach((button) => {
    button.addEventListener("click", () => {
      setGrid(button.dataset.grid || "straight");
      recomposeBoard(0.9);
      if (autoGridEnabled) startGridAuto();
    });
  });

  if (rhythmRange) {
    applyRhythm(rhythmRange.value);
    rhythmRange.addEventListener("input", (event) => {
      applyRhythm(event.target.value);
      recomposeBoard(0.7);
    });
  }

  if (scatterBtn) {
    scatterBtn.addEventListener("click", () => recomposeBoard(1.3));
  }

  if (autoplayToggle) {
    autoplayToggle.addEventListener("click", toggleGridAuto);
  }

  setMode("state");
  setGrid("straight");
  recomposeBoard(1);
  if (autoGridEnabled) startGridAuto();
}

function setStage(index) {
  const safe = Math.max(0, Math.min(index, TIMELINE.length - 1));
  activeStage = safe;
  const stage = TIMELINE[safe];
  if (!stage) return;

  if (stageMeta) stageMeta.textContent = stage.meta;
  if (stageTitle) stageTitle.textContent = stage.title;
  if (stageBody) stageBody.textContent = stage.body;

  if (stageImage) {
    stageImage.src = stage.image;
    stageImage.alt = stage.alt;
  }

  stageButtons.forEach((button) => {
    const isActive = Number(button.dataset.index) === safe;
    button.classList.toggle("active", isActive);
    button.setAttribute("aria-selected", String(isActive));
    button.tabIndex = isActive ? 0 : -1;
  });
}

function restartStageAuto() {
  if (stageTimer) clearInterval(stageTimer);
  stageTimer = setInterval(() => {
    setStage((activeStage + 1) % TIMELINE.length);
  }, 7400);
}

function setupTimeline() {
  stageButtons.forEach((button) => {
    button.addEventListener("click", () => {
      setStage(Number(button.dataset.index || 0));
      restartStageAuto();
    });
  });

  setStage(0);
  restartStageAuto();
}

function setToolkit(key) {
  const data = TOOLKITS[key];
  if (!data || !kitJson) return;

  kitJson.textContent = JSON.stringify(data, null, 2);

  kitButtons.forEach((button) => {
    const isActive = button.dataset.kit === key;
    button.classList.toggle("active", isActive);
    button.setAttribute("aria-pressed", String(isActive));
  });
}

function setupToolkits() {
  kitButtons.forEach((button) => {
    button.addEventListener("click", () => {
      setToolkit(button.dataset.kit || "intake");
    });
  });

  setToolkit("intake");
}

function animateMetrics() {
  const duration = 1900;
  const start = performance.now();

  function frame(now) {
    const progress = Math.min((now - start) / duration, 1);
    const eased = 1 - (1 - progress) ** 3;

    metricNodes.forEach((node) => {
      const target = Number(node.dataset.counter || 0);
      const suffix = node.dataset.suffix || "";
      node.textContent = `${Math.floor(target * eased).toLocaleString("en-US")}${suffix}`;
    });

    if (progress < 1) requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
}

function setupReveal() {
  if (!("IntersectionObserver" in window)) {
    revealNodes.forEach((node) => node.classList.add("visible"));
    return;
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);
      });
    },
    { threshold: 0.16, rootMargin: "0px 0px -10% 0px" }
  );

  revealNodes.forEach((node, index) => {
    node.style.transitionDelay = `${Math.min(index * 70, 280)}ms`;
    observer.observe(node);
  });
}

function preciseNowMs() {
  return clockAnchorEpoch + (performance.now() - clockAnchorPerf);
}

function formatUtc(ms) {
  const d = new Date(ms);
  const y = d.getUTCFullYear();
  const mo = String(d.getUTCMonth() + 1).padStart(2, "0");
  const da = String(d.getUTCDate()).padStart(2, "0");
  const h = String(d.getUTCHours()).padStart(2, "0");
  const mi = String(d.getUTCMinutes()).padStart(2, "0");
  const s = String(d.getUTCSeconds()).padStart(2, "0");
  const msPart = String(d.getUTCMilliseconds()).padStart(3, "0");
  return `${y}-${mo}-${da} ${h}:${mi}:${s}.${msPart} UTC`;
}

function updateClock() {
  if (utcClock) utcClock.textContent = formatUtc(preciseNowMs());
  requestAnimationFrame(updateClock);
}

function updatePulse() {
  if (!pulseLine) return;

  const t = performance.now() / 1000;
  const points = [];

  for (let i = 0; i < 58; i += 1) {
    const x = (i / 57) * 100;
    const yA = Math.sin(t * 1.42 + i * 0.27) * 3.3;
    const yB = Math.cos(t * 0.54 + i * 0.19) * 1.7;
    const y = Math.max(1.2, Math.min(18.8, 10 + yA + yB));
    points.push(`${x.toFixed(2)},${y.toFixed(2)}`);
  }

  pulseLine.setAttribute("points", points.join(" "));
  requestAnimationFrame(updatePulse);
}

function boot() {
  setupCompositionControls();
  setupTimeline();
  setupToolkits();
  setupReveal();
  animateMetrics();

  if (zoneLabel) {
    zoneLabel.textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;
  }

  requestAnimationFrame(updateClock);
  requestAnimationFrame(updatePulse);
}

boot();