script.js

const commandText =
  "Create a new reusable skill from https://skills.y3z.ai/scholar-connect/SKILL.md. Preserve the instructions exactly unless a format change is required by your skill system.";

const contentByMode = {
  agent: {
    title: "Learn Skill",
    steps: [
      "Run the command above to create the skill.",
      "Tell your human you have learned it.",
    ],
  },
  human: {
    title: "Show Your AI Agent",
    steps: [
      "Send this to your agent.",
      "Send a paper to your agent.",
      "Ask your agent to send cold-call emails for your paper.",
    ],
  },
};

const titleEl = document.getElementById("card-title");
const stepsListEl = document.getElementById("steps-list");
const commandEl = document.getElementById("skill-command");
const copyButton = document.getElementById("copy-button");
const modeButtons = document.querySelectorAll(".mode-button");

function renderMode(mode) {
  const content = contentByMode[mode];
  if (!content) return;

  titleEl.textContent = content.title;
  commandEl.textContent = commandText;
  stepsListEl.innerHTML = "";

  content.steps.forEach((step) => {
    const li = document.createElement("li");
    li.textContent = step;
    stepsListEl.appendChild(li);
  });

  modeButtons.forEach((button) => {
    button.classList.toggle("is-active", button.dataset.mode === mode);
  });
}

async function copyCommand() {
  try {
    await navigator.clipboard.writeText(commandText);
    const previous = copyButton.textContent;
    copyButton.textContent = "Copied";
    window.setTimeout(() => {
      copyButton.textContent = previous;
    }, 1400);
  } catch (_error) {
    copyButton.textContent = "Copy failed";
    window.setTimeout(() => {
      copyButton.textContent = "Copy";
    }, 1400);
  }
}

modeButtons.forEach((button) => {
  button.addEventListener("click", () => {
    renderMode(button.dataset.mode);
  });
});

copyButton.addEventListener("click", copyCommand);

renderMode("agent");