script.js

// Scroll reveal animation logic
function reveal() {
  var reveals = document.querySelectorAll(".reveal");
  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 100;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    }
  }
}

function redirectCandy() {
  const correctPassword = "28092004"; // Change this to your password
  const enteredPassword = prompt("Enter the password to access the PDF:");

  if (enteredPassword === correctPassword) {
    window.location.href =
      "https://drive.google.com/file/d/1EDWxQYgzx92Cb6-FnXyOeTRCP9tIFJMQ/view?usp=sharing";
  } else {
    alert("Incorrect password. Access denied.");
  }
}

window.addEventListener("scroll", reveal);
reveal(); // Trigger once on load

// Audio Generation using Tone.js (Darker, melancholic ambient tone)
let isPlaying = false;
let isLoaded = false;

// 1. Create the audio object and start preloading immediately
const player = new Audio("candy.mp3"); // Using your filename
player.loop = true;
player.preload = "auto"; // Tells the browser to download the file right away

const audioToggle = document.getElementById("audio-toggle");
const audioText = document.getElementById("audio-text");
const playingDot = document.getElementById("playing-dot");

// 2. Listen for when the browser has buffered enough to play instantly
player.addEventListener("canplaythrough", () => {
  isLoaded = true;
  if (audioText.innerText === "Loading Audio...") {
    audioText.innerText = "Play Soundtrack";
  }
});

// Optional: Handle errors if the file path is wrong
player.addEventListener("error", () => {
  audioText.innerText = "Error Loading Audio";
  console.error("Could not load cand.mp3. Check the file path.");
});

audioToggle.addEventListener("click", () => {
  // If clicked before the file has finished buffering
  if (!isLoaded) {
    audioText.innerText = "Loading Audio...";
    return;
  }

  if (isPlaying) {
    player.pause(); // Native audio uses .pause() instead of .stop()
    audioText.innerText = "Play";
    playingDot.style.display = "none";
  } else {
    player.play();
    audioText.innerText = "Pause";
    playingDot.style.display = "block";
  }

  isPlaying = !isPlaying;
});

// Custom styling for scrollbar in the phone mockup
const style = document.createElement("style");
style.innerHTML = `
            .custom-scrollbar::-webkit-scrollbar { width: 4px; }
            .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
            .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
        `;
document.head.appendChild(style);

document.addEventListener("DOMContentLoaded", () => {
  initProgressBar();
  initHeartLogicToggle();
  initTooltips();
  initChatSimulator();
  initRebirthCounter();
  initQuoteGenerator();
  initBreadcrumbLesson();
});

/* 1. Reading Progress Bar & Chapter Active Dot Marker */
function initProgressBar() {
  const progressBar = document.getElementById("progress-bar");
  const chapterDots = document.querySelectorAll(".chapter-dot");
  const sections = document.querySelectorAll(".narrative-section");

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight =
      document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;
    if (progressBar) progressBar.style.width = `${scrollPercent}%`;

    // Highlight top chapter navigation dots
    let currentSectionId = "";
    sections.forEach((section) => {
      const sectionTop = section.offsetTop - 200;
      if (scrollTop >= sectionTop) {
        currentSectionId = section.getAttribute("id");
      }
    });

    chapterDots.forEach((dot) => {
      dot.classList.remove("text-white", "font-bold", "underline");
      if (dot.getAttribute("href") === `#${currentSectionId}`) {
        dot.classList.add("text-white", "font-bold", "underline");
      }
    });
  });
}



/* 3. Heart vs. Logic Mode Toggle */
function initHeartLogicToggle() {
  const modeBtn = document.getElementById("mode-toggle");
  const modeIcon = document.getElementById("mode-icon");
  const modeText = document.getElementById("mode-text");
  const narrativeSpans = document.querySelectorAll(".narrative-span");
  if (!modeBtn) return;

  let isLogicMode = false;

  modeBtn.addEventListener("click", () => {
    isLogicMode = !isLogicMode;

    if (isLogicMode) {
      modeIcon.textContent = "🧠";
      if (modeText) modeText.textContent = "Logic Mode";
      modeBtn.classList.replace("text-purple-400", "text-red-400");
      modeBtn.classList.add("border-red-500/50");
    } else {
      modeIcon.textContent = "💖";
      if (modeText) modeText.textContent = "Heart Mode";
      modeBtn.classList.replace("text-red-400", "text-purple-400");
      modeBtn.classList.remove("border-red-500/50");
    }

    narrativeSpans.forEach((span) => {
      span.classList.remove("mode-heart-active", "mode-logic-active");
      if (isLogicMode) {
        span.textContent = span.getAttribute("data-logic");
        span.classList.add("mode-logic-active");
      } else {
        span.textContent = span.getAttribute("data-heart");
        span.classList.add("mode-heart-active");
      }
    });
  });
}

/* 4. Interactive "Red Flag" Tooltips */
function initTooltips() {
  const tooltip = document.getElementById("tooltip-popup");
  const titleEl = document.getElementById("tooltip-title");
  const descEl = document.getElementById("tooltip-desc");
  const terms = document.querySelectorAll(".red-flag-term");
  if (!tooltip) return;

  terms.forEach((term) => {
    const showTooltip = (e) => {
      titleEl.textContent = term.getAttribute("data-title");
      descEl.textContent = term.getAttribute("data-desc");
      tooltip.classList.remove("hidden");

      const rect = term.getBoundingClientRect();
      let top = rect.bottom + 8;
      let left = rect.left;

      // Keep tooltip inside mobile viewport boundaries
      if (left + 300 > window.innerWidth) left = window.innerWidth - 310;
      if (left < 10) left = 10;

      tooltip.style.top = `${top}px`;
      tooltip.style.left = `${left}px`;
    };

    term.addEventListener("mouseenter", showTooltip);
    term.addEventListener("click", (e) => {
      e.stopPropagation();
      showTooltip(e);
    });

    term.addEventListener("mouseleave", () => {
      tooltip.classList.add("hidden");
    });
  });

  window.addEventListener("scroll", () => tooltip.classList.add("hidden"));
  document.addEventListener("click", () => tooltip.classList.add("hidden"));
}

/* 5. Live Interactive Chat Simulator (Chapter V) */

function initChatSimulator() {
  const container = document.getElementById("chat-messages-container");
  const replayBtn = document.getElementById("replay-chat-btn");
  if (!container || !replayBtn) return;

  // Authentic chat log sequence mapped to the source transcript
  const sequence = [
    // --- PART 1: The Initial Clarity Attempt & Deflections ---
    {
      sender: "candy",
      text: "Lack of conversation... Lack of time spending 🥲🥹",
      time: "9:16 pm",
      delay: 800,
    },
    {
      sender: "user",
      text: "I think I have my answer now. 😄 Maybe that's why my subconscious kept telling me something wasn't right. Now everything is clear. You never had feelings for me, and that's okay. Thank God for the clarity. Take care.",
      time: "9:31 pm",
      delay: 2500,
    },
    { sender: "candy", text: "Shut up", time: "9:31 pm", delay: 1000 },
    { sender: "user", text: "Why I shut up", time: "9:32 pm", delay: 1000 },
    { sender: "candy", text: "😒", time: "9:32 pm", delay: 800 },
    {
      sender: "user",
      text: "Okay. I won't push it further. I just wanted clarity. Take care.",
      time: "9:33 pm",
      delay: 1500,
    },
    {
      sender: "candy",
      text: "You don't taalk to me",
      time: "9:33 pm",
      delay: 1000,
    },
    { sender: "user", text: "Are clear bolna", time: "9:34 pm", delay: 1000 },
    {
      sender: "candy",
      text: "Kya clear bolu bara... Bata",
      time: "9:34 pm",
      delay: 1200,
    },
    {
      sender: "user",
      text: "I understand what you meant now. But my question is still the same: Do you have feelings for me or not? A simple yes or no is enough. I won't argue or pressure you—I just want clarity",
      time: "9:36 pm",
      delay: 2500,
    },
    {
      sender: "candy",
      text: "Is this a time for... Clarify... Is this a time for... Asking",
      time: "9:37 pm",
      delay: 1500,
    },
    {
      sender: "user",
      text: "Okay, we can talk when you're comfortable.",
      time: "9:37 pm",
      delay: 1200,
    },
    {
      sender: "candy",
      text: "<Media omitted> Discussion... Chl ra",
      time: "9:38 pm",
      delay: 1200,
    },
    {
      sender: "candy",
      text: "Prha de Heterocyclic compound 🌝🧿",
      time: "9:43 pm",
      delay: 1500,
    },
    {
      sender: "user",
      text: "A heterocyclic compound is like a protective circle where one member is extra cautious. That one different member helps the whole group deal with uncertainty better, just as a boy who wants to protect himself from uncertainty behaves more carefully than others.",
      time: "9:49 pm",
      delay: 3000,
    },
    {
      sender: "candy",
      text: "Dekh na Aaj gyi thi na... mere hath me kata chub gaya tha Fatak se khoon aa gya tha 🥲 <Media omitted>",
      time: "9:51 pm",
      delay: 1800,
    },
    {
      sender: "candy",
      text: "Mai ke**u....inde mint piye hai Sutaa 1 ,1 thok 🥲 Abhi 1 hours phele 😁",
      time: "9:55 pm",
      delay: 1500,
    },
    {
      sender: "user",
      text: "Dekh ke todna chhaiye tha na.. Careless ladki 😅",
      time: "10:08 pm",
      delay: 1500,
    },
    {
      sender: "user",
      text: "Accha nahi kiye ... Apne lungs ki cillia ko kharab kr rhe ho. That's not a acchi baat",
      time: "10:10 pm",
      delay: 1800,
    },
    {
      sender: "candy",
      text: "Waste of pura day toady... Today... Udhar idhar Bs",
      time: "10:28 pm",
      delay: 1500,
    },
    {
      sender: "candy",
      text: "Hey hey Good morning 🌝🧿",
      time: "4:18 am",
      delay: 1500,
    },
    { sender: "user", text: "Good morning 🌞", time: "4:20 am", delay: 1000 },

    // --- PART 2: Date Divider ---
    {
      sender: "divider",
      text: "06/07/26 • After The Exam",
      time: "",
      delay: 1200,
    },

    // --- PART 3: July 6th The Final Stand & Block ---
    {
      sender: "candy",
      text: "Hey where are youu... Heavy rainfall here",
      time: "5:07 pm",
      delay: 1000,
    },
    {
      sender: "candy",
      text: "Anddd Today's my exam is over Now I feeling good 😆",
      time: "5:07 pm",
      delay: 1200,
    },
    {
      sender: "candy",
      text: "I attempted all the questions But 1 left 1 mark 1 question And 2 mark 1 question I din't know the answer 🤣",
      time: "5:08 pm",
      delay: 1500,
    },
    {
      sender: "candy",
      text: "Well Ab tension free Thoda Pr",
      time: "5:09 pm",
      delay: 1000,
    },
    {
      sender: "candy",
      text: "But you still the same",
      time: "5:45 pm",
      delay: 2000,
    },
    {
      sender: "user",
      text: "I think that’s just the surface. Most of the changes are internal..",
      time: "8:33 pm",
      delay: 1500,
    },
    {
      sender: "user",
      text: "I’ve stopped waiting for things that aren’t meant to be",
      time: "8:33 pm",
      delay: 1200,
    },
    {
      sender: "user",
      text: "Which makes me very different from who I was..",
      time: "8:34 pm",
      delay: 1200,
    },
    {
      sender: "user",
      text: "I asked if you loved me. You needed time. But love doesn't need time to know. I deserve someone who chooses me without hesitation.",
      time: "8:42 pm",
      delay: 2500,
    },
    { sender: "user", text: "And ha...", time: "8:43 pm", delay: 1000 },
    {
      sender: "user",
      text: "I reacted to your explicit pictures because I'm human.\n\n> But I don't want your body without your heart. And you've made it clear you won't give me your heart.\n\nI'm done.\nDon't message me again.",
      time: "8:44 pm",
      delay: 3000,
    },
    {
      sender: "system",
      text: "You blocked this person. • Peace Reclaimed",
      time: "8:45 pm",
      delay: 800,
    },
  ];

  const renderInitialChat = () => {
    container.innerHTML = "";
    sequence.forEach((msg) => appendMessage(msg, false));
  };

  const appendMessage = (msg, animate = true) => {
    const div = document.createElement("div");
    if (msg.sender === "system") {
      div.className =
        "text-[10px] sm:text-xs text-center text-red-400 font-bold mt-4 uppercase tracking-wider bg-red-950/40 py-2 px-3 rounded-full border border-red-900/50 self-center w-full max-w-[85%]";
      if (animate) div.classList.add("animate-slam");
      div.textContent = msg.text;
    } else if (msg.sender === "user") {
      div.className =
        "message-bubble message-sent bg-[#075E54] text-white p-2.5 sm:p-3 rounded-2xl rounded-br-none max-w-[88%] self-end shadow-lg flex flex-col";
      if (animate) div.classList.add("animate-fade-in");
      div.innerHTML = `<span>${msg.text}</span><span class="text-[9px] text-blue-200/70 self-end mt-1">${msg.time}</span>`;
    } else {
      div.className =
        "message-bubble message-received bg-[#181818] text-gray-200 p-2.5 sm:p-3 rounded-2xl rounded-bl-none max-w-[85%] self-start border border-white/5 flex flex-col";
      if (animate) div.classList.add("animate-fade-in");
      div.innerHTML = `<span>${msg.text}</span><span class="text-[9px] text-gray-500 self-end mt-1">${msg.time}</span>`;
    }
    container.appendChild(div);
    container.scrollTop = container.scrollHeight;
  };

  const showTyping = () => {
    const div = document.createElement("div");
    div.id = "typing-indicator";
    div.className =
      "bg-[#181818] text-gray-400 p-3 rounded-2xl rounded-bl-none self-start border border-white/5 typing-dots flex items-center h-8";
    div.innerHTML = "<span></span><span></span><span></span>";
    container.appendChild(div);
    container.scrollTop = container.scrollHeight;
  };

  const removeTyping = () => {
    const el = document.getElementById("typing-indicator");
    if (el) el.remove();
  };

  replayBtn.addEventListener("click", async () => {
    replayBtn.disabled = true;
    replayBtn.textContent = "Simulating...";
    container.innerHTML = "";

    for (let i = 0; i < sequence.length; i++) {
      const msg = sequence[i];

      // Calculate reading time: base delay + 25 milliseconds per character
      const readingBonus = msg.text.length * 25;
      const totalDelay = msg.delay + readingBonus;

      if (msg.sender === "candy") {
        showTyping();
        await new Promise((r) => setTimeout(r, totalDelay));
        removeTyping();
      } else {
        await new Promise((r) => setTimeout(r, totalDelay));
      }
      appendMessage(msg, true);
    }

    replayBtn.disabled = false;
    replayBtn.textContent = "Replay Log";
  });

  renderInitialChat();
}

/* 6. Rebirth Counter (Hardcoded start: July 6, 2026, 00:00:00) */
function initRebirthCounter() {
  const daysEl = document.getElementById("counter-days");
  const hoursEl = document.getElementById("counter-hours");
  const minsEl = document.getElementById("counter-minutes");
  const secsEl = document.getElementById("counter-seconds");
  if (!daysEl) return;

  // Fixed baseline: July 6, 2026 at midnight
  const startDate = new Date("2026-07-06T00:00:00").getTime();

  const updateCounter = () => {
    const now = new Date().getTime();
    const diff = now - startDate;

    if (diff < 0) {
      daysEl.textContent = "00";
      hoursEl.textContent = "00";
      minsEl.textContent = "00";
      secsEl.textContent = "00";
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    daysEl.textContent = String(days).padStart(2, "0");
    hoursEl.textContent = String(hours).padStart(2, "0");
    minsEl.textContent = String(minutes).padStart(2, "0");
    secsEl.textContent = String(seconds).padStart(2, "0");
  };

  updateCounter();
  setInterval(updateCounter, 1000);
}

/* 7. Quote Card Generator Modal & Canvas Renderer */
function initQuoteGenerator() {
  const modal = document.getElementById("quote-modal");
  const closeBtn = document.getElementById("close-modal");
  const downloadBtn = document.getElementById("download-quote-btn");
  const canvas = document.getElementById("quote-canvas");
  const shareButtons = document.querySelectorAll(".quote-share-btn");
  if (!modal || !canvas) return;

  const ctx = canvas.getContext("2d");
  let currentQuote = "";
  let currentAuthor = "";

  const drawCanvas = (quote, author) => {
    // Background gradient
    const grad = ctx.createLinearGradient(0, 0, 1080, 1080);
    grad.addColorStop(0, "#0a0a0a");
    grad.addColorStop(0.5, "#180d2a");
    grad.addColorStop(1, "#0a0a0a");
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 1080, 1080);

    // Decorative border
    ctx.strokeStyle = "rgba(168, 85, 247, 0.3)";
    ctx.lineWidth = 4;
    ctx.strokeRect(60, 60, 960, 960);

    // Quote Marks
    ctx.fillStyle = "rgba(168, 85, 247, 0.15)";
    ctx.font = "italic 250px Cormorant Garamond, serif";
    ctx.fillText("“", 100, 300);

    // Main text word wrapping
    ctx.fillStyle = "#f3f4f6";
    ctx.font = "italic 52px Cormorant Garamond, serif";
    ctx.textAlign = "center";

    const words = quote.split(" ");
    let line = "";
    let lines = [];
    const maxLineWidth = 800;

    for (let n = 0; n < words.length; n++) {
      const testLine = line + words[n] + " ";
      const metrics = ctx.measureText(testLine);
      if (metrics.width > maxLineWidth && n > 0) {
        lines.push(line);
        line = words[n] + " ";
      } else {
        line = testLine;
      }
    }
    lines.push(line);

    let startY = 540 - (lines.length - 1) * 35;
    for (let k = 0; k < lines.length; k++) {
      ctx.fillText(lines[k], 540, startY + k * 70);
    }

    // Author
    ctx.fillStyle = "#a855f7";
    ctx.font = "bold 36px Inter, sans-serif";
    ctx.fillText(
      `— ${author.toUpperCase()}`,
      540,
      startY + lines.length * 70 + 60,
    );

    // Branding Footer
    ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
    ctx.font = "24px Inter, sans-serif";
    ctx.fillText("CANDY: THE LESSON", 540, 970);
  };

  shareButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      currentQuote = btn.getAttribute("data-quote");
      currentAuthor = btn.getAttribute("data-author");
      drawCanvas(currentQuote, currentAuthor);
      modal.classList.remove("hidden");
    });
  });

  closeBtn.addEventListener("click", () => modal.classList.add("hidden"));
  modal.addEventListener("click", (e) => {
    if (e.target === modal) modal.classList.add("hidden");
  });

  downloadBtn.addEventListener("click", () => {
    const link = document.createElement("a");
    link.download = `Candy-The-Lesson-Quote.png`;
    link.href = canvas.toDataURL();
    link.click();
  });
}


/* 9. The Breadcrumb Epiphany Module (Interactive Reality Check) */
function initBreadcrumbLesson() {
  const container = document.getElementById("breadcrumb-lesson-container");
  if (!container) return;

  // Build the interactive comparison UI with mobile-first responsive Tailwind classes
  container.innerHTML = `
    <div class="bg-gradient-to-b from-[#180d2a] to-[#0a0a0a] border border-purple-500/30 rounded-2xl p-5 sm:p-6 md:p-8 max-w-3xl mx-auto shadow-2xl text-center relative overflow-hidden">
      
      <div class="absolute -top-10 -right-10 w-32 sm:w-40 h-32 sm:h-40 bg-purple-600/10 rounded-full blur-3xl pointer-events-none"></div>
      
      <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase bg-purple-950/80 text-purple-300 py-1.5 px-3 sm:px-4 rounded-full border border-purple-800/50 inline-block mb-3 sm:mb-4 animate-pulse">
        Core Epiphany
      </span>
      
      <h3 class="text-xl sm:text-2xl md:text-3xl font-serif italic text-white mb-2 sm:mb-3 leading-snug">
        From Breadcrumbs to the Banquet
      </h3>
      
      <p class="text-gray-400 text-xs sm:text-sm md:text-base max-w-xl mx-auto mb-6 sm:mb-8 font-light leading-relaxed px-2">
        Intermittent attention is designed to keep you starving just enough to stay at the table. 
        Recognizing the pattern is the exact moment you reclaim your power.
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-2 sm:gap-3 mb-6 bg-black/40 p-1.5 rounded-xl border border-white/5 w-full sm:w-auto mx-auto max-w-md sm:max-w-none">
        <button id="btn-crumb-illusion" class="w-full sm:w-auto px-4 py-3 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 bg-purple-600 text-white shadow-lg active:scale-[0.98]">
          The Illusion (What It Felt Like)
        </button>
        <button id="btn-crumb-reality" class="w-full sm:w-auto px-4 py-3 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 text-gray-400 hover:text-white hover:bg-white/5 active:scale-[0.98]">
          The Reality (What I Deserve)
        </button>
      </div>

      <div id="crumb-display-box" class="bg-black/60 border border-white/10 rounded-xl p-4 sm:p-6 text-left min-h-[160px] sm:min-h-[140px] flex flex-col justify-center transition-all duration-300">
        </div>
    </div>
  `;

  const btnIllusion = document.getElementById("btn-crumb-illusion");
  const btnReality = document.getElementById("btn-crumb-reality");
  const displayBox = document.getElementById("crumb-display-box");

  // Active and Inactive Button Style Classes
  const activeBtnClass =
    "w-full sm:w-auto px-4 py-3 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 bg-purple-600 text-white shadow-lg active:scale-[0.98]";
  const inactiveBtnClass =
    "w-full sm:w-auto px-4 py-3 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 text-gray-400 hover:text-white hover:bg-white/5 active:scale-[0.98]";

  const contentIllusion = `
    <div class="flex items-start gap-3 sm:gap-4 animate-fade-in">
      <span class="text-xl sm:text-2xl mt-0.5 shrink-0">🥀</span>
      <div>
        <h4 class="text-red-400 font-semibold text-xs sm:text-sm md:text-base mb-1 tracking-wide uppercase sm:normal-case">
          The Starvation Loop
        </h4>
        <p class="text-gray-300 text-xs sm:text-sm leading-relaxed italic font-light">
          "When someone gives you just enough attention to keep you interested, but never enough to build a real relationship. Like tossing literal crumbs to a bird, they give you tiny scraps of effort so you don't walk away."
        </p>
      </div>
    </div>
  `;

  const contentReality = `
    <div class="flex items-start gap-3 sm:gap-4 animate-fade-in">
      <span class="text-xl sm:text-2xl mt-0.5 shrink-0">👑</span>
      <div>
        <h4 class="text-purple-400 font-semibold text-xs sm:text-sm md:text-base mb-1 tracking-wide uppercase sm:normal-case">
          The Sovereign Standard
        </h4>
        <p class="text-gray-200 text-xs sm:text-sm leading-relaxed italic font-light">
          "I am not an option for someone's boredom. Clarity is love; confusion is a manipulation tactic. By leaving the table of crumbs, I cleared space for consistency, reciprocity, and peace. I am the whole banquet."
        </p>
      </div>
    </div>
  `;

  // Set initial state
  displayBox.innerHTML = contentIllusion;

  btnIllusion.addEventListener("click", () => {
    displayBox.innerHTML = contentIllusion;
    btnIllusion.className = activeBtnClass;
    btnReality.className = inactiveBtnClass;
  });

  btnReality.addEventListener("click", () => {
    displayBox.innerHTML = contentReality;
    btnReality.className = activeBtnClass;
    btnIllusion.className = inactiveBtnClass;
  });
}