// ============================================================
//  Shared primitives — icons, logo lockup, status badges
//  Lucide-style stroke icons (24px grid, currentColor)
// ============================================================

const Icon = ({ d, size = 22, sw = 1.9, fill = "none", children, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
    stroke="currentColor" strokeWidth={sw} strokeLinecap="round"
    strokeLinejoin="round" style={{ display: "block", ...style }}>
    {d ? <path d={d} /> : children}
  </svg>
);

const Icons = {
  sun:    (p) => <Icon {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></Icon>,
  moon:   (p) => <Icon {...p} d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />,
  search: (p) => <Icon {...p}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></Icon>,
  chevDown:(p) => <Icon {...p} d="m6 9 6 6 6-6" />,
  camera: (p) => <Icon {...p}><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4l-1.5-2Z" /><circle cx="12" cy="13" r="3.5" /></Icon>,
  upload: (p) => <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M7 9l5-5 5 5" /><path d="M12 4v12" /></Icon>,
  pin:    (p) => <Icon {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></Icon>,
  check:  (p) => <Icon {...p} d="M20 6 9 17l-5-5" />,
  x:      (p) => <Icon {...p} d="M18 6 6 18M6 6l12 12" />,
  refresh:(p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 21v-5h5" /></Icon>,
  edit:   (p) => <Icon {...p}><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" /></Icon>,
  eye:    (p) => <Icon {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></Icon>,
  bell:   (p) => <Icon {...p}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></Icon>,
  filter: (p) => <Icon {...p} d="M22 3H2l8 9.5V19l4 2v-8.5L22 3z" />,
  send:   (p) => <Icon {...p}><path d="M22 2 11 13" /><path d="M22 2 15 22l-4-9-9-4 20-7Z" /></Icon>,
  arrowR: (p) => <Icon {...p}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></Icon>,
  layers: (p) => <Icon {...p}><path d="m12 2 9 5-9 5-9-5 9-5Z" /><path d="m3 12 9 5 9-5" /><path d="m3 17 9 5 9-5" /></Icon>,
  user:   (p) => <Icon {...p}><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>,
  trash:  (p) => <Icon {...p}><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M6 6v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6" /></Icon>,
  facebook:(p) => <Icon {...p} d="M15 3h-2.5A3.5 3.5 0 0 0 9 6.5V9H6.5v3H9v9h3v-9h2.5l.5-3H12V6.8c0-.6.4-.8.9-.8H15V3Z" />,
  xLogo:  (p) => <Icon {...p}><path d="M4 4l16 16M20 4 4 20" /></Icon>,
  instagram:(p) => <Icon {...p}><rect x="3.5" y="3.5" width="17" height="17" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" /></Icon>,
  youtube:(p) => <Icon {...p}><rect x="2.5" y="6" width="19" height="12" rx="3.5" /><path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" /></Icon>,
  globe:  (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" /></Icon>,
  home:   (p) => <Icon {...p}><path d="M3 10.6 12 3.5l9 7.1" /><path d="M5.6 9.3V20a1 1 0 0 0 1 1H10v-6h4v6h3.4a1 1 0 0 0 1-1V9.3" /></Icon>,
  plus:   (p) => <Icon {...p} d="M12 5v14M5 12h14" />,
  news:   (p) => <Icon {...p}><rect x="3" y="4.5" width="18" height="15" rx="2" /><path d="M7 9h10M7 13h10M7 16.5h6" /></Icon>,
  chevR:  (p) => <Icon {...p} d="m9 6 6 6-6 6" />,
  bookmark:(p) => <Icon {...p} d="M6 3h12a1 1 0 0 1 1 1v17l-7-4.2L5 21V4a1 1 0 0 1 1-1Z" />,
  sliders:(p) => <Icon {...p}><path d="M4 7h9M19 7h1M4 17h1M11 17h9" /><circle cx="16" cy="7" r="2.2" /><circle cx="8" cy="17" r="2.2" /></Icon>,
  help:   (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M9.3 9.2a2.8 2.8 0 0 1 5.4 1c0 1.8-2.7 2.1-2.7 4" /><circle cx="12" cy="17.4" r="0.55" fill="currentColor" /></Icon>,
};

// ---------- Nambikkai logo lockup ----------
function Logo({ height = 44, stacked = false, sub = true }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <img src={window.__resources?.logo || "assets/logo.png"} alt="Nambikkai"
        style={{ height, width: "auto", display: "block" }} />
      {sub && (
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "var(--ff-brand)", fontWeight: 800,
            fontSize: height * 0.5, color: "inherit", letterSpacing: "-0.02em" }}>
            Ground News
          </span>
          <span style={{ fontFamily: "var(--ff-ui)", fontSize: height * 0.27,
            opacity: 0.65, letterSpacing: "0.02em", marginTop: 2 }}>
            v1.0 · ground intelligence
          </span>
        </div>
      )}
    </div>
  );
}

// ---------- Status badge ----------
const STATUS = {
  DRAFT:          { c: "var(--st-draft)",   fill: false },
  "UNDER REVIEW": { c: "var(--st-review)",  fill: true  },
  APPROVED:       { c: "var(--st-approve)", fill: true  },
  HELD:           { c: "var(--st-held)",    fill: true  },
  REJECTED:       { c: "var(--red)",        fill: true  },
  PENDING:        { c: "var(--st-review)",  fill: false },
  FLAGGED:        { c: "var(--red)",        fill: false },
  "CHANGES REQ.": { c: "var(--st-review)",  fill: true  },
};

function Badge({ status, size = "md" }) {
  const s = STATUS[status] || STATUS.DRAFT;
  const pad = size === "sm" ? "2px 9px" : "2px 10px";
  const fs = size === "sm" ? 11.5 : 12;
  return (
    <span style={{
      fontFamily: "var(--ff-ui)", fontSize: fs, fontWeight: 600,
      letterSpacing: "0.03em", textTransform: "uppercase",
      padding: pad, borderRadius: 7, whiteSpace: "nowrap",
      lineHeight: 1.5,
      color: s.fill ? "#fff" : s.c,
      background: s.fill ? s.c : `color-mix(in srgb, ${s.c} 14%, transparent)`,
      border: `1px solid ${s.fill ? s.c : `color-mix(in srgb, ${s.c} 55%, transparent)`}`,
    }}>{status}</span>
  );
}

// ---------- Category pill ----------
function Pill({ children, active, onClick, mono = true }) {
  return (
    <button onClick={onClick} style={{
      fontFamily: mono ? "var(--ff-mono)" : "var(--ff-ui)",
      fontSize: 12.5, fontWeight: 500, letterSpacing: "0.01em",
      padding: "5px 12px", borderRadius: 8, whiteSpace: "nowrap",
      transition: "all .15s ease",
      color: active ? "#fff" : "var(--text)",
      background: active ? "var(--blue)" : "var(--bg-card)",
      border: `1px solid ${active ? "var(--blue)" : "var(--border-2)"}`,
      boxShadow: active ? "0 2px 8px rgba(0,68,187,0.22)" : "none",
    }}>{children}</button>
  );
}

Object.assign(window, { Icon, Icons, Logo, Badge, Pill, STATUS });