export function eyebrow(text) {
  const root = document.createElement("div");
  root.className = "eyebrow";
  const tick = document.createElement("span");
  tick.className = "tick";
  tick.textContent = "◆";
  const label = document.createElement("span");
  label.textContent = text;
  root.append(tick, label);
  return root;
}

export function sectionCard({ eyebrow: eyebrowText, id } = {}) {
  const root = document.createElement("section");
  root.className = "card";
  if (id) root.id = id;
  if (eyebrowText) root.append(eyebrow(eyebrowText));
  return root;
}

export function previewBanner({ title = "Research preview", text }) {
  const root = document.createElement("div");
  root.className = "preview-banner";
  root.setAttribute("role", "note");
  const strong = document.createElement("strong");
  strong.textContent = title;
  const span = document.createElement("span");
  span.textContent = text;
  root.append(strong, span);
  return root;
}

export function hero({ eyebrow: eyebrowText = "Desert Ant Labs · on-device models", name, lead, accent }) {
  const root = sectionCard({ eyebrow: eyebrowText });
  const heading = document.createElement("h1");
  heading.className = "display";
  heading.append(document.createTextNode(name));
  const dot = document.createElement("span");
  dot.className = "dot";
  dot.textContent = ".";
  heading.append(dot);
  root.append(heading);
  if (lead || accent) {
    const p = document.createElement("p");
    p.className = "lead";
    if (lead) p.append(document.createTextNode(accent ? `${lead} ` : lead));
    if (accent) {
      const mark = document.createElement("span");
      mark.className = "accent";
      mark.textContent = accent;
      p.append(mark);
    }
    root.append(p);
  }
  return root;
}

export function brandFooter({ note = `Runs local · ${new Date().getFullYear()}` } = {}) {
  const root = document.createElement("div");
  root.className = "brand-footer";
  const left = document.createElement("span");
  left.textContent = "Desert Ant Labs";
  const right = document.createElement("span");
  right.textContent = note;
  root.append(left, right);
  return root;
}