/* ============================================================
   components.jsx — shared low-fi wireframe primitives
   ============================================================ */

// placeholder image / video box (the classic wireframe "X")
function Ph({ label = "IMAGE", play = false, style, className = "" }) {
  return (
    <div className={"ph " + (play ? "play " : "") + className} style={style}>
      <span className="ph-label">
        {play && <span className="play-tri" />}
        {label}
      </span>
    </div>
  );
}

// skeleton body-text lines
function Lines({ n = 3, style }) {
  return (
    <div className="lines" style={style}>
      {Array.from({ length: n }).map((_, i) => <i key={i} />)}
    </div>
  );
}

// handwritten margin annotation ("designer note")
function Anno({ children, flip = false, style }) {
  return <span className={"anno" + (flip ? " flip" : "")} style={style}>{children}</span>;
}

// section header: kicker + big title + optional lede
function SectionHead({ kicker, title, lede, anno, annoFlip, style }) {
  return (
    <div style={{ marginBottom: 28, ...style }}>
      {kicker && <div className="kicker" style={{ marginBottom: 10 }}>{kicker}</div>}
      <div className="row center wrapw" style={{ gap: 14, alignItems: "center" }}>
        <h2 className="disp" style={{ fontSize: "clamp(34px, 5vw, 52px)", lineHeight: 1.12, paddingBottom: 2, flex: "1 1 280px" }}>{title}</h2>
        {anno && <Anno flip={annoFlip}>{anno}</Anno>}
      </div>
      {lede && <p style={{ fontSize: 19, maxWidth: 640, marginTop: 16 }}>{lede}</p>}
    </div>
  );
}

// big stat block
function Stat({ big, label, note }) {
  return (
    <div className="wbox" style={{ padding: "22px 22px 18px", flex: 1, minWidth: 180 }}>
      {note && <div className="kicker" style={{ marginBottom: 6 }}>{note}</div>}
      <div className="disp" style={{ fontSize: "clamp(40px, 6vw, 62px)", color: "var(--ink)", lineHeight: .9 }}>{big}</div>
      <p style={{ fontSize: 16, marginTop: 8 }}>{label}</p>
    </div>
  );
}

// agency chip
function AgencyPill({ k, children, style }) {
  const a = window.AGENCIES[k];
  return <span className={"pill " + a.cls} style={style}>{children || a.short}</span>;
}

// horizontal fit bar (used by quiz results "bars" mode)
function FitBar({ k, pct, rank }) {
  const a = window.AGENCIES[k];
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 14, marginBottom: 9 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "baseline", minWidth: 0 }}>
          <span className="disp" style={{ fontSize: 26, color: "var(--ink-3)", flexShrink: 0 }}>{rank}</span>
          <span style={{ minWidth: 0 }}>
            <strong style={{ fontSize: 19, lineHeight: 1.15 }}>{a.name}</strong>
            <span className="muted" style={{ fontSize: 14, display: "block" }}>{a.role}</span>
          </span>
        </div>
        <span className="disp" style={{ fontSize: 32, flexShrink: 0 }}>{pct}%</span>
      </div>
      <div style={{ height: 18, border: "2.5px solid var(--line)", borderRadius: 999, background: "var(--paper)", overflow: "hidden", position: "relative" }}>
        <div style={{ width: pct + "%", height: "100%", background: a.color, transition: "width .7s cubic-bezier(.2,.8,.2,1)" }} />
      </div>
    </div>
  );
}

Object.assign(window, { Ph, Lines, Anno, SectionHead, Stat, AgencyPill, FitBar });