script.js

const STORAGE_KEY = "ai-job-dashboard-state-v3";
const CUSTOM_JOBS_KEY = "ai-job-dashboard-custom-jobs-v1";

let companies = [];
let topTargets = null;
let hiringSignals = [];
let outreachTargets = [];
let managerQueue = [];
let sourceHealth = [];
let storybrandAnalysis = [];
let firecrawlStatus = [];
let outreachDrafts = [];
let actionsToday = [];
let workspaceFileHandle = null;
let workspaceAutosaveTimer = null;
let lastSavedAt = null;
let isTodayMode = true;
let customJobs = [];
let manualJobEditIndex = null;
let selectedJobKey = "";
let currentView = "overview";
const HOSTED_DASHBOARD_URL = "https://tonybeal40.github.io/pythonjobs-/";

const BOARD_STATUSES = ["not-started", "researching", "applied", "outreach", "interview"];
const MASTER_RESUME_PROFILE = {
  phone: "618-292-5320",
  email: "tonybeal40@gmail.com",
  location: "Greater St. Louis Area",
  headline: "Revenue Operations | Sales Operations | GTM Systems | Business Development",
  linkedin_url: "linkedin.com/in/tony-beal40",
  linkedin_headline: "Revenue Operations & Business Development Leader | Pipeline Generation | Strategic Accounts | Enterprise Deal Execution | B2B Manufacturing",
  linkedin_metrics: "10,769 followers | 500+ connections",
  summary: "Business development leader and revenue systems operator with 15+ years driving growth across industrial and B2B markets. Strongest in outbound prospecting, pipeline development, CRM workflow design, and AI-assisted commercial systems that improve pipeline visibility and execution.",
  wins: [
    "Built more than $6M in outbound pipeline through targeted prospecting, segmentation, and repeatable outbound systems design.",
    "Generated 3,700+ new accounts and acquired 1,000+ customers through disciplined outreach and territory strategy.",
    "Improved commercial execution with CRM workflows, KPI reporting, StoryBrand messaging, and AI-assisted prospect intelligence."
  ],
  experience: [
    "Director of Business Development | ProForm Manufacturing | Built $6M+ outbound pipeline and opened new vertical markets.",
    "Revenue Operations & Commercial Development | Natoli Engineering | Improved account targeting, outreach structure, and pipeline visibility.",
    "Regional Sales Manager | BioGaia USA | Built 3,700+ accounts and led a team exceeding goals for 8 consecutive years.",
    "Sales Manager | Wicks Aircraft & Motorsports | Generated 1,000+ new customers through targeted prospecting.",
    "Account Manager | KeHE Distributors | Managed multi-region accounts and grew revenue through expansion strategy."
  ],
  tools: [
    "Apollo.io",
    "LinkedIn Sales Navigator",
    "HubSpot",
    "Salesforce",
    "Monday.com",
    "CRM workflow automation",
    "Analytics dashboards",
    "AI-assisted prospecting"
  ]
};

function initialsForCompany(company) {
  const parts = String(company || "").replace(/[^A-Za-z0-9 ]/g, " ").split(/\s+/).filter(Boolean);
  return parts.slice(0, 2).map((part) => part[0]?.toUpperCase() || "").join("") || "CO";
}

function brandTheme(company) {
  const name = String(company || "");
  let hash = 0;
  for (let index = 0; index < name.length; index += 1) {
    hash = name.charCodeAt(index) + ((hash << 5) - hash);
  }
  const hue = Math.abs(hash) % 360;
  const accent = `hsl(${hue} 86% 66%)`;
  const accentSoft = `hsla(${hue} 88% 68% / 0.18)`;
  const accentWarm = `hsl(${(hue + 42) % 360} 78% 70%)`;
  return `--brand-accent:${accent};--brand-soft:${accentSoft};--brand-warm:${accentWarm};`;
}

function hostFromUrl(url) {
  if (!url) return "";
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch (error) {
    return "";
  }
}

function sourceLabelFromUrl(url) {
  const host = hostFromUrl(url);
  if (!host) return "Direct";
  if (host.includes("linkedin")) return "LinkedIn";
  if (host.includes("greenhouse")) return "Greenhouse";
  if (host.includes("lever")) return "Lever";
  if (host.includes("wellfound")) return "Wellfound";
  if (host.includes("indeed")) return "Indeed";
  return host;
}

function faviconUrl(url) {
  const host = hostFromUrl(url);
  if (!host) return "";
  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=128`;
}

function logoMarkup(company, url, small = false) {
  const initials = safeText(initialsForCompany(company));
  const favicon = faviconUrl(url);
  const smallClass = small ? " brand-mark-small" : "";
  return `
    <span class="brand-mark${smallClass}">
      ${favicon ? `<img src="${safeText(favicon)}" alt="" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">` : ""}
      <span class="brand-mark-fallback"${favicon ? ' style="display:none"' : ""}>${initials}</span>
    </span>
  `;
}

function companyKey(item) {
  return item?.name || item?.company || "";
}

function jobKey(job) {
  return `${job?.company || ""}::${job?.title || ""}`;
}

function getSelectedJob() {
  const jobs = topTargets?.topJobs || [];
  if (!jobs.length) return null;
  return jobs.find((job) => jobKey(job) === selectedJobKey) || jobs[0];
}

function getScopedJobs(limit = 4) {
  const selected = getSelectedJob();
  if (selected) return [selected];
  return (topTargets?.topJobs || []).slice(0, limit);
}

function toLinkedInSearchUrl(label) {
  return `https://www.linkedin.com/search/results/all/?keywords=${encodeURIComponent(label)}`;
}

function toCompanyLinkedInUrl(company) {
  return toLinkedInSearchUrl(`${company} company`);
}

function toPeopleLinkedInUrl(company, title = "VP Revenue Operations") {
  return `https://www.linkedin.com/search/results/people/?keywords=${encodeURIComponent(`${title} ${company}`)}`;
}

function findStorybrand(company) {
  return storybrandAnalysis.find((item) => item.company === company) || null;
}

function findManager(company) {
  return managerQueue.find((item) => item.company === company) || null;
}

function findTopJobForCompany(company) {
  return (topTargets?.topJobs || []).find((item) => item.company === company) || null;
}

function setCompanyStatus(companyName, status) {
  const company = companies.find((item) => companyKey(item) === companyName);
  if (!company) return;
  company.status = status;
  persistNotes();
  renderAll();
}

function getSavedCompanies() {
  return companies
    .filter((company) => Boolean(company.saved))
    .sort((left, right) => {
      const leftScore = Number(left.score || 0);
      const rightScore = Number(right.score || 0);
      return rightScore - leftScore || companyKey(left).localeCompare(companyKey(right));
    });
}

function safeText(value) {
  const text = value ?? "";
  return String(text)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function labelForStatus(status) {
  const labels = {
    "not-started": "Not Started",
    researching: "Researching",
    applied: "Applied",
    outreach: "Outreach Sent",
    interview: "Interview"
  };
  return labels[status] || status || "Not Started";
}

function statusClass(status) {
  return `status-${status || "not-started"}`;
}

function formatTable(containerId, rows, columns) {
  const container = document.getElementById(containerId);

  if (!rows || rows.length === 0) {
    container.innerHTML = '<p class="muted">No data available yet.</p>';
    return;
  }

  let html = "<table><thead><tr>";
  columns.forEach((column) => {
    html += `<th>${safeText(column.label)}</th>`;
  });
  html += "</tr></thead><tbody>";

  rows.forEach((row) => {
    html += "<tr>";
    columns.forEach((column) => {
      const value = typeof column.render === "function" ? column.render(row) : row[column.key];
      html += `<td>${value ?? ""}</td>`;
    });
    html += "</tr>";
  });

  html += "</tbody></table>";
  container.innerHTML = html;
}

function loadSavedNotes() {
  const raw = localStorage.getItem(STORAGE_KEY);
  return raw ? JSON.parse(raw) : {};
}

function loadCustomJobs() {
  const raw = localStorage.getItem(CUSTOM_JOBS_KEY);
  return raw ? JSON.parse(raw) : [];
}

function persistCustomJobs() {
  localStorage.setItem(CUSTOM_JOBS_KEY, JSON.stringify(customJobs));
}

function mergeCustomJobsIntoTopTargets() {
  if (!topTargets) {
    topTargets = { topJobs: [], topCompanies: [] };
  }
  const seen = new Set();
  topTargets.topJobs = [...customJobs, ...(topTargets.topJobs || [])].filter((job) => {
    const key = `${job.company || ""}::${job.title || ""}`;
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}

function buildStateSnapshot() {
  const snapshot = {};
  companies.forEach((company) => {
    snapshot[companyKey(company)] = {
      notes: company.notes || "",
      status: company.status || "not-started",
      saved: Boolean(company.saved)
    };
  });
  return snapshot;
}

function buildWorkspacePayload() {
  return {
    exportedAt: new Date().toISOString(),
    customJobs,
    selectedJobKey,
    currentView,
    companies: companies.map((company) => ({
      ...company,
      key: companyKey(company)
    })),
    state: buildStateSnapshot()
  };
}

async function saveWorkspaceToHandle(handle) {
  const writable = await handle.createWritable();
  await writable.write(JSON.stringify(buildWorkspacePayload(), null, 2));
  await writable.close();
}

function applyWorkspacePayload(payload) {
  const importedCompanies = Array.isArray(payload?.companies) ? payload.companies : [];
  const importedState = payload?.state || {};
  if (Array.isArray(payload?.customJobs)) {
    customJobs = payload.customJobs;
    persistCustomJobs();
  }
  if (typeof payload?.selectedJobKey === "string") {
    selectedJobKey = payload.selectedJobKey;
  }
  if (typeof payload?.currentView === "string") {
    currentView = payload.currentView;
  }

  if (importedCompanies.length) {
    const stateByKey = new Map(
      importedCompanies.map((company) => [company.key || companyKey(company), company])
    );

    companies = companies.map((company) => {
      const match = stateByKey.get(companyKey(company));
      return match ? { ...company, ...match } : company;
    });
  }

  companies = companies.map((company) => {
    const state = importedState[companyKey(company)];
    return state ? { ...company, ...state } : company;
  });

  persistNotes();
  renderAll();
}

function formatSavedTime(value) {
  if (!value) return "";
  try {
    return new Date(value).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
  } catch (error) {
    return "";
  }
}

function renderWorkspaceState() {
  const badge = document.getElementById("stateStatus");
  const focusButton = document.getElementById("focusModeBtn");
  if (badge) {
    const parts = [];
    parts.push(workspaceFileHandle ? "Workspace linked" : "Local state only");
    if (lastSavedAt) {
      parts.push(`Saved ${formatSavedTime(lastSavedAt)}`);
    }
    badge.textContent = parts.join(" | ");
    badge.classList.toggle("is-linked", Boolean(workspaceFileHandle));
  }
  if (focusButton) {
    focusButton.textContent = isTodayMode ? "Show Full View" : "Today Mode";
  }
  document.body.classList.toggle("today-mode", isTodayMode);
  document.body.dataset.view = currentView;
}

function renderViewTabs() {
  const tabs = Array.from(document.querySelectorAll(".view-tab"));
  tabs.forEach((tab) => {
    tab.classList.toggle("is-active", tab.dataset.view === currentView);
  });
}

function scheduleWorkspaceAutosave() {
  if (!workspaceFileHandle) return;
  clearTimeout(workspaceAutosaveTimer);
  const badge = document.getElementById("stateStatus");
  badge?.classList.add("is-saving");
  workspaceAutosaveTimer = window.setTimeout(async () => {
    try {
      await saveWorkspaceToHandle(workspaceFileHandle);
      lastSavedAt = new Date().toISOString();
    } catch (error) {
      // Local storage remains the baseline fallback.
    } finally {
      badge?.classList.remove("is-saving");
      renderWorkspaceState();
    }
  }, 700);
}

function persistNotes() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(buildStateSnapshot()));
  lastSavedAt = new Date().toISOString();
  renderWorkspaceState();
  scheduleWorkspaceAutosave();
}

function applySavedNotes() {
  const saved = loadSavedNotes();
  companies = companies.map((company) => {
    const item = saved[companyKey(company)];
    return item ? { ...company, ...item } : company;
  });
}

function updateSummary() {
  const applied = companies.filter((company) => company.status === "applied").length;
  const interviews = companies.filter((company) => company.status === "interview").length;
  const activeTargets = companies.filter((company) => company.saved || company.status !== "not-started" || company.notes).length;

  const setCount = (id, value) => {
    const node = document.getElementById(id);
    if (node) node.textContent = String(value);
  };

  setCount("topJobsCount", (topTargets?.topJobs || []).length);
  setCount("activeTargetsCount", activeTargets);
  setCount("outreachTargetsCount", outreachTargets.length);
  setCount("appliedCount", applied);
  setCount("interviewCount", interviews);
  setCount("savedCount", companies.filter((c) => Boolean(c.saved)).length);
}

function getSummaryCounts() {
  return {
    applied: companies.filter((company) => company.status === "applied").length,
    interviews: companies.filter((company) => company.status === "interview").length,
    outreach: companies.filter((company) => company.status === "outreach").length,
    saved: companies.filter((company) => Boolean(company.saved)).length,
    activeTargets: companies.filter((company) => company.saved || company.status !== "not-started" || company.notes).length,
    topJobs: (topTargets?.topJobs || []).length,
    manualJobs: customJobs.length
  };
}

function renderActionDeck() {
  const container = document.getElementById("actionDeck");
  const bestJob = (topTargets?.topJobs || [])[0];
  const bestSignal = hiringSignals[0];
  const bestGap = storybrandAnalysis[0];
  const bestFirecrawl = firecrawlStatus.find((item) => item.status === "ok");

  const cards = [
    {
      label: "Best Role Today",
      title: bestJob ? `${bestJob.company} | ${bestJob.title}` : "No top role yet",
      body: bestJob ? `Score ${bestJob.score}. ${bestJob.top_win || "Use the recommended resume angle before applying."}` : "Run the morning pipeline to surface the best-fit job."
    },
    {
      label: "Best Early Signal",
      title: bestSignal ? `${bestSignal.company} | score ${bestSignal.signal_score}` : "No signal yet",
      body: bestSignal ? `${(bestSignal.signals || []).join(", ")}. ${bestSignal.recommended_action || ""}` : "No hiring-signal output is available yet."
    },
    {
      label: "Best Messaging Gap",
      title: bestGap ? `${bestGap.company} | ${bestGap.score_label}` : "No website scan yet",
      body: bestGap ? bestGap.messaging_gap : "StoryBrand analysis will appear after the company intelligence pass runs."
    },
    {
      label: "Latest Firecrawl Layer",
      title: bestFirecrawl ? `${bestFirecrawl.company} captured` : "No Firecrawl page yet",
      body: bestFirecrawl ? "Public company page captured to markdown and ready for messaging analysis." : "Run the Firecrawl fetcher to add richer page extracts."
    }
  ];

  container.innerHTML = cards.map((card) => `
    <article class="focus-card reveal-card">
      <span class="focus-label">${safeText(card.label)}</span>
      <strong>${safeText(card.title)}</strong>
      <p>${safeText(card.body)}</p>
    </article>
  `).join("");
}

function renderJobJumpStrip() {
  const container = document.getElementById("jobJumpStrip");
  if (!container) return;
  const jobs = (topTargets?.topJobs || []).slice(0, 5);
  if (!jobs.length) {
    container.innerHTML = "";
    return;
  }
  container.innerHTML = jobs.map((job) => {
    const persisted = companies.find((item) => companyKey(item) === job.company) || {};
    const selected = jobKey(job) === selectedJobKey || (!selectedJobKey && job === jobs[0]);
    return `
    <article class="job-jump-btn${selected ? " is-selected" : ""}" style="${brandTheme(job.company)}">
      <div class="job-jump-top">
        <div>
          <span class="focus-label">Top Role</span>
          <strong class="job-jump-title">${safeText(job.company)} | ${safeText(job.title)}</strong>
        </div>
        <span class="mini-chip">${safeText(job.score ?? "")}</span>
      </div>
      <div class="job-jump-meta">
        ${job.location ? `<span>${safeText(job.location)}</span>` : ""}
        ${job.salary_text ? `<span>${safeText(job.salary_text)}</span>` : ""}
        <span>${safeText(job.recency_label || "Active")}</span>
      </div>
      <div class="job-jump-actions">
        ${job.url ? `<a class="primary-btn" href="${safeText(job.url)}" target="_blank" rel="noreferrer">Open Job</a>` : `<a class="primary-btn" href="#assetsSection">Open Assets</a>`}
        <button class="ghost-btn select-job-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}">${selected ? "Selected" : "Focus Job"}</button>
        <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="full-tailored-pdf">Full Resume</button>
        <button class="ghost-btn export-application-packet-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}">Build Packet</button>
        <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(job.company)}" data-status="applied">Mark Applied</button>
      </div>
      <textarea class="shortcut-note-input" data-company="${safeText(job.company)}" placeholder="Quick note for ${safeText(job.company)}...">${safeText(persisted.notes || "")}</textarea>
    </article>
  `;
  }).join("");

  container.querySelectorAll(".shortcut-note-input").forEach((area) => {
    area.addEventListener("input", (event) => {
      const company = companies.find((item) => companyKey(item) === event.target.dataset.company);
      if (!company) return;
      company.notes = event.target.value;
      persistNotes();
    });
  });
}

function renderSelectedJobBanner() {
  const container = document.getElementById("selectedJobBanner");
  if (!container) return;
  const job = getSelectedJob();
  if (!job) {
    container.classList.remove("is-active");
    container.innerHTML = "";
    return;
  }
  const company = companies.find((item) => companyKey(item) === job.company) || {};
  const story = findStorybrand(job.company) || {};
  container.classList.add("is-active");
  container.innerHTML = `
    <div>
      <p class="section-kicker">Selected Target</p>
      <h3>${safeText(job.company)} | ${safeText(job.title)}</h3>
      <p>${safeText(job.location || "Remote / location not specified")} ${job.salary_text ? `| ${safeText(job.salary_text)}` : ""} | ${safeText(story.messaging_gap || company.revops_maturity_gap || "Use the assets below to tailor your application around this target.")}</p>
    </div>
    <div class="selected-job-actions">
      ${job.url ? `<a class="primary-btn" href="${safeText(job.url)}" target="_blank" rel="noreferrer">Open Job</a>` : ""}
      <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="best-resume-pdf">Best Resume</button>
      <button class="ghost-btn export-application-packet-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}">Complete Packet</button>
      <button class="ghost-btn clear-selected-job-btn" type="button">Show Top Set</button>
    </div>
  `;
}

function renderWorkflowHint() {
  const container = document.getElementById("workflowHint");
  if (!container) return;
  const message = workspaceFileHandle
    ? "Today Mode is on by default. Work the top role, save your updates, then use Quick Save Workspace before moving to another machine. You can also add a manual job below anytime."
    : "Today Mode is on by default. Start with the top role, then save a workspace file once so your laptop workflow stays in sync. You can also paste jobs into chat and I can fold them into the system.";
  container.innerHTML = `
    <article class="workflow-hint-card">
      <strong>Recommended daily flow</strong>
      <p>${safeText(message)}</p>
    </article>
  `;
}

function renderWhyThisWins() {
  const container = document.getElementById("whyThisWins");
  if (!container) return;
  container.innerHTML = `
    <p class="section-kicker">Why This Wins</p>
    <h3>This is not a faster apply bot. It is a personal hiring radar.</h3>
    <p>Most tools help candidates apply faster. This system is built to help you target companies earlier, position yourself better, and move like an operator instead of a passive applicant.</p>
    <div class="story-points">
      <div class="story-point">
        <strong>Signals before postings</strong>
        <span>Track sales-team expansion, GTM gaps, and company momentum before a RevOps role is obvious.</span>
      </div>
      <div class="story-point">
        <strong>Application assets on demand</strong>
        <span>Build the resume, cover letter, and full packet around the actual company and role context.</span>
      </div>
      <div class="story-point">
        <strong>Career RevOps</strong>
        <span>Treat your search like pipeline management: target, sequence, follow up, and move the right opportunities forward.</span>
      </div>
    </div>
  `;
}

function renderScoreboardStrip() {
  const container = document.getElementById("scoreboardStrip");
  if (!container) return;
  const counts = getSummaryCounts();
  container.innerHTML = `
    <p class="section-kicker">Scoreboard</p>
    <h3>Keep the page tied to outcomes, not activity.</h3>
    <p>The real scoreboard is interviews, replies, and active target movement. Use this to stay focused on what is converting.</p>
    <div class="scoreboard-grid">
      <div class="scoreboard-item"><strong>${counts.topJobs}</strong><span>Top jobs</span></div>
      <div class="scoreboard-item"><strong>${counts.saved}</strong><span>Saved companies</span></div>
      <div class="scoreboard-item"><strong>${counts.outreach}</strong><span>Outreach sent</span></div>
      <div class="scoreboard-item"><strong>${counts.applied}</strong><span>Applications sent</span></div>
      <div class="scoreboard-item"><strong>${counts.interviews}</strong><span>Interviews</span></div>
      <div class="scoreboard-item"><strong>${counts.manualJobs}</strong><span>Manual jobs added</span></div>
    </div>
  `;
}

function renderHeroPreview() {
  const container = document.getElementById("heroPreview");
  if (!container) return;
  const selected = getSelectedJob() || (topTargets?.topJobs || [])[0];
  const company = selected ? (companies.find((item) => companyKey(item) === selected.company) || {}) : {};
  const story = selected ? (findStorybrand(selected.company) || {}) : {};
  container.innerHTML = `
    <div class="hero-preview-card">
      <span class="focus-label">Focused Target</span>
      <strong>${safeText(selected ? `${selected.company} | ${selected.title}` : "No selected target yet")}</strong>
      <p>${safeText(selected ? ((selected.resume_angle || [])[0] || "Use the selected-job workflow to build the application assets.") : "Choose a shortcut card to lock the asset area onto one job.")}</p>
    </div>
    <div class="hero-preview-card">
      <span class="focus-label">StoryBrand Angle</span>
      <strong>${safeText(selected ? (story.score_label || "Messaging review ready") : "Messaging angle")}</strong>
      <p>${safeText(selected ? (story.messaging_gap || company.revops_maturity_gap || "Position yourself around execution clarity, GTM systems, and pipeline visibility.") : "Your narrative should connect company friction to the value you bring.")}</p>
    </div>
  `;
}

function renderManualJobsList() {
  const container = document.getElementById("manualJobsList");
  if (!container) return;
  if (!customJobs.length) {
    container.innerHTML = '<p class="muted">No manual jobs added yet.</p>';
    return;
  }
  container.innerHTML = customJobs.map((job, index) => `
    <div class="stack-item manual-job-item">
      <div>
        <strong>${safeText(job.company)} | ${safeText(job.title)}</strong>
        <p>${safeText(job.location || "Location not added")} | ${safeText(job.salary_text || "Comp not added")}</p>
      </div>
      <div class="draft-actions">
        ${job.url ? `<a class="action-link" href="${safeText(job.url)}" target="_blank" rel="noreferrer">Open</a>` : ""}
        <button class="ghost-btn move-manual-job-btn" type="button" data-index="${index}" data-direction="up">Up</button>
        <button class="ghost-btn move-manual-job-btn" type="button" data-index="${index}" data-direction="down">Down</button>
        <button class="ghost-btn edit-manual-job-btn" type="button" data-index="${index}">Edit</button>
        <button class="ghost-btn remove-manual-job-btn" type="button" data-index="${index}">Remove</button>
      </div>
    </div>
  `).join("");
}

function renderActionsToday() {
  const container = document.getElementById("actionsToday");
  if (!actionsToday.length) {
    container.innerHTML = '<p class="muted">No actions generated yet.</p>';
    return;
  }

  container.innerHTML = actionsToday.slice(0, 4).map((action) => `
    <article class="focus-card reveal-card">
      <span class="focus-label">${safeText(action.type || "action")}</span>
      <strong>${safeText(action.headline || "")}</strong>
      <p>${safeText(action.details || "")}</p>
    </article>
  `).join("");
}

function renderTodayCommandRail() {
  const container = document.getElementById("todayCommandRail");
  if (!container) return;

  const topJob = (topTargets?.topJobs || [])[0];
  const topCompany = (topTargets?.topCompanies || [])[0];
  const topDraft = outreachDrafts[0];
  const topManager = topCompany ? (findManager(topCompany.company) || {}) : {};

  const items = [
    {
      kicker: "Apply First",
      title: topJob ? `${topJob.company} | ${topJob.title}` : "No top role",
      body: topJob ? `Best source: ${sourceLabelFromUrl(topJob.url)}. Resume angle: ${(topJob.resume_angle || [])[0] || "Lead with systems and pipeline visibility."}` : "Run the pipeline to surface the highest-fit role.",
      actions: topJob ? `
        ${topJob.url ? `<a class="primary-btn" href="${safeText(topJob.url)}" target="_blank" rel="noreferrer">Open Job</a>` : ""}
        <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(topJob.company)}" data-title="${safeText(topJob.title)}" data-mode="best-resume-pdf">Best Resume</button>
        <button class="ghost-btn export-application-packet-btn" type="button" data-company="${safeText(topJob.company)}" data-title="${safeText(topJob.title)}">Build Packet</button>
        <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(topJob.company)}" data-status="applied">Mark Applied</button>
      ` : ""
    },
    {
      kicker: "Target Now",
      title: topCompany ? topCompany.company : "No top company",
      body: topCompany ? `${topCompany.hiring_signal || ""} ${topCompany.revops_maturity_gap || ""}` : "No company priority available yet.",
      actions: topCompany ? `
        ${topCompany.website ? `<a class="primary-btn" href="${safeText(topCompany.website)}" target="_blank" rel="noreferrer">Open Site</a>` : ""}
        <a class="ghost-btn" href="${safeText(toCompanyLinkedInUrl(topCompany.company))}" target="_blank" rel="noreferrer">LinkedIn</a>
        <button class="ghost-btn save-company-btn" type="button" data-company="${safeText(topCompany.company)}">${companies.find((item) => companyKey(item) === topCompany.company)?.saved ? "Unsave" : "Save Company"}</button>
      ` : ""
    },
    {
      kicker: "Send Next",
      title: topDraft ? topDraft.company : "No outreach draft",
      body: topDraft ? topDraft.outreach_angle || topDraft.subject || "" : "No outreach recommendation available yet.",
      actions: topDraft ? `
        <button class="ghost-btn copy-btn" type="button" data-copy="${safeText(topDraft.outreach_angle || topDraft.subject || "")}" data-label="Copy Angle">Copy Angle</button>
        <a class="ghost-btn" href="${safeText(topManager.manual_search_url || toPeopleLinkedInUrl(topDraft.company, topManager.probable_hiring_manager || "VP Revenue Operations"))}" target="_blank" rel="noreferrer">Find Manager</a>
        <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(topDraft.company)}" data-status="outreach">Mark Outreach</button>
      ` : ""
    }
  ];

  container.innerHTML = items.map((item) => `
    <article class="today-card reveal-card">
      <span class="focus-label">${safeText(item.kicker)}</span>
      <strong>${safeText(item.title)}</strong>
      <p>${safeText(item.body)}</p>
      ${item.actions ? `<div class="action-drawer">${item.actions}</div>` : ""}
    </article>
  `).join("");
}

function buildManualJobRecord(input) {
  return {
    company: input.company,
    title: input.title,
    url: input.url || "",
    location: input.location || "Manual entry",
    salary_text: input.salary || "",
    source_label: "Manual",
    recency_label: "Added manually",
    trend_label: "New",
    source_confidence: "high",
    score: 95,
    top_win: "Manual priority target added directly to the dashboard.",
    resume_angle: [
      "Lead with revenue systems, outbound execution, and pipeline visibility.",
      "Tie your background directly to this role's operational and commercial outcomes."
    ]
  };
}

function resetManualJobForm() {
  manualJobEditIndex = null;
  const editIndexInput = document.getElementById("manualJobEditIndex");
  const addButton = document.getElementById("addManualJobBtn");
  const cancelButton = document.getElementById("cancelManualJobEditBtn");
  if (editIndexInput) editIndexInput.value = "";
  if (addButton) addButton.textContent = "Add Job";
  if (cancelButton) cancelButton.hidden = true;
  ["manualJobCompany", "manualJobTitle", "manualJobUrl", "manualJobLocation", "manualJobSalary"].forEach((id) => {
    const input = document.getElementById(id);
    if (input) input.value = "";
  });
}

function startManualJobEdit(index) {
  const job = customJobs[index];
  if (!job) return;
  manualJobEditIndex = index;
  const editIndexInput = document.getElementById("manualJobEditIndex");
  const addButton = document.getElementById("addManualJobBtn");
  const cancelButton = document.getElementById("cancelManualJobEditBtn");
  if (editIndexInput) editIndexInput.value = String(index);
  if (addButton) addButton.textContent = "Update Job";
  if (cancelButton) cancelButton.hidden = false;
  const fields = {
    manualJobCompany: job.company || "",
    manualJobTitle: job.title || "",
    manualJobUrl: job.url || "",
    manualJobLocation: job.location === "Manual entry" ? "" : (job.location || ""),
    manualJobSalary: job.salary_text || ""
  };
  Object.entries(fields).forEach(([id, value]) => {
    const input = document.getElementById(id);
    if (input) input.value = value;
  });
  document.getElementById("manualJobCompany")?.focus();
}

function renderSpotlightCards() {
  const container = document.getElementById("spotlightCards");
  const companiesToShow = (topTargets?.topCompanies || []).slice(0, 4);
  if (!companiesToShow.length) {
    container.innerHTML = '<p class="muted">No spotlight companies available yet.</p>';
    return;
  }

  container.innerHTML = companiesToShow.map((company) => {
    const story = findStorybrand(company.company) || {};
    const manager = findManager(company.company) || {};
    const signal = hiringSignals.find((item) => companyKey(item.company) === company.company) || {};
    const job = findTopJobForCompany(company.company);
    const linkedinUrl = toCompanyLinkedInUrl(company.company);
    const peopleUrl = manager.manual_search_url || toPeopleLinkedInUrl(company.company);
    const persisted = companies.find((item) => companyKey(item) === company.company) || company;
    const statusValue = persisted.status || "not-started";
    const saved = Boolean(persisted.saved);
    const signalBreakdown = Object.entries(signal.signal_breakdown || {})
      .filter(([, value]) => Number(value) > 0)
      .sort((a, b) => Number(b[1]) - Number(a[1]))
      .map(([label, value]) => `${label.replace(/_/g, " ")} +${value}`)
      .join(" | ");
    return `
      <article class="spotlight-card reveal-card" style="${brandTheme(company.company)}">
        <div class="spotlight-top">
          ${logoMarkup(company.company, company.website || persisted.website || "")}
          <div style="flex:1">
            <h3>${safeText(company.company || "")}</h3>
            <p class="muted">${safeText(company.industry || "")}</p>
          </div>
          <span class="score-badge">${safeText(company.score ?? "")}</span>
        </div>
        <div class="spotlight-meta">
          <span class="meta-pill">${safeText(company.hiring_signal || "No hiring signal")}</span>
          <span class="meta-pill">${safeText(story.score_label || "No messaging score")}</span>
          <span class="meta-pill">${safeText(sourceLabelFromUrl(company.website || ""))}</span>
          ${saved ? '<span class="saved-chip">Saved</span>' : ""}
        </div>
        ${job ? `<div class="job-meta-row">
          ${job.location ? `<span class="mini-chip">${safeText(job.location)}</span>` : ""}
          ${job.salary_text ? `<span class="mini-chip">${safeText(job.salary_text)}</span>` : ""}
          ${job.recency_label ? `<span class="mini-chip">${safeText(job.recency_label)}</span>` : ""}
          ${job.source_label ? `<span class="mini-chip">${safeText(job.source_label)}</span>` : ""}
          ${job.trend_label ? `<span class="mini-chip">${safeText(job.trend_label)}</span>` : ""}
        </div>` : ""}
        <p>${safeText(company.revops_maturity_gap || "")}</p>
        <p><strong>Messaging gap:</strong> ${safeText(story.messaging_gap || "Not available yet.")}</p>
        <p><strong>Resume fix:</strong> ${safeText(company.notes || "")}</p>
        ${signalBreakdown ? `<p><strong>Signal breakdown:</strong> ${safeText(signalBreakdown)}</p>` : ""}
        ${job?.keyword_matches?.length ? `<div class="job-meta-row">
          ${job.keyword_matches.slice(0, 5).map((keyword) => `<span class="mini-chip keyword-chip">${safeText(keyword)}</span>`).join("")}
        </div>` : ""}
        <div class="link-row">
          <a class="action-link" href="${safeText(company.website || "")}" target="_blank" rel="noreferrer">Website</a>
          <a class="action-link" href="${safeText(linkedinUrl)}" target="_blank" rel="noreferrer">LinkedIn</a>
          <a class="action-link" href="${safeText(peopleUrl)}" target="_blank" rel="noreferrer">Hiring Manager</a>
        </div>
        <div class="spotlight-controls">
          <select class="status-select spotlight-status" data-company="${safeText(company.company || "")}">
            <option value="not-started" ${statusValue === "not-started" ? "selected" : ""}>Not Started</option>
            <option value="researching" ${statusValue === "researching" ? "selected" : ""}>Researching</option>
            <option value="applied" ${statusValue === "applied" ? "selected" : ""}>Applied</option>
            <option value="outreach" ${statusValue === "outreach" ? "selected" : ""}>Outreach Sent</option>
            <option value="interview" ${statusValue === "interview" ? "selected" : ""}>Interview</option>
          </select>
          <button class="ghost-btn save-company-btn" type="button" data-company="${safeText(company.company || "")}">${saved ? "Unsave" : "Save Company"}</button>
          <button class="ghost-btn jump-note-btn" type="button" data-company="${safeText(company.company || "")}">Jump to Notes</button>
        </div>
        <div class="quick-status-row">
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(company.company || "")}" data-status="researching">Researching</button>
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(company.company || "")}" data-status="applied">Applied</button>
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(company.company || "")}" data-status="outreach">Outreach</button>
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(company.company || "")}" data-status="interview">Interview</button>
        </div>
        <details class="detail-drawer">
          <summary>Open Full Company Brief</summary>
          <p><strong>RevOps maturity gap:</strong> ${safeText(company.revops_maturity_gap || "")}</p>
          <p><strong>Site summary:</strong> ${safeText(story.site_summary || "Not available yet.")}</p>
          <p><strong>Outreach angle:</strong> ${safeText(story.suggested_outreach_angle || "Not available yet.")}</p>
          <p><strong>Manual manager target:</strong> ${safeText(manager.probable_hiring_manager || "Not available yet.")}</p>
          <div class="draft-actions">
            <button class="ghost-btn export-company-packet-btn" type="button" data-company="${safeText(company.company || "")}">Export Company Packet</button>
            <button class="ghost-btn export-company-cover-btn" type="button" data-company="${safeText(company.company || "")}">Export Cover Letter</button>
          </div>
        </details>
      </article>
    `;
  }).join("");
}

function renderOutreachDrafts() {
  const container = document.getElementById("outreachDrafts");
  if (!outreachDrafts.length) {
    container.innerHTML = '<p class="muted">No outreach drafts available yet.</p>';
    return;
  }

  container.innerHTML = outreachDrafts.slice(0, 6).map((draft) => `
    <article class="draft-card">
      <h3>${safeText(draft.company || "")}</h3>
      <p class="draft-subject">${safeText(draft.subject || "")}</p>
      <span class="draft-meta">${safeText(draft.target_title || "")}</span>
      <pre>${safeText(draft.message || "")}</pre>
      <div class="draft-actions">
        <button class="ghost-btn copy-btn" type="button" data-copy="${safeText(draft.message || "")}" data-label="Copy Message">Copy Message</button>
        <button class="ghost-btn copy-btn" type="button" data-copy="${safeText(draft.subject || "")}" data-label="Copy Subject">Copy Subject</button>
      </div>
    </article>
  `).join("");
}

function renderResumeFixes() {
  const container = document.getElementById("resumeFixes");
  const jobs = topTargets?.topJobs || [];
  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No resume fixes available yet.</p>';
    return;
  }

  container.innerHTML = jobs.slice(0, 6).map((job) => {
    const company = companies.find((item) => companyKey(item) === job.company) || {};
    const story = findStorybrand(job.company) || {};
    const fixes = [
      (job.resume_angle || [])[0] || "Lead with your RevOps systems-builder positioning.",
      company.revops_maturity_gap || "Tie your experience to pipeline visibility and process discipline.",
      story.suggested_outreach_angle || "Sharpen the commercial outcome and buyer language."
    ];
    return `
      <article class="draft-card">
        <h3>${safeText(job.company)} | ${safeText(job.title)}</h3>
        <p class="draft-subject">Resume corrections for this target</p>
        <span class="draft-meta">${safeText(job.resume_angle_key || "revops_salesops")}</span>
        <pre>${safeText(`1. ${fixes[0]}\n2. ${fixes[1]}\n3. ${fixes[2]}\n4. Reinforce this proof point: ${job.top_win || ""}`)}</pre>
      </article>
    `;
  }).join("");
}

function getVisibleCompanies() {
  const search = document.getElementById("searchBox").value.trim().toLowerCase();
  const statusFilter = document.getElementById("statusFilter").value;
  const sortBy = document.getElementById("sortBy").value;

  const filtered = companies.filter((company) => {
    const haystack = [
      companyKey(company),
      company.description,
      company.fit,
      company.resumeAngle,
      company.notes || "",
      ...(company.tags || [])
    ].join(" ").toLowerCase();

    if (search && !haystack.includes(search)) return false;
    if (statusFilter !== "all" && company.status !== statusFilter) return false;
    return true;
  });

  filtered.sort((left, right) => {
    if (sortBy === "score-desc") return Number(right.score || 0) - Number(left.score || 0);
    if (sortBy === "name-asc") return companyKey(left).localeCompare(companyKey(right));
    if (sortBy === "status") return left.status.localeCompare(right.status);
    if (sortBy === "updated") return new Date(right.updatedAt || 0) - new Date(left.updatedAt || 0);
    return 0;
  });

  return filtered;
}

function renderResumeAngles() {
  const container = document.getElementById("resumeAngles");
  const jobs = topTargets?.topJobs || [];

  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No resume guidance yet.</p>';
    return;
  }

  container.innerHTML = jobs.slice(0, 4).map((job) => `
    <div class="stack-item">
      <strong>${safeText(job.company)} | ${safeText(job.title)}</strong>
      <span>${safeText((job.resume_angle || [])[0] || "No resume angle available.")}</span>
    </div>
  `).join("");
}

function renderSavedCompanies() {
  const container = document.getElementById("savedCompanies");
  if (!container) return;

  const savedCompanies = getSavedCompanies();
  if (!savedCompanies.length) {
    container.innerHTML = '<p class="muted">Save companies from Spotlight to build a cleaner working list.</p>';
    return;
  }

  container.innerHTML = savedCompanies.slice(0, 10).map((company) => {
    const job = findTopJobForCompany(companyKey(company));
    const story = findStorybrand(companyKey(company)) || {};
    const manager = findManager(companyKey(company)) || {};
    return `
      <article class="saved-company-item reveal-card" style="${brandTheme(companyKey(company))}">
        <div class="saved-company-head">
          ${logoMarkup(companyKey(company), company.website || "", true)}
          <div>
            <strong>${safeText(companyKey(company))}</strong>
          </div>
        </div>
        <div class="saved-company-meta">
          <span class="status-pill ${safeText(statusClass(company.status))}">${safeText(labelForStatus(company.status))}</span>
          <span class="mini-chip">${safeText(company.industry || "Unknown industry")}</span>
          ${company.score ? `<span class="mini-chip">Score ${safeText(company.score)}</span>` : ""}
          ${job?.location ? `<span class="mini-chip">${safeText(job.location)}</span>` : ""}
        </div>
        <p class="small-copy">${safeText(company.notes || company.revops_maturity_gap || "No notes yet.")}</p>
        <p class="small-copy"><strong>Best role:</strong> ${safeText(job ? `${job.title}` : "No linked role yet")}</p>
        <p class="small-copy"><strong>Messaging gap:</strong> ${safeText(story.messaging_gap || "No messaging scan yet.")}</p>
        <p class="small-copy"><strong>Likely manager:</strong> ${safeText(manager.probable_hiring_manager || "Manual review pending")}</p>
        <div class="saved-company-links">
          ${company.website ? `<a class="action-link" href="${safeText(company.website)}" target="_blank" rel="noreferrer">Website</a>` : ""}
          <a class="action-link" href="${safeText(toCompanyLinkedInUrl(companyKey(company)))}" target="_blank" rel="noreferrer">LinkedIn</a>
          <button class="ghost-btn jump-note-btn" type="button" data-company="${safeText(companyKey(company))}">Notes</button>
        </div>
        <div class="quick-status-row">
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="researching">Research</button>
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="applied">Applied</button>
          <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="outreach">Outreach</button>
        </div>
      </article>
    `;
  }).join("");
}

function renderJobIntelligence() {
  const container = document.getElementById("jobIntelligence");
  if (!container) return;

  const jobs = topTargets?.topJobs || [];
  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No job intelligence available yet.</p>';
    return;
  }

  container.innerHTML = jobs.slice(0, 6).map((job, index) => {
    const company = companies.find((item) => companyKey(item) === job.company) || {};
    const story = findStorybrand(job.company) || {};
    const manager = findManager(job.company) || {};
    const signal = hiringSignals.find((item) => companyKey(item.company) === job.company) || {};
    const saved = company.saved ? "Saved" : "Not saved";
    const signalBreakdown = Object.entries(signal.signal_breakdown || {})
      .filter(([, value]) => Number(value) > 0)
      .sort((a, b) => Number(b[1]) - Number(a[1]))
      .map(([label, value]) => `${label.replace(/_/g, " ")} +${value}`)
      .join(" | ");
    return `
      <article class="intel-card reveal-card" style="${brandTheme(job.company)}">
        <strong>#${index + 1} ${safeText(job.company)} | ${safeText(job.title)}</strong>
        <p class="small-copy"><strong>Why it matters:</strong> ${safeText(company.hiring_signal || "Strong role-fit match.")}</p>
        <p class="small-copy"><strong>Resume fix:</strong> ${safeText((job.resume_angle || [])[0] || "Lead with systems-building wins.")}</p>
        <p class="small-copy"><strong>Proof point:</strong> ${safeText(job.top_win || "")}</p>
        <p class="small-copy"><strong>Outreach move:</strong> ${safeText(story.suggested_outreach_angle || manager.probable_hiring_manager || "Research the hiring manager and send a systems-builder note.")}</p>
        <div class="saved-company-meta">
          <span class="status-pill">${safeText(saved)}</span>
          <span class="mini-chip">${safeText(job.resume_angle_key || "revops_salesops")}</span>
          <span class="mini-chip">Score ${safeText(job.score ?? "")}</span>
          <span class="mini-chip">${safeText(job.source_label || sourceLabelFromUrl(job.url))}</span>
          ${job.source_confidence ? `<span class="mini-chip">${safeText(job.source_confidence)} confidence</span>` : ""}
          ${job.location ? `<span class="mini-chip">${safeText(job.location)}</span>` : ""}
          ${job.salary_text ? `<span class="mini-chip">${safeText(job.salary_text)}</span>` : ""}
          ${job.recency_label ? `<span class="mini-chip">${safeText(job.recency_label)}</span>` : ""}
          ${job.freshness ? `<span class="mini-chip">${safeText(job.freshness)}</span>` : ""}
          ${job.trend_label ? `<span class="mini-chip">${safeText(job.trend_label)}</span>` : ""}
        </div>
        ${job.keyword_matches?.length ? `<div class="job-meta-row">
          ${job.keyword_matches.slice(0, 6).map((keyword) => `<span class="mini-chip keyword-chip">${safeText(keyword)}</span>`).join("")}
        </div>` : ""}
        ${signalBreakdown ? `<p class="small-copy"><strong>Signal breakdown:</strong> ${safeText(signalBreakdown)}</p>` : ""}
        ${job.first_seen || job.last_seen ? `<p class="small-copy"><strong>Tracking:</strong> ${safeText(job.first_seen ? `first seen ${job.first_seen}` : "")}${job.first_seen && job.last_seen ? " | " : ""}${safeText(job.last_seen ? `last seen ${job.last_seen}` : "")}</p>` : ""}
      </article>
    `;
  }).join("");
}

function narrativeForCompany(company, job, story, manager) {
  const whyCompany = company.industry === "Industrial Manufacturing" || company.industry === "Industrial Equipment"
    ? "The company sits in a complex commercial environment where industrial credibility, technical buyer language, and pipeline discipline matter."
    : company.industry === "Pharmaceutical Manufacturing"
      ? "The company operates in a process-heavy regulated environment where structured execution, cross-functional alignment, and commercial visibility matter."
      : "The company has a GTM-heavy operating model where better systems, clearer messaging, and revenue visibility can directly improve execution.";

  const whyNow = company.hiring_signal || manager?.probable_hiring_manager
    ? `${company.hiring_signal || "The hiring signals suggest movement in the revenue engine."} ${manager?.probable_hiring_manager ? `A likely stakeholder is ${manager.probable_hiring_manager}.` : ""}`.trim()
    : "The timing is strong because the business shows signs of sales-system or growth-stage complexity.";

  const whyYou = job
    ? `You match this through ${job.resume_angle_key === "industrial_manufacturing" ? "industrial pipeline leadership and complex B2B account development" : "RevOps systems-building, CRM workflow design, and pipeline analytics"}. Your strongest proof point is: ${job.top_win}`
    : `You fit this through revenue systems thinking, outbound discipline, and the ability to connect commercial execution to measurable growth.`;

  const outreach = story?.suggested_outreach_angle || "Lead with the systems-builder angle and show how you reduce friction in the revenue engine.";

  return { whyCompany, whyNow, whyYou, outreach };
}

function renderCompanyNarratives() {
  const container = document.getElementById("companyNarratives");
  if (!container) return;

  const targets = (topTargets?.topCompanies || []).slice(0, 4);
  if (!targets.length) {
    container.innerHTML = '<p class="muted">No narrative targets available yet.</p>';
    return;
  }

  container.innerHTML = targets.map((target) => {
    const job = findTopJobForCompany(target.company);
    const story = findStorybrand(target.company) || {};
    const manager = findManager(target.company) || {};
    const narrative = narrativeForCompany(target, job, story, manager);

    return `
      <article class="draft-card">
        <h3>${safeText(target.company)}</h3>
        <p class="draft-subject">${safeText(target.industry || "")}</p>
        <pre>${safeText(
`Why this company:
${narrative.whyCompany}

Why now:
${narrative.whyNow}

Why you:
${narrative.whyYou}

Best outreach angle:
${narrative.outreach}`)}</pre>
      </article>
    `;
  }).join("");
}

function renderOutreachSequences() {
  const container = document.getElementById("outreachSequences");
  if (!container) return;

  const drafts = outreachDrafts.slice(0, 4);
  if (!drafts.length) {
    container.innerHTML = '<p class="muted">No outreach sequences available yet.</p>';
    return;
  }

  container.innerHTML = drafts.map((draft) => {
    const company = companies.find((item) => companyKey(item) === draft.company) || {};
    const sequenceType = company.industry === "Industrial Manufacturing" || company.industry === "Industrial Equipment"
      ? "Industrial sequence"
      : company.industry === "Sales Technology"
        ? "RevOps SaaS sequence"
        : "General sequence";
    return `
      <article class="draft-card">
        <h3>${safeText(draft.company)}</h3>
        <p class="draft-subject">${safeText(sequenceType)}</p>
        <pre>${safeText(
`Step 1:
Send a short operator-led note focused on commercial friction, visibility, or messaging gaps.

Step 2:
48 hours later, follow with one concrete observation tied to ${draft.company}'s likely GTM or revenue-systems need.

Step 3:
Ask for a short conversation around pipeline clarity, targeting systems, and execution discipline rather than asking for a job directly.

Opening angle:
${draft.outreach_angle || "Lead with the systems-builder angle."}`)}</pre>
      </article>
    `;
  }).join("");
}

function slugify(value) {
  return String(value || "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "") || "draft";
}

function keywordSuggestionsForJob(job, company, story) {
  const keywords = new Set();
  const angleKey = job.resume_angle_key || "";
  const industry = company.industry || "";
  const title = String(job.title || "").toLowerCase();

  [
    "revenue operations",
    "pipeline visibility",
    "crm workflow design",
    "sales process",
    "forecasting",
    "territory planning",
    "account targeting",
    "cross-functional alignment"
  ].forEach((keyword) => keywords.add(keyword));

  if (angleKey === "industrial_manufacturing" || industry.includes("Industrial")) {
    ["industrial sales", "technical buyers", "account development", "complex sales cycles", "operations alignment"].forEach((keyword) => keywords.add(keyword));
  }

  if (angleKey === "revops_salesops" || title.includes("operations")) {
    ["sales operations", "revenue systems", "dashboard reporting", "funnel discipline", "pipeline analytics"].forEach((keyword) => keywords.add(keyword));
  }

  if (industry.includes("Pharmaceutical")) {
    ["process discipline", "regulated markets", "commercial coordination"].forEach((keyword) => keywords.add(keyword));
  }

  if (industry.includes("Sales Technology") || title.includes("strategy")) {
    ["go-to-market", "sales technology", "prospect intelligence", "workflow automation"].forEach((keyword) => keywords.add(keyword));
  }

  if (story.messaging_gap) {
    const text = story.messaging_gap.toLowerCase();
    if (text.includes("roi")) keywords.add("roi messaging");
    if (text.includes("pain")) keywords.add("buyer pain");
    if (text.includes("clar")) keywords.add("message clarity");
  }

  return Array.from(keywords).slice(0, 10);
}

function buildResumeDraftText(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  return `Tony Beal Resume Draft\n\nTarget Company: ${job.company}\nTarget Role: ${job.title}\n\nPrimary Positioning:\n${(job.resume_angle || [])[0] || ""}\n\nSecondary Positioning:\n${(job.resume_angle || [])[1] || ""}\n\nTargeted Proof Point:\n${job.top_win || ""}\n\nCompany Context:\n${company.revops_maturity_gap || ""}\n\nMessaging Gap:\n${story.messaging_gap || ""}\n\nKeywords To Add Or Reinforce:\n- ${keywords.join("\n- ")}\n\nSuggested Resume Emphasis:\n- Revenue systems and pipeline visibility\n- CRM workflow and execution discipline\n- AI-assisted targeting and prospect intelligence\n- Strategic outbound in complex B2B markets\n`;
}

function buildResumeBulletRewrites(job, company, story) {
  const bullets = [];
  bullets.push("Built and improved revenue systems that increased pipeline visibility, sharpened account targeting, and supported better commercial execution across complex B2B sales motions.");

  if ((company.industry || "").includes("Industrial")) {
    bullets.push("Aligned account development, quoting activity, and pipeline priorities with operations and engineering realities in industrial and technical markets.");
  } else if ((company.industry || "").includes("Pharmaceutical")) {
    bullets.push("Supported commercial growth in process-heavy environments by improving visibility, coordination, and disciplined execution across the revenue engine.");
  } else {
    bullets.push("Used CRM workflow design, reporting discipline, and AI-assisted research to help GTM teams improve execution, focus, and pipeline quality.");
  }

  bullets.push(`Translate this company need directly into your resume: ${story.messaging_gap || company.revops_maturity_gap || "clearer pipeline discipline and stronger commercial visibility"}.`);
  return bullets;
}

function buildAtsResumeText(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  const bullets = buildResumeBulletRewrites(job, company, story);
  return `Tony Beal\nRevenue Operations | Sales Operations | GTM Systems | Business Development\n\nTarget Role: ${job.title}\nTarget Company: ${job.company}\n\nProfessional Summary\nRevenue operations and business development leader with 15+ years building pipeline, commercial visibility, and execution discipline across B2B manufacturing, industrial markets, and GTM-heavy environments. Strongest fit for roles requiring revenue systems, CRM workflow design, strategic outbound, and pipeline analytics.\n\nCore Keywords\n${keywords.join(" | ")}\n\nTargeted Experience Bullets\n- ${bullets.join("\n- ")}\n\nProof Point\n- ${job.top_win || ""}\n`;
}

function buildRecruiterResumeText(job, company, story) {
  const bullets = buildResumeBulletRewrites(job, company, story);
  return `Tony Beal\nRevenue Operations & Business Development Leader\n\nTarget Role: ${job.title}\nTarget Company: ${job.company}\n\nPositioning\n${(job.resume_angle || [])[0] || ""}\n${(job.resume_angle || [])[1] || ""}\n\nResume Narrative\nYou build the system that helps sales work: targeting, pipeline visibility, CRM workflow, account prioritization, and disciplined execution. Your background combines industrial credibility, revenue systems thinking, and AI-assisted prospect intelligence in a way that fits complex B2B environments.\n\nSuggested Bullets\n- ${bullets.join("\n- ")}\n\nSignature Win\n- ${job.top_win || ""}\n`;
}

function buildBestResumeText(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story).slice(0, 8);
  const bullets = buildBestResumeBullets(job, company, story);
  const summary = buildBestResumeSummary(job, company, story);
  return `Tony Beal
${MASTER_RESUME_PROFILE.location} | ${MASTER_RESUME_PROFILE.phone} | ${MASTER_RESUME_PROFILE.email}
${MASTER_RESUME_PROFILE.linkedin_url} | ${MASTER_RESUME_PROFILE.linkedin_metrics}

${job.title} | ${job.company}

Professional Summary
${summary}

Core Keywords
${keywords.join(" | ")}

Selected Experience Highlights
- ${bullets.join("\n- ")}

Relevant Experience
- ${MASTER_RESUME_PROFILE.experience.join("\n- ")}

LinkedIn Positioning
- ${MASTER_RESUME_PROFILE.linkedin_headline}

Signature Win
- ${job.top_win || ""}
`;
}

function buildBestResumeSummary(job, company, story) {
  const industry = String(company.industry || job.industry || "");
  const title = String(job.title || "").toLowerCase();
  const keywords = keywordSuggestionsForJob(job, company, story).slice(0, 4);
  const keywordLine = keywords.length ? ` Core strengths include ${keywords.join(", ")}.` : "";
  if (title.includes("revenue operations") || title.includes("sales operations") || title.includes("revops")) {
    return `Revenue operations and business development leader with 15+ years building pipeline visibility, CRM discipline, targeting logic, and GTM execution systems across industrial and B2B markets.${keywordLine}`;
  }
  if (title.includes("business development")) {
    return `Business development leader with 15+ years creating qualified pipeline, opening new markets, and improving commercial execution through structured prospecting, CRM workflow design, and revenue-system discipline.${keywordLine}`;
  }
  if (industry.includes("Industrial") || industry.includes("Manufacturing")) {
    return `Business development and revenue systems leader with 15+ years driving pipeline growth across industrial and B2B markets. Combines outbound prospecting, CRM workflow design, account targeting, and pipeline visibility to help commercial teams execute more effectively.${keywordLine}`;
  }
  if (industry.includes("Pharmaceutical")) {
    return `Revenue operations and business development leader with 15+ years improving pipeline visibility, targeting discipline, and commercial execution in process-heavy B2B environments. Strong fit for roles requiring structured growth systems and cross-functional coordination.${keywordLine}`;
  }
  return `${MASTER_RESUME_PROFILE.summary}${keywordLine}`;
}

function buildBestResumeBullets(job, company, story) {
  const bullets = [...MASTER_RESUME_PROFILE.wins.slice(0, 2)];

  const industry = String(company.industry || job.industry || "");
  const title = String(job.title || "").toLowerCase();
  const keywords = keywordSuggestionsForJob(job, company, story);
  if (title.includes("revenue operations") || title.includes("sales operations") || title.includes("revops")) {
    bullets.push(`Built operating discipline around ${keywords.slice(0, 3).join(", ").toLowerCase() || "pipeline visibility, CRM workflow, and GTM execution"} to give leadership clearer funnel control and better commercial coordination.`);
  } else if (title.includes("business development")) {
    bullets.push("Built repeatable outbound systems that turned account research, targeting logic, and multichannel follow-up into qualified pipeline and new market traction.");
  }
  if (industry.includes("Industrial") || industry.includes("Manufacturing")) {
    bullets.push("Aligned quoting, account development, and pipeline priorities with operations and engineering realities in technical and industrial markets.");
  } else if (industry.includes("Pharmaceutical")) {
    bullets.push("Supported commercial growth in process-heavy environments by improving CRM visibility, coordination, and disciplined execution across the revenue engine.");
  } else {
    bullets.push("Improved GTM execution through CRM workflow design, reporting discipline, AI-assisted research, and clearer targeting logic for sales teams.");
  }

  if (story.messaging_gap) {
    bullets.push(`Sharpened commercial messaging and outreach around buyer friction, value clarity, and response-rate improvement using StoryBrand-style positioning.`);
  } else {
    bullets.push(MASTER_RESUME_PROFILE.wins[2]);
  }

  return bullets.slice(0, 4);
}

function buildApplicationPacketText(job, company, story, draft, manager) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  const bullets = buildResumeBulletRewrites(job, company, story);
  return `CareerOS Complete Application Packet\n\nTarget Company: ${job.company}\nTarget Role: ${job.title}\nWebsite: ${company.website || ""}\nLikely Manager: ${manager?.probable_hiring_manager || ""}\n\n1. Resume Positioning\n${(job.resume_angle || [])[0] || ""}\n${(job.resume_angle || [])[1] || ""}\n\n2. Keywords To Reinforce\n- ${keywords.join("\n- ")}\n\n3. Bullet Rewrites\n- ${bullets.join("\n- ")}\n\n4. Proof Point\n- ${job.top_win || ""}\n\n5. Messaging / Company Context\n- ${company.revops_maturity_gap || ""}\n- ${story.messaging_gap || ""}\n\n6. Cover Letter Starter\nI am interested in ${job.company} because the role sits where stronger pipeline visibility, execution discipline, and GTM systems can directly improve growth.\n\nMy background spans revenue operations, business development, CRM workflow design, and AI-assisted targeting across industrial and GTM-heavy environments. ${job.top_win || ""}\n\nI would welcome the chance to contribute.\n\n7. Outreach Direction\nSubject: ${draft?.subject || ""}\nAngle: ${draft?.outreach_angle || ""}\n\n8. Today Checklist\n- Review job posting\n- Tailor resume keywords\n- Export ATS or recruiter PDF\n- Send outreach if appropriate\n- Update dashboard status\n`;
}

function buildApplicationPacketHtml(job, company, story, draft, manager) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  const bullets = buildResumeBulletRewrites(job, company, story);
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${safeText(job.company)} Application Packet</title>
<style>
body{font-family:Arial,sans-serif;margin:36px;color:#111827;line-height:1.55}
h1,h2{margin:0 0 12px}
h1{font-size:28px;color:#0f2d46}
h2{font-size:18px;margin-top:24px;color:#0f2d46}
p,li{font-size:14px}
ul{padding-left:18px}
.muted{color:#4b5563}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#e5f3ff;color:#0f2d46;font-size:12px;font-weight:700;margin-right:8px}
</style>
</head>
<body>
<h1>CareerOS Application Packet</h1>
<p class="muted">${safeText(job.company)} | ${safeText(job.title)}</p>
<p><span class="tag">Resume</span><span class="tag">Cover Letter</span><span class="tag">Keywords</span><span class="tag">Outreach</span></p>
<h2>Resume Positioning</h2>
<p>${safeText((job.resume_angle || [])[0] || "")}</p>
<p>${safeText((job.resume_angle || [])[1] || "")}</p>
<h2>Keywords To Reinforce</h2>
<ul>${keywords.map((keyword) => `<li>${safeText(keyword)}</li>`).join("")}</ul>
<h2>Bullet Rewrites</h2>
<ul>${bullets.map((bullet) => `<li>${safeText(bullet)}</li>`).join("")}</ul>
<h2>Proof Point</h2>
<p>${safeText(job.top_win || "")}</p>
<h2>Company Context</h2>
<p>${safeText(company.revops_maturity_gap || "")}</p>
<p>${safeText(story.messaging_gap || "")}</p>
<h2>Cover Letter Starter</h2>
<p>${safeText(`I am interested in ${job.company} because the role sits where stronger pipeline visibility, execution discipline, and GTM systems can directly improve growth.`)}</p>
<p>${safeText(`My background spans revenue operations, business development, CRM workflow design, and AI-assisted targeting across industrial and GTM-heavy environments. ${job.top_win || ""}`)}</p>
<h2>Outreach Direction</h2>
<p><strong>Subject:</strong> ${safeText(draft?.subject || "")}</p>
<p><strong>Angle:</strong> ${safeText(draft?.outreach_angle || "")}</p>
<p><strong>Likely Manager:</strong> ${safeText(manager?.probable_hiring_manager || "")}</p>
</body>
</html>`;
}

function buildResumeDraftHtml(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${safeText(job.company)} Resume Brief</title>
<style>
body{font-family:Georgia,serif;margin:40px;color:#111827;line-height:1.55}
h1,h2{margin:0 0 12px}
h1{font-size:28px}
h2{font-size:18px;margin-top:28px}
p,li{font-size:14px}
ul{padding-left:18px}
.muted{color:#4b5563}
.block{margin-top:18px}
</style>
</head>
<body>
<h1>Tony Beal Resume Brief</h1>
<p class="muted">${safeText(job.company)} | ${safeText(job.title)}</p>
<div class="block">
  <h2>Positioning</h2>
  <p>${safeText((job.resume_angle || [])[0] || "")}</p>
  <p>${safeText((job.resume_angle || [])[1] || "")}</p>
</div>
<div class="block">
  <h2>Proof Point</h2>
  <p>${safeText(job.top_win || "")}</p>
</div>
<div class="block">
  <h2>Company Context</h2>
  <p>${safeText(company.revops_maturity_gap || "")}</p>
  <p>${safeText(story.messaging_gap || "")}</p>
</div>
<div class="block">
  <h2>Keywords To Add</h2>
  <ul>${keywords.map((keyword) => `<li>${safeText(keyword)}</li>`).join("")}</ul>
</div>
</body>
</html>`;
}

function buildResumeModeHtml(job, company, story, mode) {
  const keywords = keywordSuggestionsForJob(job, company, story);
  const bullets = buildResumeBulletRewrites(job, company, story);
  const isAts = mode === "ats";
  const title = isAts ? "ATS Resume Brief" : "Recruiter Resume Brief";
  const bodyFont = isAts ? "Arial, sans-serif" : 'Georgia, serif';
  const accent = isAts ? "#111827" : "#0f2d46";
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${safeText(job.company)} ${safeText(title)}</title>
<style>
body{font-family:${bodyFont};margin:40px;color:#111827;line-height:1.55}
h1,h2{margin:0 0 12px}
h1{font-size:${isAts ? "26px" : "30px"};color:${accent}}
h2{font-size:18px;margin-top:26px;color:${accent}}
p,li{font-size:14px}
ul{padding-left:18px}
.muted{color:#4b5563}
.block{margin-top:18px}
.bar{height:8px;width:72px;border-radius:999px;background:${isAts ? "#d1d5db" : "#8fd5ff"};margin:0 0 18px}
</style>
</head>
<body>
<div class="bar"></div>
<h1>Tony Beal</h1>
<p class="muted">${safeText(job.title)} | ${safeText(job.company)}</p>
<div class="block">
  <h2>${safeText(title)}</h2>
  <p>${safeText(isAts ? "Use this version for direct applications and ATS parsing." : "Use this version for recruiter review and polished PDF sharing.")}</p>
</div>
<div class="block">
  <h2>Positioning</h2>
  <p>${safeText((job.resume_angle || [])[0] || "")}</p>
  <p>${safeText((job.resume_angle || [])[1] || "")}</p>
</div>
<div class="block">
  <h2>Keywords</h2>
  <ul>${keywords.map((keyword) => `<li>${safeText(keyword)}</li>`).join("")}</ul>
</div>
<div class="block">
  <h2>Bullet Rewrites</h2>
  <ul>${bullets.map((bullet) => `<li>${safeText(bullet)}</li>`).join("")}</ul>
</div>
<div class="block">
  <h2>Proof Point</h2>
  <p>${safeText(job.top_win || "")}</p>
</div>
</body>
</html>`;
}

function buildFullTailoredResumeHtml(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story).slice(0, 12);
  const bullets = [
    ...buildBestResumeBullets(job, company, story),
    ...buildResumeBulletRewrites(job, company, story).slice(0, 2)
  ].slice(0, 6);
  const title = `${job.title} | ${job.company}`;
  const companyContext = company.revops_maturity_gap || story.messaging_gap || "Strong fit for pipeline visibility, CRM workflow design, and structured GTM execution.";
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${safeText(job.company)} Full Tailored Resume</title>
<style>
@page { size: letter; margin: 0.5in; }
body{font-family:Arial,sans-serif;margin:0;color:#111827;line-height:1.4;background:#fff}
.page{max-width:7.7in;margin:0 auto}
.topbar{height:12px;border-radius:999px;background:linear-gradient(90deg,#103255,#2383cc,#d2a24f);margin-bottom:16px}
.header{display:flex;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:2px solid #123554}
.name{margin:0;font-size:30px;font-weight:800;color:#103255}
.headline{margin:4px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#496985}
.meta{font-size:12px;color:#4b5563;text-align:right}
.target{margin:14px 0 12px;padding:10px 12px;border-radius:14px;background:#f4f9ff;border:1px solid #d8e4ef;font-size:13px;color:#123554;font-weight:700}
.grid{display:grid;grid-template-columns:1.35fr .95fr;gap:18px}
.section{margin-top:12px;padding-left:11px;border-left:3px solid #d9e6f2}
.section h2{margin:0 0 7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#3b5c77}
ul{margin:0;padding-left:18px}
li,p{font-size:11.5px;margin:0 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:5px 8px;border-radius:999px;background:#eef6ff;border:1px solid #d6e6f5;font-size:11px;font-weight:700;color:#21435f}
.proof{padding:10px 12px;border-radius:12px;background:#123554;color:#f8fbff;font-size:12px}
.exp{display:grid;gap:9px}
.exp strong{display:block;font-size:11.5px;color:#103255}
.exp span{display:block;font-size:11px;color:#4b5563}
</style>
</head>
<body>
<div class="page">
  <div class="topbar"></div>
  <div class="header">
    <div>
      <h1 class="name">Tony Beal</h1>
      <p class="headline">${safeText(MASTER_RESUME_PROFILE.linkedin_headline)}</p>
    </div>
    <div class="meta">
      <div>${safeText(MASTER_RESUME_PROFILE.location)}</div>
      <div>${safeText(MASTER_RESUME_PROFILE.phone)} | ${safeText(MASTER_RESUME_PROFILE.email)}</div>
      <div>${safeText(MASTER_RESUME_PROFILE.linkedin_url)} | ${safeText(MASTER_RESUME_PROFILE.linkedin_metrics)}</div>
    </div>
  </div>
  <div class="target">${safeText(title)}</div>
  <div class="grid">
    <div>
      <div class="section">
        <h2>Professional Summary</h2>
        <p>${safeText(buildBestResumeSummary(job, company, story))}</p>
      </div>
      <div class="section">
        <h2>Tailored Experience Highlights</h2>
        <ul>${bullets.map((bullet) => `<li>${safeText(bullet)}</li>`).join("")}</ul>
      </div>
      <div class="section">
        <h2>Relevant Experience</h2>
        <div class="exp">
          ${MASTER_RESUME_PROFILE.experience.map((item) => {
            const parts = item.split(" | ");
            return `<div><strong>${safeText(parts.slice(0, 2).join(" | "))}</strong><span>${safeText(parts.slice(2).join(" | "))}</span></div>`;
          }).join("")}
        </div>
      </div>
    </div>
    <div>
      <div class="section">
        <h2>Priority Keywords</h2>
        <div class="chips">${keywords.map((keyword) => `<span class="chip">${safeText(keyword)}</span>`).join("")}</div>
      </div>
      <div class="section">
        <h2>Signature Win</h2>
        <div class="proof">${safeText(job.top_win || MASTER_RESUME_PROFILE.wins[0])}</div>
      </div>
      <div class="section">
        <h2>Targeted Fit</h2>
        <p>${safeText(companyContext)}</p>
      </div>
      <div class="section">
        <h2>Tools & Systems</h2>
        <p>${safeText(MASTER_RESUME_PROFILE.tools.join(", "))}</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>`;
}

function buildBestResumeHtml(job, company, story) {
  const keywords = keywordSuggestionsForJob(job, company, story).slice(0, 8);
  const bullets = buildBestResumeBullets(job, company, story);
  const headline = company.industry && company.industry.includes("Industrial")
    ? "Revenue Operations | Business Development | Industrial Growth Systems"
    : "Revenue Operations | Sales Operations | GTM Systems";
  const summary = buildBestResumeSummary(job, company, story);
  const roleFit = (job.resume_angle || [])[1] || company.revops_maturity_gap || "Strong fit for pipeline visibility, CRM workflow design, and disciplined GTM execution.";
  const coreTools = MASTER_RESUME_PROFILE.tools.slice(0, 6);

  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${safeText(job.company)} Best Resume</title>
<style>
@page { size: letter; margin: 0.45in; }
body{font-family:Arial,sans-serif;margin:0;color:#111827;line-height:1.34;background:#fff}
.page{max-width:7.7in;margin:0 auto}
.topbar{height:10px;border-radius:12px;background:linear-gradient(90deg,#0f2d46,#1a6fb0,#c7922f);margin-bottom:14px}
.top{display:flex;justify-content:space-between;gap:18px;padding-bottom:12px;border-bottom:2px solid #0f2d46}
.name{font-size:28px;font-weight:800;letter-spacing:-0.03em;color:#0f2d46;margin:0}
.headline{margin:4px 0 0;font-size:13px;font-weight:700;color:#36556f;text-transform:uppercase;letter-spacing:.06em}
.meta{font-size:12px;color:#4b5563;text-align:right}
.role{margin:14px 0 10px;padding:9px 11px;border:1px solid #d8e4ef;border-radius:12px;background:#f7fbff;font-size:13px;color:#0f2d46;font-weight:700}
.grid{display:grid;grid-template-columns:1.45fr .95fr;gap:18px}
.section{margin-top:10px;padding-left:10px;border-left:3px solid #d8e4ef}
.section h2{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#36556f}
p,li{font-size:11.5px;margin:0}
ul{margin:0;padding-left:17px}
li{margin:0 0 4px}
.keywords{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:5px 8px;border-radius:999px;background:#eef6ff;border:1px solid #d6e6f5;font-size:11px;font-weight:700;color:#21435f}
.proof{padding:10px 12px;border-radius:12px;background:#0f2d46;color:#f8fbff;font-size:12px}
.small{font-size:11px;color:#5b6773}
.experience-list{display:grid;gap:8px}
.exp-item strong{display:block;font-size:11.5px;color:#0f2d46}
.exp-item span{display:block;font-size:11px;color:#4b5563}
</style>
</head>
<body>
  <div class="page">
    <div class="topbar"></div>
    <div class="top">
      <div>
        <h1 class="name">Tony Beal</h1>
        <p class="headline">${safeText(headline || MASTER_RESUME_PROFILE.headline)}</p>
      </div>
      <div class="meta">
        <div>${safeText(MASTER_RESUME_PROFILE.location)}</div>
        <div>${safeText(MASTER_RESUME_PROFILE.phone)} | ${safeText(MASTER_RESUME_PROFILE.email)}</div>
        <div>Remote with office collaboration | ${safeText(MASTER_RESUME_PROFILE.linkedin_url)}</div>
      </div>
    </div>

    <div class="role">${safeText(job.title)} | ${safeText(job.company)}</div>

    <div class="grid">
      <div>
        <div class="section">
          <h2>Professional Summary</h2>
          <p>${safeText(summary)}</p>
        </div>

        <div class="section">
          <h2>Selected Experience Highlights</h2>
          <ul>${bullets.map((bullet) => `<li>${safeText(bullet)}</li>`).join("")}</ul>
        </div>

        <div class="section">
          <h2>Relevant Experience</h2>
          <div class="experience-list">
            <div class="exp-item"><strong>Director of Business Development | ProForm Manufacturing</strong><span>Built $6M+ outbound pipeline, opened new vertical markets, and improved KPI visibility.</span></div>
            <div class="exp-item"><strong>Revenue Operations & Commercial Development | Natoli Engineering</strong><span>Supported pipeline visibility, account prioritization, and structured commercial outreach.</span></div>
            <div class="exp-item"><strong>Regional Sales Manager | BioGaia USA</strong><span>Developed 3,700+ accounts and led a team exceeding goals for 8 consecutive years.</span></div>
            <div class="exp-item"><strong>Sales Manager | Wicks Aircraft & Motorsports</strong><span>Generated 1,000+ new customers through structured prospecting and follow-up discipline.</span></div>
            <div class="exp-item"><strong>Account Manager | KeHE Distributors</strong><span>Managed multi-region accounts and expanded revenue through product and territory strategy.</span></div>
          </div>
        </div>
      </div>

      <div>
        <div class="section">
          <h2>Core Keywords</h2>
          <div class="keywords">${keywords.map((keyword) => `<span class="chip">${safeText(keyword)}</span>`).join("")}</div>
        </div>

        <div class="section">
          <h2>Signature Win</h2>
          <div class="proof">${safeText(job.top_win || "")}</div>
        </div>

        <div class="section">
          <h2>Performance Highlights</h2>
          <ul>${MASTER_RESUME_PROFILE.wins.slice(0, 3).map((item) => `<li>${safeText(item)}</li>`).join("")}</ul>
        </div>

        <div class="section">
          <h2>Targeted Fit</h2>
          <p class="small">${safeText(roleFit)}</p>
        </div>

        <div class="section">
          <h2>LinkedIn</h2>
          <p class="small">${safeText(MASTER_RESUME_PROFILE.linkedin_headline)}</p>
          <p class="small">${safeText(MASTER_RESUME_PROFILE.linkedin_url)} | ${safeText(MASTER_RESUME_PROFILE.linkedin_metrics)}</p>
        </div>

        <div class="section">
          <h2>Tools & Systems</h2>
          <p class="small">${safeText(coreTools.join(", "))}.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>`;
}

function renderResumeDraftExports() {
  const container = document.getElementById("resumeDraftExports");
  if (!container) return;

  const jobs = getScopedJobs(4);
  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No resume draft exports available yet.</p>';
    return;
  }

  container.innerHTML = jobs.map((job) => {
    const company = companies.find((item) => companyKey(item) === job.company) || {};
    const story = findStorybrand(job.company) || {};
    const text = buildResumeDraftText(job, company, story);
    const keywords = keywordSuggestionsForJob(job, company, story);
    return `
      <article class="draft-card">
        <h3>${safeText(job.company)} | ${safeText(job.title)}</h3>
        <p class="draft-subject">Build the strongest one-page resume version for this role, then use the alternate exports only if needed.</p>
        <p class="small-copy"><strong>Keywords:</strong> ${safeText(keywords.join(" | "))}</p>
        <div class="resume-priority-strip">
          <span class="resume-priority-badge">Primary</span>
          <span class="small-copy">Start with <strong>Best Resume PDF</strong>. Use ATS or recruiter variants only when you need a fallback format.</span>
        </div>
        <div class="draft-actions">
          <button class="primary-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="best-resume-pdf">Best Resume PDF</button>
          <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="full-tailored-pdf">Full Tailored Resume</button>
          <button class="ghost-btn export-resume-btn" type="button" data-filename="${safeText(`${slugify(job.company)}-${slugify(job.title)}-resume-draft.txt`)}" data-content="${safeText(text)}">Export Draft</button>
          <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="ats-text">ATS Text</button>
          <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="ats-pdf">ATS PDF</button>
          <button class="ghost-btn export-resume-mode-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}" data-mode="recruiter-pdf">Recruiter PDF</button>
          <button class="ghost-btn export-application-packet-btn" type="button" data-company="${safeText(job.company)}" data-title="${safeText(job.title)}">Complete Packet</button>
        </div>
      </article>
    `;
  }).join("");
}

function renderCoverLetterDrafts() {
  const container = document.getElementById("coverLetterDrafts");
  if (!container) return;

  const jobs = getScopedJobs(4);
  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No cover letter drafts available yet.</p>';
    return;
  }

  container.innerHTML = jobs.map((job) => {
    const company = companies.find((item) => companyKey(item) === job.company) || {};
    const story = findStorybrand(job.company) || {};
    const manager = findManager(job.company) || {};
    const intro = company.industry === "Industrial Manufacturing" || company.industry === "Industrial Equipment"
      ? "I am interested in this role because it sits at the intersection of industrial credibility, commercial execution, and revenue-system discipline."
      : company.industry === "Pharmaceutical Manufacturing"
        ? "I am interested in this role because it combines process-heavy commercial execution with the need for clear systems and disciplined growth."
        : "I am interested in this role because it sits directly in the space where RevOps systems, GTM execution, and pipeline visibility create measurable leverage.";
    const body = `Over the last 15+ years I have built pipeline, targeting discipline, CRM workflow, and commercial visibility across B2B manufacturing, industrial, and GTM-heavy environments. ${job.top_win || ""} ${story.messaging_gap ? `What stands out about ${job.company} is a clear opportunity around ${story.messaging_gap.toLowerCase()}` : ""}`;
    const close = manager.probable_hiring_manager
      ? `I would welcome the chance to speak with ${manager.probable_hiring_manager} or the broader leadership team about how I could help strengthen pipeline visibility, execution discipline, and revenue systems from day one.`
      : "I would welcome the chance to discuss how I could help strengthen pipeline visibility, execution discipline, and revenue systems from day one.";

    const text = `Dear Hiring Team,\n\n${intro}\n\n${body}\n\n${close}\n\nTony Beal`;

    return `
      <article class="draft-card">
        <h3>${safeText(job.company)} | ${safeText(job.title)}</h3>
        <p class="draft-subject">Short cover letter starter</p>
        <pre>${safeText(text)}</pre>
        <div class="draft-actions">
          <button class="ghost-btn export-text-btn" type="button" data-filename="${safeText(`${slugify(job.company)}-${slugify(job.title)}-cover-letter.txt`)}" data-content="${safeText(text)}">Export Cover Letter</button>
        </div>
      </article>
    `;
  }).join("");
}

function renderDailyActionPackets() {
  const container = document.getElementById("dailyActionPackets");
  if (!container) return;

  const selected = getSelectedJob();
  const targets = selected
    ? [(topTargets?.topCompanies || []).find((item) => item.company === selected.company) || { company: selected.company }]
    : (topTargets?.topCompanies || []).slice(0, 4);
  if (!targets.length) {
    container.innerHTML = '<p class="muted">No action packets available yet.</p>';
    return;
  }

  container.innerHTML = targets.map((target) => {
    const job = findTopJobForCompany(target.company);
    const story = findStorybrand(target.company) || {};
    const manager = findManager(target.company) || {};
    const draft = outreachDrafts.find((item) => item.company === target.company) || {};
    const packet = `CareerOS Action Packet\n\nCompany: ${target.company}\nIndustry: ${target.industry || ""}\nWebsite: ${target.website || ""}\n\nWhy this company:\n${target.revops_maturity_gap || ""}\n\nBest job:\n${job ? `${job.title} | Score ${job.score}` : "No linked role yet"}\n\nResume angle:\n${job ? (job.resume_angle || []).join(" ") : "Lead with revenue systems, visibility, and pipeline discipline."}\n\nTop proof point:\n${job?.top_win || "Built more than $6M in outbound pipeline and 3,700+ accounts."}\n\nMessaging gap:\n${story.messaging_gap || ""}\n\nLikely manager:\n${manager.probable_hiring_manager || "Manual review pending"}\n\nOutreach subject:\n${draft.subject || ""}\n\nBest next step today:\n${draft.outreach_angle || "Review the hiring manager and tailor the first note."}\n`;

    return `
      <article class="draft-card">
        <h3>${safeText(target.company)}</h3>
        <p class="draft-subject">Download a one-file action packet for today's work.</p>
        <div class="draft-actions">
          <button class="ghost-btn export-text-btn" type="button" data-filename="${safeText(`${slugify(target.company)}-action-packet.txt`)}" data-content="${safeText(packet)}">Export Packet</button>
        </div>
      </article>
    `;
  }).join("");
}

function renderResumeRewriteLab() {
  const container = document.getElementById("resumeRewriteLab");
  if (!container) return;

  const jobs = getScopedJobs(4);
  if (!jobs.length) {
    container.innerHTML = '<p class="muted">No resume rewrite guidance available yet.</p>';
    return;
  }

  container.innerHTML = jobs.map((job) => {
    const company = companies.find((item) => companyKey(item) === job.company) || {};
    const story = findStorybrand(job.company) || {};
    const intro = job.resume_angle_key === "industrial_manufacturing"
      ? "Rewrite bullets to sound more commercial-technical and operations-aligned."
      : "Rewrite bullets to sound more systems-led, analytical, and revenue-operations focused.";
    const bulletOne = job.resume_angle_key === "industrial_manufacturing"
      ? "Built and improved pipeline visibility across complex industrial sales motions, aligning outreach, quoting activity, and account prioritization with operational realities."
      : "Designed and improved revenue systems that increased pipeline visibility, sharpened account targeting, and created better execution discipline across the funnel.";
    const bulletTwo = company.industry === "Sales Technology"
      ? "Used CRM workflows, prospect intelligence, and AI-assisted research to accelerate pipeline quality and improve commercial decision-making for GTM teams."
      : "Partnered across sales, operations, and leadership to strengthen commercial process, improve forecast clarity, and support strategic account growth.";
    const bulletThree = story.messaging_gap
      ? `Tie your experience to this company's likely gap: ${story.messaging_gap}`
      : "Anchor the rewrite to reducing friction, improving visibility, and making pipeline execution more predictable.";

    return `
      <article class="draft-card">
        <h3>${safeText(job.company)} | ${safeText(job.title)}</h3>
        <p class="draft-subject">${safeText(intro)}</p>
        <pre>${safeText(
`Resume headline angle:
${(job.resume_angle || [])[0] || ""}

Suggested bullet rewrite 1:
${bulletOne}

Suggested bullet rewrite 2:
${bulletTwo}

Targeted emphasis:
${bulletThree}`)}</pre>
      </article>
    `;
  }).join("");
}

function renderApplicationBoard() {
  const container = document.getElementById("applicationBoard");
  if (!container) return;

  const workingSet = companies
    .filter((company) => company.saved || company.status !== "not-started" || company.notes)
    .sort((left, right) => Number(right.score || 0) - Number(left.score || 0));

  if (!workingSet.length) {
    container.innerHTML = '<p class="muted">Save companies or move them into a status to build the board.</p>';
    return;
  }

  container.innerHTML = BOARD_STATUSES.map((status) => {
    const items = workingSet.filter((company) => (company.status || "not-started") === status);
    return `
      <section class="board-column">
        <header class="board-column-header">
          <div>
            <span class="status-pill ${safeText(statusClass(status))}">${safeText(labelForStatus(status))}</span>
          </div>
          <strong>${items.length}</strong>
        </header>
        <div class="board-stack">
          ${items.length ? items.map((company) => {
            const job = findTopJobForCompany(companyKey(company));
            return `
              <article class="board-card ${safeText(statusClass(company.status))}" style="${brandTheme(companyKey(company))}">
                <div class="saved-company-head">
                  ${logoMarkup(companyKey(company), company.website || "", true)}
                  <strong>${safeText(companyKey(company))}</strong>
                </div>
                <p class="small-copy">${safeText(company.notes || company.revops_maturity_gap || "No notes yet.")}</p>
                <div class="saved-company-meta">
                  ${company.score ? `<span class="mini-chip">Score ${safeText(company.score)}</span>` : ""}
                  ${company.industry ? `<span class="mini-chip">${safeText(company.industry)}</span>` : ""}
                  ${job?.recency_label ? `<span class="mini-chip">${safeText(job.recency_label)}</span>` : ""}
                </div>
                <p class="small-copy"><strong>Best role:</strong> ${safeText(job ? job.title : "No linked role yet")}</p>
                <div class="saved-company-links">
                  ${company.website ? `<a class="action-link" href="${safeText(company.website)}" target="_blank" rel="noreferrer">Website</a>` : ""}
                  <button class="ghost-btn jump-note-btn" type="button" data-company="${safeText(companyKey(company))}">Notes</button>
                </div>
                <div class="quick-status-row">
                  <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="applied">Applied</button>
                  <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="outreach">Outreach</button>
                  <button class="ghost-btn quick-status-btn" type="button" data-company="${safeText(companyKey(company))}" data-status="interview">Interview</button>
                </div>
              </article>
            `;
          }).join("") : '<p class="muted">No companies in this stage.</p>'}
        </div>
      </section>
    `;
  }).join("");
}

function renderDailyBrief() {
  const container = document.getElementById("dailyBrief");
  if (!container) return;

  const bestJob = (topTargets?.topJobs || [])[0];
  const bestCompany = (topTargets?.topCompanies || [])[0];
  const bestDraft = outreachDrafts[0];
  const bestAction = actionsToday[0];

  const cards = [
    {
      title: "Top Role",
      body: bestJob ? `${bestJob.company} | ${bestJob.title}. Resume fix: ${(bestJob.resume_angle || [])[0] || ""}` : "No top role available."
    },
    {
      title: "Top Company",
      body: bestCompany ? `${bestCompany.company}. ${bestCompany.revops_maturity_gap || ""}` : "No top company available."
    },
    {
      title: "Top Outreach",
      body: bestDraft ? `${bestDraft.company}. ${bestDraft.subject}` : "No outreach draft available."
    },
    {
      title: "First Move",
      body: bestAction ? `${bestAction.headline}. ${bestAction.details}` : "No action generated."
    },
    {
      title: "Workspace",
      body: workspaceFileHandle
        ? "Workspace file linked. Quick Save can keep your latest notes and statuses ready for your laptop flow."
        : `Open ${HOSTED_DASHBOARD_URL} and use Save Workspace File / Load Workspace File to carry your state between machines.`
    }
  ];

  container.innerHTML = cards.map((card) => `
    <article class="brief-card">
      <h3>${safeText(card.title)}</h3>
      <p>${safeText(card.body)}</p>
    </article>
  `).join("");
}

function renderPipelineStatus() {
  const container = document.getElementById("pipelineStatus");
  const statuses = ["researching", "applied", "outreach", "interview"];

  container.innerHTML = statuses.map((status) => {
    const count = companies.filter((company) => company.status === status).length;
    return `
      <div class="stack-item">
        <strong>${safeText(labelForStatus(status))}</strong>
        <span>${count} companies</span>
      </div>
    `;
  }).join("");
}

function renderNotes() {
  const container = document.getElementById("notes");
  const visibleCompanies = getVisibleCompanies()
    .sort((left, right) => {
      const savedDelta = Number(Boolean(right.saved)) - Number(Boolean(left.saved));
      if (savedDelta !== 0) return savedDelta;
      return Number(right.score || 0) - Number(left.score || 0);
    })
    .slice(0, 12);

  if (!visibleCompanies.length) {
    container.innerHTML = '<p class="muted">No companies match the current filters.</p>';
    return;
  }

  container.innerHTML = visibleCompanies.map((company) => `
    <div class="note-card">
      <h3>${safeText(companyKey(company))}</h3>
      <p class="muted">${safeText(company.industry || "Unknown Industry")} | ${safeText(company.status || "not-started")}</p>
      <textarea data-company="${safeText(companyKey(company))}" placeholder="Notes and follow-up actions...">${safeText(company.notes || "")}</textarea>
    </div>
  `).join("");

  container.querySelectorAll("textarea").forEach((area) => {
    area.addEventListener("input", (event) => {
      const company = companies.find((item) => companyKey(item) === event.target.dataset.company);
      if (!company) return;
      company.notes = event.target.value;
      persistNotes();
    });
  });
}


const APPLIED_JOBS_KEY = "careeros-applied-jobs-v1";

const RESUME_BASE = "https://tonybeal.net/";

function getResumeUrl(company, title) {
  const t = (title || "").toLowerCase();
  const c = (company || "").toLowerCase();
  // Industrial / manufacturing / logistics companies
  const industrialCos = ["itt","timken","donaldson","parker","emerson","honeywell","danaher","crown equipment","allison off-highway","hytorc"];
  const logisticsCos = ["nfi","werner","mclane","circle logistics","americold","radial","capstone logistics","estes"];
  const consultingCos = ["prophet","danaher","superhuman","vanta","medallion","fractional"];
  if (industrialCos.some(n => c.includes(n)) || t.includes("territory") || t.includes("industrial") || t.includes("oem") || t.includes("field sales")) {
    return RESUME_BASE + "resume-industrial.html";
  }
  if (logisticsCos.some(n => c.includes(n)) || t.includes("logistics") || t.includes("supply chain") || t.includes("3pl") || t.includes("freight") || t.includes("carrier")) {
    return RESUME_BASE + "resume-logistics.html";
  }
  if (consultingCos.some(n => c.includes(n)) || t.includes("fractional") || t.includes("consulting") || t.includes("commercial transformation")) {
    return RESUME_BASE + "resume-consulting.html";
  }
  // Default: RevOps/GTM for everything else
  return RESUME_BASE + "resume-revops.html";
}

function getResumeBullets(company, title) {
  const t = (title || "").toLowerCase();
  if (t.includes("revops") || t.includes("revenue operations")) {
    return [
      "Built AI-driven RevOps infrastructure generating $15M+ qualified pipeline",
      "Implemented CRM workflows in HubSpot/Salesforce improving pipeline visibility and forecast accuracy",
      "Designed outbound automation sequences using Apollo.io and LinkedIn Sales Navigator",
      "Led cross-functional GTM alignment between sales, marketing, and customer success"
    ];
  }
  if (t.includes("account executive") || / ae[^a-z]/i.test(t) || t.endsWith(" ae")) {
    return [
      "Generated 3,700+ accounts and 1,000+ new customers through disciplined prospecting",
      "Built territory from 0 using AI-driven prospecting with Apollo.io and LinkedIn Sales Navigator",
      "Ran complex B2B deals across 15+ years with industrial and manufacturing buyers",
      "Leveraged AI outbound automation to generate 3x pipeline coverage against target accounts"
    ];
  }
  if (t.includes("sales operations") || t.includes("sales ops")) {
    return [
      "Owned full sales ops stack: CRM, forecasting, pipeline reviews, and activity reporting",
      "Reduced pipeline friction by redesigning CRM stage requirements and workflow automation",
      "Built automated reporting dashboards tracking key pipeline health and activity metrics",
      "Deployed AI sales research tools reducing rep prep time significantly"
    ];
  }
  if (t.includes("territory") || t.includes("regional") || t.includes("industrial") || t.includes("field")) {
    return [
      "Built $15M+ pipeline across industrial and manufacturing verticals through structured territory prospecting",
      "Generated 3,700+ accounts and 1,000+ customers through consultative field sales",
      "Managed complex multi-stakeholder B2B sales cycles with plant managers and procurement teams",
      "Brought AI-driven prospecting tools to industrial sales motion, identifying accounts competitors missed"
    ];
  }
  if (t.includes("director") || t.includes(" vp ") || t.startsWith("vp ") || t.includes("head of")) {
    return [
      "Built $15M+ pipeline engine using AI prospecting, LinkedIn automation, and outbound systems",
      "Redesigned full GTM motion from ICP definition through territory strategy and outreach execution",
      "Generated 3,700+ accounts and 1,000+ customers across industrial B2B markets over 15 years",
      "Led commercial development across manufacturing, industrial, and technology platform environments"
    ];
  }
  return [
    "Built $15M+ pipeline using AI-driven outbound systems and targeted account prospecting",
    "Expert in Apollo.io, LinkedIn Sales Navigator, HubSpot, Salesforce, and CRM automation",
    "Developed and deployed automated lead research and outreach workflows",
    "Track record: 3,700+ accounts developed, 1,000+ customers acquired across 15+ years"
  ];
}

function renderJobsBoard() {
  const container = document.getElementById("jobsBoard");
  if (!container) return;

  const appliedJobs = JSON.parse(localStorage.getItem(APPLIED_JOBS_KEY) || "{}");
  const bandOrder = { "tier-1": 0, "tier-2": 1, "tier-3": 2 };

  const allRoles = [];
  (window.DASHBOARD_DATA?.companies || []).forEach((company) => {
    (company.open_roles || []).forEach((role) => {
      allRoles.push({
        ...role,
        companyName: company.company,
        industry: company.industry || "",
        priority_band: company.priority_band || "tier-3",
        companyScore: company.score || 0
      });
    });
  });

  allRoles.sort((a, b) => {
    const bandDiff = (bandOrder[a.priority_band] ?? 9) - (bandOrder[b.priority_band] ?? 9);
    if (bandDiff !== 0) return bandDiff;
    return (b.score || 0) - (a.score || 0);
  });

  if (allRoles.length === 0) {
    container.innerHTML = '<p class="muted">No roles found in dashboard data.</p>';
    return;
  }

  const cards = allRoles.map((role) => {
    const jobKey = `${role.companyName}::${role.title}::${role.url}`;
    const isApplied = Boolean(appliedJobs[jobKey]);
    const bullets = getResumeBullets(role.companyName, role.title);
    const bulletsAttr = JSON.stringify(bullets).replace(/"/g, "&quot;");
    const tierLabel = role.priority_band === "tier-1" ? "★ Tier 1" : role.priority_band === "tier-2" ? "Tier 2" : "Tier 3";

    return `<div class="job-card${isApplied ? " is-applied" : ""}" data-job-key="${safeText(jobKey)}">
  <div class="job-card-header">
    <div class="job-card-meta">
      <span class="job-company">${safeText(role.companyName)}</span>
      <span class="industry-badge">${safeText(role.industry)}</span>
      <span class="tier-badge">${safeText(tierLabel)}</span>
    </div>
    <span class="job-status-pill ${isApplied ? "pill-applied" : "pill-new"}">${isApplied ? "Applied ✓" : "Not Started"}</span>
  </div>
  <div class="job-card-title">${safeText(role.title)}</div>
  <div class="job-card-actions">
    ${role.url ? `<a class="job-btn job-apply-btn" href="${safeText(role.url)}" target="_blank" rel="noreferrer">Apply →</a>` : ""}
    <button class="job-btn job-copy-btn" type="button" data-job-key="${safeText(jobKey)}" data-bullets="${bulletsAttr}">📋 Copy Bullets</button>
    <a class="job-btn job-resume-btn" href="${safeText(getResumeUrl(role.companyName, role.title))}" target="_blank" rel="noreferrer">📄 Resume</a>
    <button class="job-btn job-applied-btn${isApplied ? " is-done" : ""}" type="button" data-job-key="${safeText(jobKey)}">${isApplied ? "✓ Applied" : "✓ Mark Applied"}</button>
  </div>
</div>`;
  });

  container.innerHTML = cards.join("\n");
}
function renderAll() {
  renderJobsBoard();
  updateSummary();
  renderWorkspaceState();
  renderViewTabs();
  renderWorkflowHint();
  renderWhyThisWins();
  renderScoreboardStrip();
  renderActionDeck();
  renderHeroPreview();
  renderActionsToday();
  renderTodayCommandRail();
  renderJobJumpStrip();
  renderSelectedJobBanner();
  renderSpotlightCards();
  renderDailyBrief();
  renderManualJobsList();
  renderSavedCompanies();
  renderJobIntelligence();
  renderCompanyNarratives();
  renderOutreachSequences();
  renderResumeDraftExports();
  renderCoverLetterDrafts();
  renderDailyActionPackets();
  renderResumeRewriteLab();
  renderApplicationBoard();

  formatTable("signalsTable", hiringSignals, [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Score", render: (row) => `<span class="mini-chip">${safeText(row.signal_score ?? "")}</span>` },
    { label: "Signals", render: (row) => safeText((row.signals || []).join(", ")) },
    { label: "Action", render: (row) => `<span class="status-pill ${safeText(statusClass("researching"))}">${safeText(row.recommended_action || "")}</span>` },
    { label: "LinkedIn", render: (row) => `<a class="inline-link" href="${safeText(toPeopleLinkedInUrl(row.company, row.probable_hiring_manager || "VP Sales"))}" target="_blank" rel="noreferrer">Search</a>` }
  ]);

  formatTable("outreachTable", outreachTargets, [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Priority", render: (row) => `<span class="status-pill ${safeText(statusClass("outreach"))}">${safeText(row.outreach_priority || "")}</span>` },
    { label: "Score", render: (row) => `<span class="mini-chip">${safeText(row.score ?? "")}</span>` },
    { label: "Action", render: (row) => safeText(row.suggested_action || "") },
    { label: "Website", render: (row) => row.website ? `<a class="inline-link" href="${safeText(row.website)}" target="_blank" rel="noreferrer">Open</a>` : "" }
  ]);

  formatTable("managerQueueTable", managerQueue, [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Target Title", render: (row) => safeText(row.target_title || "") },
    { label: "Likely Manager", render: (row) => safeText(row.probable_hiring_manager || "") },
    { label: "Manual Search", render: (row) => row.manual_search_url ? `<a class="inline-link" href="${safeText(row.manual_search_url)}" target="_blank" rel="noreferrer">Open Search</a>` : "" }
  ]);

  formatTable("sourceHealthTable", sourceHealth, [
    { label: "Source", render: (row) => `<strong>${safeText(row.name || "")}</strong>` },
    { label: "Type", render: (row) => safeText(row.type || "") },
    { label: "Status", render: (row) => `<span class="status-pill ${safeText(row.status === "ok" ? statusClass("applied") : statusClass("not-started"))}">${safeText(row.status || "")}</span>` },
    { label: "Details", render: (row) => safeText(row.details || "") }
  ]);

  formatTable("companiesTable", topTargets?.topCompanies || [], [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Industry", render: (row) => safeText(row.industry || "") },
    { label: "Score", render: (row) => `<span class="mini-chip">${safeText(row.score ?? "")}</span>` },
    { label: "Signal", render: (row) => safeText(row.hiring_signal || "") },
    { label: "Website", render: (row) => row.website ? `<a class="inline-link" href="${safeText(row.website)}" target="_blank" rel="noreferrer">Website</a>` : "" },
    { label: "LinkedIn", render: (row) => `<a class="inline-link" href="${safeText(toCompanyLinkedInUrl(row.company || ""))}" target="_blank" rel="noreferrer">LinkedIn</a>` }
  ]);

  formatTable("jobsTable", topTargets?.topJobs || [], [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Role", render: (row) => row.url ? `<a class="inline-link" href="${safeText(row.url)}" target="_blank" rel="noreferrer">${safeText(row.title || "")}</a>` : safeText(row.title || "") },
    { label: "Location", render: (row) => safeText(row.location || "") },
    { label: "Salary", render: (row) => safeText(row.salary_text || "") },
    { label: "Source", render: (row) => safeText(row.source_label || sourceLabelFromUrl(row.url)) },
    { label: "Posted", render: (row) => safeText(row.recency_label || "") },
    { label: "Trend", render: (row) => safeText(row.trend_label || row.freshness || "") },
    { label: "Confidence", render: (row) => safeText(row.source_confidence || "") },
    { label: "Score", render: (row) => `<span class="mini-chip">${safeText(row.score ?? "")}</span>` },
    { label: "Resume Fix", render: (row) => safeText((row.resume_angle || [])[0] || "") },
    { label: "Win", render: (row) => safeText(row.top_win || "") }
  ]);

  formatTable("storybrandTable", storybrandAnalysis, [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Score", render: (row) => `<span class="mini-chip">${safeText(row.score_label || "")}</span>` },
    { label: "Site Summary", render: (row) => safeText(row.site_summary || "") },
    { label: "Messaging Gap", render: (row) => safeText(row.messaging_gap || "") },
    { label: "Outreach Angle", render: (row) => safeText(row.suggested_outreach_angle || "") }
  ]);

  formatTable("firecrawlTable", firecrawlStatus, [
    { label: "Company", render: (row) => `<strong>${safeText(row.company || "")}</strong>` },
    { label: "Status", render: (row) => `<span class="status-pill">${safeText(row.status || "")}</span>` },
    { label: "Output", render: (row) => safeText(row.output || "") },
    { label: "Notes", render: (row) => safeText(row.stderr || row.stdout || "") }
  ]);

  renderResumeAngles();
  renderResumeFixes();
  renderOutreachDrafts();
  renderPipelineStatus();
  renderNotes();
}

async function loadData() {
  if (window.DASHBOARD_DATA) {
    customJobs = loadCustomJobs();
    companies = window.DASHBOARD_DATA.companies || [];
    topTargets = window.DASHBOARD_DATA.topTargets || { topJobs: [], topCompanies: [] };
    hiringSignals = window.DASHBOARD_DATA.hiringSignals || [];
    outreachTargets = window.DASHBOARD_DATA.outreachTargets || [];
    managerQueue = window.DASHBOARD_DATA.managerQueue || [];
    sourceHealth = window.DASHBOARD_DATA.sourceHealth || [];
    storybrandAnalysis = window.DASHBOARD_DATA.storybrandAnalysis || [];
    firecrawlStatus = window.DASHBOARD_DATA.firecrawlStatus || [];
    outreachDrafts = window.DASHBOARD_DATA.outreachDrafts || [];
    actionsToday = window.DASHBOARD_DATA.actionsToday || [];
    mergeCustomJobsIntoTopTargets();
    applySavedNotes();
    renderAll();
    return;
  }

  const responses = await Promise.all([
    fetch("data/daily_companies.json", { cache: "no-store" }),
    fetch("data/top_targets_today.json", { cache: "no-store" }).catch(() => null),
    fetch("data/hiring_signals.json", { cache: "no-store" }).catch(() => null),
    fetch("data/daily_outreach_targets.json", { cache: "no-store" }).catch(() => null),
    fetch("data/hiring_manager_queue.json", { cache: "no-store" }).catch(() => null),
    fetch("data/source_health.json", { cache: "no-store" }).catch(() => null),
    fetch("data/storybrand_analysis.json", { cache: "no-store" }).catch(() => null),
    fetch("data/firecrawl_status.json", { cache: "no-store" }).catch(() => null),
    fetch("data/outreach_drafts.json", { cache: "no-store" }).catch(() => null),
    fetch("data/actions_today.json", { cache: "no-store" }).catch(() => null)
  ]);

  companies = await responses[0].json();
  topTargets = responses[1] && responses[1].ok ? await responses[1].json() : { topJobs: [], topCompanies: [] };
  hiringSignals = responses[2] && responses[2].ok ? await responses[2].json() : [];
  outreachTargets = responses[3] && responses[3].ok ? await responses[3].json() : [];
  managerQueue = responses[4] && responses[4].ok ? await responses[4].json() : [];
  sourceHealth = responses[5] && responses[5].ok ? await responses[5].json() : [];
  storybrandAnalysis = responses[6] && responses[6].ok ? await responses[6].json() : [];
  firecrawlStatus = responses[7] && responses[7].ok ? await responses[7].json() : [];
  outreachDrafts = responses[8] && responses[8].ok ? await responses[8].json() : [];
  actionsToday = responses[9] && responses[9].ok ? await responses[9].json() : [];
  customJobs = loadCustomJobs();
  mergeCustomJobsIntoTopTargets();

  applySavedNotes();
  renderAll();
}

document.getElementById("refreshBtn").addEventListener("click", loadData);
document.getElementById("addManualJobBtn")?.addEventListener("click", () => {
  const company = document.getElementById("manualJobCompany")?.value.trim();
  const title = document.getElementById("manualJobTitle")?.value.trim();
  const url = document.getElementById("manualJobUrl")?.value.trim();
  const location = document.getElementById("manualJobLocation")?.value.trim();
  const salary = document.getElementById("manualJobSalary")?.value.trim();

  if (!company || !title) {
    alert("Add at least a company and role title.");
    return;
  }

  const record = buildManualJobRecord({ company, title, url, location, salary });
  if (manualJobEditIndex !== null && customJobs[manualJobEditIndex]) {
    customJobs[manualJobEditIndex] = record;
  } else {
    customJobs.unshift(record);
  }
  persistCustomJobs();
  mergeCustomJobsIntoTopTargets();
  resetManualJobForm();
  renderAll();
});
document.getElementById("cancelManualJobEditBtn")?.addEventListener("click", () => {
  resetManualJobForm();
});
document.getElementById("saveBtn").addEventListener("click", () => {
  persistNotes();
  alert("Notes saved locally.");
});
document.getElementById("exportBtn").addEventListener("click", () => {
  persistNotes();
  const blob = new Blob([JSON.stringify(companies, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "careeros-dashboard-snapshot.json";
  link.click();
  URL.revokeObjectURL(url);
});
document.getElementById("importBtn").addEventListener("click", () => {
  document.getElementById("importFile").click();
});
document.getElementById("saveWorkspaceBtn")?.addEventListener("click", async () => {
  persistNotes();
  if ("showSaveFilePicker" in window) {
    try {
      workspaceFileHandle = await window.showSaveFilePicker({
        suggestedName: "careeros-workspace.json",
        types: [{ description: "JSON Files", accept: { "application/json": [".json"] } }]
      });
      await saveWorkspaceToHandle(workspaceFileHandle);
      lastSavedAt = new Date().toISOString();
      renderWorkspaceState();
      alert("Workspace file saved.");
      return;
    } catch (error) {
      if (error?.name !== "AbortError") {
        alert("Could not save workspace file directly. Falling back to download.");
      }
    }
  }

  const payload = JSON.stringify(buildWorkspacePayload(), null, 2);
  const blob = new Blob([payload], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "careeros-workspace.json";
  link.click();
  URL.revokeObjectURL(url);
});
document.getElementById("quickSaveWorkspaceBtn")?.addEventListener("click", async () => {
  persistNotes();
  if (!workspaceFileHandle) {
    alert("Load or save a workspace file once first, then Quick Save will reuse that file.");
    return;
  }

  try {
    await saveWorkspaceToHandle(workspaceFileHandle);
    lastSavedAt = new Date().toISOString();
    renderWorkspaceState();
    alert("Workspace file updated.");
  } catch (error) {
    alert("Could not quick save the workspace file.");
  }
});
document.getElementById("loadWorkspaceBtn")?.addEventListener("click", async () => {
  if ("showOpenFilePicker" in window) {
    try {
      const [handle] = await window.showOpenFilePicker({
        types: [{ description: "JSON Files", accept: { "application/json": [".json"] } }],
        multiple: false
      });
      workspaceFileHandle = handle;
      const file = await handle.getFile();
      const text = await file.text();
      applyWorkspacePayload(JSON.parse(text));
      renderWorkspaceState();
      alert("Workspace file loaded.");
      return;
    } catch (error) {
      if (error?.name !== "AbortError") {
        alert("Could not load workspace file directly. Falling back to file picker.");
      }
    }
  }

  document.getElementById("loadWorkspaceFile")?.click();
});
document.getElementById("exportStateBtn")?.addEventListener("click", () => {
  persistNotes();
  const payload = {
    exportedAt: new Date().toISOString(),
    state: buildStateSnapshot()
  };
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "careeros-company-state.json";
  link.click();
  URL.revokeObjectURL(url);
});
document.getElementById("importStateBtn")?.addEventListener("click", () => {
  document.getElementById("importStateFile").click();
});
document.getElementById("importFile").addEventListener("change", async (event) => {
  const [file] = event.target.files;
  if (!file) return;
  const text = await file.text();
  companies = JSON.parse(text);
  persistNotes();
  renderAll();
});
document.getElementById("importStateFile")?.addEventListener("change", async (event) => {
  const [file] = event.target.files;
  if (!file) return;
  const text = await file.text();
  const payload = JSON.parse(text);
  const imported = payload.state || payload;
  companies = companies.map((company) => {
    const state = imported[companyKey(company)];
    return state ? { ...company, ...state } : company;
  });
  persistNotes();
  renderAll();
});
document.getElementById("loadWorkspaceFile")?.addEventListener("change", async (event) => {
  const [file] = event.target.files;
  if (!file) return;
  const text = await file.text();
  applyWorkspacePayload(JSON.parse(text));
});
document.getElementById("focusModeBtn")?.addEventListener("click", () => {
  isTodayMode = !isTodayMode;
  renderWorkspaceState();
});
document.getElementById("viewTabs")?.addEventListener("click", (event) => {
  const tab = event.target.closest(".view-tab");
  if (!tab) return;
  currentView = tab.dataset.view || "overview";
  renderAll();
});
document.getElementById("savePdfBtn")?.addEventListener("click", () => {
  window.print();
});
document.getElementById("copyHostedUrlBtn")?.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(HOSTED_DASHBOARD_URL);
    alert("Hosted URL copied.");
  } catch (error) {
    alert(HOSTED_DASHBOARD_URL);
  }
});
document.getElementById("searchBox").addEventListener("input", renderAll);
document.getElementById("statusFilter").addEventListener("change", renderAll);
document.getElementById("sortBy").addEventListener("change", renderAll);
document.addEventListener("change", (event) => {
  const select = event.target.closest(".spotlight-status");
  if (!select) return;
  const company = companies.find((item) => companyKey(item) === select.dataset.company);
  if (!company) return;
  company.status = select.value;
  persistNotes();
  renderAll();
});
document.addEventListener("click", async (event) => {
  const moveManualJobButton = event.target.closest(".move-manual-job-btn");
  if (moveManualJobButton) {
    const index = Number(moveManualJobButton.dataset.index);
    const direction = moveManualJobButton.dataset.direction;
    const swapIndex = direction === "up" ? index - 1 : index + 1;
    if (customJobs[swapIndex]) {
      [customJobs[index], customJobs[swapIndex]] = [customJobs[swapIndex], customJobs[index]];
      persistCustomJobs();
      mergeCustomJobsIntoTopTargets();
      renderAll();
    }
    return;
  }
  const editManualJobButton = event.target.closest(".edit-manual-job-btn");
  if (editManualJobButton) {
    startManualJobEdit(Number(editManualJobButton.dataset.index));
    return;
  }
  const removeManualJobButton = event.target.closest(".remove-manual-job-btn");
  if (removeManualJobButton) {
    customJobs.splice(Number(removeManualJobButton.dataset.index), 1);
    persistCustomJobs();
    mergeCustomJobsIntoTopTargets();
    if (manualJobEditIndex !== null && manualJobEditIndex === Number(removeManualJobButton.dataset.index)) {
      resetManualJobForm();
    }
    renderAll();
    return;
  }

  const button = event.target.closest(".copy-btn");
  if (!button) return;
  const text = button.getAttribute("data-copy") || "";
  try {
    await navigator.clipboard.writeText(text);
    button.textContent = "Copied";
    setTimeout(() => {
      button.textContent = button.getAttribute("data-label") || "Copy";
    }, 1200);
  } catch (error) {
    alert("Could not copy to clipboard.");
  }
});
document.addEventListener("click", (event) => {
  const exportButton = event.target.closest(".export-resume-btn, .export-text-btn");
  if (!exportButton) return;

  const text = exportButton.getAttribute("data-content") || "";
  const filename = exportButton.getAttribute("data-filename") || "resume-draft.txt";
  const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
});
document.addEventListener("click", (event) => {
  const pdfButton = event.target.closest(".export-resume-mode-btn");
  if (!pdfButton) return;

  const companyName = pdfButton.getAttribute("data-company") || "";
  const title = pdfButton.getAttribute("data-title") || "";
  const mode = pdfButton.getAttribute("data-mode") || "ats-pdf";
  const job = (topTargets?.topJobs || []).find((item) => item.company === companyName && item.title === title);
  if (!job) return;
  const company = companies.find((item) => companyKey(item) === companyName) || {};
  const story = findStorybrand(companyName) || {};

  if (mode === "ats-text") {
    const text = buildAtsResumeText(job, company, story);
    const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `${slugify(companyName)}-${slugify(title)}-ats-resume.txt`;
    link.click();
    URL.revokeObjectURL(url);
    return;
  }

  if (mode === "best-resume-pdf") {
    const html = buildBestResumeHtml(job, company, story);
    const printWindow = window.open("", "_blank", "width=960,height=720");
    if (!printWindow) {
      const text = buildBestResumeText(job, company, story);
      const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = `${slugify(companyName)}-${slugify(title)}-best-resume.txt`;
      link.click();
      URL.revokeObjectURL(url);
      return;
    }
    printWindow.document.open();
    printWindow.document.write(html);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => {
      printWindow.print();
    }, 250);
    return;
  }

  if (mode === "full-tailored-pdf") {
    const html = buildFullTailoredResumeHtml(job, company, story);
    const printWindow = window.open("", "_blank", "width=980,height=760");
    if (!printWindow) {
      alert("Pop-up blocked. Allow pop-ups to save the full tailored resume PDF.");
      return;
    }
    printWindow.document.open();
    printWindow.document.write(html);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => {
      printWindow.print();
    }, 250);
    return;
  }

  const html = buildResumeModeHtml(job, company, story, mode === "recruiter-pdf" ? "recruiter" : "ats");
  const printWindow = window.open("", "_blank", "width=960,height=720");
  if (!printWindow) {
    alert("Pop-up blocked. Allow pop-ups to save the resume PDF.");
    return;
  }
  printWindow.document.open();
  printWindow.document.write(html);
  printWindow.document.close();
  printWindow.focus();
  setTimeout(() => {
    printWindow.print();
  }, 250);
});
document.addEventListener("click", (event) => {
  const packetButton = event.target.closest(".export-company-packet-btn");
  const coverButton = event.target.closest(".export-company-cover-btn");
  const companyName = packetButton?.dataset.company || coverButton?.dataset.company;
  if (!companyName) return;

  const target = (topTargets?.topCompanies || []).find((item) => item.company === companyName) || {};
  const job = findTopJobForCompany(companyName);
  const story = findStorybrand(companyName) || {};
  const draft = outreachDrafts.find((item) => item.company === companyName) || {};
  const manager = findManager(companyName) || {};

  const packet = `CareerOS Company Packet\n\nCompany: ${companyName}\nIndustry: ${target.industry || ""}\nWebsite: ${target.website || ""}\n\nBest role:\n${job ? `${job.title} | Score ${job.score}` : "No linked role yet"}\n\nResume angle:\n${job ? (job.resume_angle || []).join(" ") : ""}\n\nMessaging gap:\n${story.messaging_gap || ""}\n\nLikely manager:\n${manager.probable_hiring_manager || ""}\n\nOutreach angle:\n${draft.outreach_angle || draft.subject || ""}\n`;
  const cover = `Dear Hiring Team,\n\nI am reaching out because ${companyName} appears to be at the point where stronger revenue visibility, targeting discipline, and GTM execution can create immediate leverage.\n\nMy background spans revenue operations, business development, CRM workflow design, and AI-assisted prospect intelligence across industrial and GTM-heavy environments. ${job?.top_win || "I build the systems that help commercial teams execute more clearly and consistently."}\n\nWhat especially stands out to me is ${story.messaging_gap || target.revops_maturity_gap || "the opportunity to strengthen pipeline discipline and commercial clarity as the organization grows"}.\n\nI would welcome a short conversation.\n\nTony Beal`;

  const content = packetButton ? packet : cover;
  const filename = packetButton
    ? `${slugify(companyName)}-company-packet.txt`
    : `${slugify(companyName)}-cover-letter.txt`;
  const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
});
document.addEventListener("click", (event) => {
  const packetButton = event.target.closest(".export-application-packet-btn");
  if (!packetButton) return;

  const companyName = packetButton.getAttribute("data-company") || "";
  const title = packetButton.getAttribute("data-title") || "";
  const job = (topTargets?.topJobs || []).find((item) => item.company === companyName && item.title === title);
  if (!job) return;
  const company = companies.find((item) => companyKey(item) === companyName) || {};
  const story = findStorybrand(companyName) || {};
  const draft = outreachDrafts.find((item) => item.company === companyName) || {};
  const manager = findManager(companyName) || {};

  const html = buildApplicationPacketHtml(job, company, story, draft, manager);
  const text = buildApplicationPacketText(job, company, story, draft, manager);
  const printWindow = window.open("", "_blank", "width=980,height=760");
  if (!printWindow) {
    const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `${slugify(companyName)}-${slugify(title)}-application-packet.txt`;
    link.click();
    URL.revokeObjectURL(url);
    return;
  }
  printWindow.document.open();
  printWindow.document.write(html);
  printWindow.document.close();
  printWindow.focus();
  setTimeout(() => {
    printWindow.print();
  }, 250);
});
document.addEventListener("click", (event) => {
  const selectJobButton = event.target.closest(".select-job-btn");
  if (selectJobButton) {
    selectedJobKey = `${selectJobButton.dataset.company || ""}::${selectJobButton.dataset.title || ""}`;
    renderAll();
    document.getElementById("assetsSection")?.scrollIntoView({ behavior: "smooth", block: "start" });
    return;
  }
  const clearSelectedJobButton = event.target.closest(".clear-selected-job-btn");
  if (clearSelectedJobButton) {
    selectedJobKey = "";
    renderAll();
    return;
  }
  const saveButton = event.target.closest(".save-company-btn");
  if (saveButton) {
    const company = companies.find((item) => companyKey(item) === saveButton.dataset.company);
    if (!company) return;
    company.saved = !company.saved;
    persistNotes();
    renderAll();
    return;
  }

  const jumpButton = event.target.closest(".jump-note-btn");
  const quickStatusButton = event.target.closest(".quick-status-btn");
  if (quickStatusButton) {
    setCompanyStatus(quickStatusButton.dataset.company, quickStatusButton.dataset.status);
    return;
  }
  if (!jumpButton) return;
  const notesSection = document.getElementById("notes");
  notesSection.scrollIntoView({ behavior: "smooth", block: "start" });
  const target = notesSection.querySelector(`textarea[data-company="${CSS.escape(jumpButton.dataset.company)}"]`);
  if (target) target.focus();
});


// Jobs board: Copy Resume Bullets
document.addEventListener("click", async (event) => {
  const copyBtn = event.target.closest(".job-copy-btn");
  if (!copyBtn) return;
  const bullets = JSON.parse(copyBtn.dataset.bullets || "[]");
  try {
    await navigator.clipboard.writeText(bullets.join("\n"));
    const original = copyBtn.textContent;
    copyBtn.textContent = "Copied!";
    copyBtn.classList.add("is-copied");
    setTimeout(() => {
      copyBtn.textContent = original;
      copyBtn.classList.remove("is-copied");
    }, 2000);
  } catch (err) {
    alert(bullets.join("\n"));
  }
});

// Jobs board: Mark Applied
document.addEventListener("click", (event) => {
  const applyBtn = event.target.closest(".job-applied-btn");
  if (!applyBtn) return;
  const jobKey = applyBtn.dataset.jobKey;
  if (!jobKey) return;
  const appliedJobs = JSON.parse(localStorage.getItem(APPLIED_JOBS_KEY) || "{}");
  appliedJobs[jobKey] = !appliedJobs[jobKey];
  if (!appliedJobs[jobKey]) delete appliedJobs[jobKey];
  localStorage.setItem(APPLIED_JOBS_KEY, JSON.stringify(appliedJobs));
  const card = applyBtn.closest(".job-card");
  const isApplied = Boolean(appliedJobs[jobKey]);
  if (card) {
    card.classList.toggle("is-applied", isApplied);
    const pill = card.querySelector(".job-status-pill");
    if (pill) {
      pill.textContent = isApplied ? "Applied ✓" : "Not Started";
      pill.className = "job-status-pill " + (isApplied ? "pill-applied" : "pill-new");
    }
  }
  applyBtn.textContent = isApplied ? "✓ Applied" : "✓ Mark Applied";
  applyBtn.classList.toggle("is-done", isApplied);
  updateSummary();
});
loadData().catch((error) => {
  document.body.innerHTML = `<div class="panel" style="margin:20px"><h2>CareerOS Command Center</h2><p class="muted">Could not load dashboard data: ${safeText(error.message)}</p></div>`;
});