script.js

document.addEventListener("DOMContentLoaded", () => {
  // --- HARDCODED DATE ---
  // Change this date to the exact moment you last spoke.
  // Format: 'YYYY-MM-DDTHH:MM:SS'
  const targetDate = new Date("2023-05-10T00:00:00");

  // DOM Elements
  const mainScreen = document.getElementById("main-screen");
  const daysEl = document.getElementById("days");
  const hoursEl = document.getElementById("hours");
  const minutesEl = document.getElementById("minutes");
  const secondsEl = document.getElementById("seconds");
  const dynamicMessage = document.getElementById("dynamic-message");

  const memoriesBtn = document.getElementById("memories-btn");
  const memoriesSection = document.getElementById("memories-section");
  const reachOutBtn = document.getElementById("reach-out-btn");
  const overlay = document.getElementById("overlay");
  const closeOverlayBtn = document.getElementById("close-overlay-btn");

  // --- PWA Service Worker Registration ---
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("sw.js").catch((err) => {
        console.error("SW registration failed:", err);
      });
    });
  }

  // --- Background Stars (Ambient Elements) ---
  function initAmbientElements() {
    const container = document.getElementById("stars-container");
    const numStars = window.innerWidth > 600 ? 50 : 30;

    for (let i = 0; i < numStars; i++) {
      const star = document.createElement("div");
      star.className = "star";

      // Randomize position and size
      const size = Math.random() * 2 + 1;
      star.style.width = `${size}px`;
      star.style.height = `${size}px`;
      star.style.left = `${Math.random() * 100}vw`;
      star.style.top = `${Math.random() * 100}vh`;

      // Randomize animation duration and delay (gentle breathing effect)
      star.style.animationDuration = `${Math.random() * 4 + 3}s`;
      star.style.animationDelay = `${Math.random() * 5}s`;

      container.appendChild(star);
    }
  }
  initAmbientElements();

  // --- Counter Logic ---
  function updateCounter() {
    const now = new Date();
    const diff = now - targetDate;

    if (diff < 0) {
      // Target date is in the future
      daysEl.textContent = "00";
      hoursEl.textContent = "00";
      minutesEl.textContent = "00";
      secondsEl.textContent = "00";
      return;
    }

    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
    const h = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const m = Math.floor((diff / 1000 / 60) % 60);
    const s = Math.floor((diff / 1000) % 60);

    daysEl.textContent = d.toString().padStart(2, "0");
    hoursEl.textContent = h.toString().padStart(2, "0");
    minutesEl.textContent = m.toString().padStart(2, "0");
    secondsEl.textContent = s.toString().padStart(2, "0");

    updateDynamicMessage(d);
  }

  function startCounter() {
    updateCounter(); // initial call
    setInterval(updateCounter, 1000);
  }

  // --- Dynamic Messaging ---
  function updateDynamicMessage(days) {
    let msg = "";
    if (days === 0) {
      msg = "A single day feels like an eternity...";
    } else if (days < 7) {
      msg = "The echoes of your voice still linger.";
    } else if (days < 30) {
      msg = "Weeks pass, yet time stands still in my mind.";
    } else if (days < 365) {
      msg = "Months have turned into seasons of longing.";
    } else {
      msg = "A year of quiet echoes, a heart still waiting.";
    }

    if (dynamicMessage.textContent !== msg) {
      dynamicMessage.style.opacity = 0;
      setTimeout(() => {
        dynamicMessage.textContent = msg;
        dynamicMessage.style.opacity = 1;
      }, 500); // Softer transition
    }
  }

  // --- Interaction Listeners ---
  memoriesBtn.addEventListener("click", () => {
    const isExpanded = memoriesSection.classList.toggle("expanded");
    memoriesBtn.setAttribute("aria-expanded", isExpanded.toString());
    memoriesSection.setAttribute("aria-hidden", (!isExpanded).toString());

    if (isExpanded) {
      memoriesBtn.textContent = "Fold Memories";
      memoriesBtn.classList.add("active");
    } else {
      memoriesBtn.textContent = "Unfold Memories";
      memoriesBtn.classList.remove("active");
    }
  });

  reachOutBtn.addEventListener("click", () => {
    overlay.classList.remove("hidden");
    overlay.setAttribute("aria-hidden", "false");
    // minor delay to allow CSS to pick up display before applying opacity transition
    setTimeout(() => overlay.classList.add("show"), 20);
    // Move focus to overlay close button for accessibility
    setTimeout(() => closeOverlayBtn.focus(), 50);
  });

  closeOverlayBtn.addEventListener("click", () => {
    overlay.classList.remove("show");
    overlay.setAttribute("aria-hidden", "true");
    setTimeout(() => overlay.classList.add("hidden"), 800); // match css transition
    // Return focus to the trigging button
    reachOutBtn.focus();
  });

  // accessibility: close overlay with escape key
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && overlay.classList.contains("show")) {
      closeOverlayBtn.click();
    }
  });

  // Run
  startCounter();
});