// Shared helpers for the ValueHuman website UI kit.
// Loaded first so other JSX files can reference these.

// Pillar config — keep ordered so the diagram renders predictably.
const PILLARS = [
  { code: "PFL",   name: "ProFamily Life",    short: "Life",    emoji: "🏠", color: "var(--pfl-color)",   tint: "var(--pfl-tint)",   blurb: "Schedule, meals, reminders, home, documents.", status: "In progress" },
  { code: "PFK",   name: "ProFamily Kids",    short: "Kids",    emoji: "🎒", color: "var(--pfk-color)",   tint: "var(--pfk-tint)",   blurb: "School, growth, activities, college planning. Includes LetsPlay.",  status: "Planned", sub: [{ name: "LetsPlay", url: "https://lets-play-nine.vercel.app/", launched: true }] },
  { code: "PFC",   name: "ProFamily Career",  short: "Career",  emoji: "💼", color: "var(--pfc-color)",   tint: "var(--pfc-tint)",   blurb: "Goals, learning, certifications. Includes Executive Signal.", status: "Planned", sub: [{ name: "Executive Signal", url: "https://www.mycareersignal.com/", launched: true }] },
  { code: "PFM",   name: "ProFamily Money",   short: "Money",   emoji: "💰", color: "var(--pfm-color)",   tint: "var(--pfm-tint)",   blurb: "Budget, bills, savings, wealth, retirement.",    status: "Planned" },
  { code: "PFMem", name: "ProFamily Memory",  short: "Memory",  emoji: "🧠", color: "var(--pfmem-color)", tint: "var(--pfmem-tint)", blurb: "The shared intelligence layer underneath everything.", status: "In progress" },
];

const STATUS_STYLES = {
  "Launched":    { fg: "var(--vh-success)", bg: "rgba(31,138,91,0.12)" },
  "In progress": { fg: "#9C6F12",            bg: "rgba(224,162,58,0.14)" },
  "Planned":     { fg: "var(--fg-muted)",    bg: "var(--vh-ink-50)" },
};

// Lucide icon helper — uses the CDN's data-attribute API plus a manual recreate
// when components re-render.
function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.75, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      // Replace any previous icon mounted in this slot.
      ref.current.innerHTML = `<i data-lucide="${name}" style="width:${size}px;height:${size}px;color:${color};stroke-width:${strokeWidth};"></i>`;
      window.lucide.createIcons({ attrs: { "stroke-width": strokeWidth } });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: "inline-flex", alignItems: "center", lineHeight: 0, ...style }} />;
}

Object.assign(window, { PILLARS, STATUS_STYLES, Icon });