/* ui.jsx — shared primitives (Terminal Newsroom system)
   Exposes: Icon, Button, Chip, Kicker, LiveDot, Section to window
   Rules: Geist Mono uppercase buttons/labels, sharp 0px corners,
   opacity borders, NO shadows/gradients, dim-on-hover. */

const { useEffect, useRef, useState } = React;

/* Lucide icon — renders an <i> then hydrates it. */
function Icon({ name, size = 18, className = "", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      ref.current.appendChild(i);
      window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": 1.75 }, nameAttr: "data-lucide" });
    }
  }, [name, size]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", lineHeight: 0, ...style }} />;
}

/* Buttons: GeistMono uppercase, sharp corners, primary dims on hover. */
function Button({ variant = "primary", icon, iconRight, children, onClick, style = {} }) {
  const [h, setH] = useState(false);
  const base = {
    appearance: "none", WebkitAppearance: "none", outline: "none",
    display: "inline-flex", alignItems: "center", gap: 9,
    fontFamily: "var(--font-mono)", fontWeight: 400, fontSize: 14,
    letterSpacing: "0.10em", textTransform: "uppercase",
    borderRadius: 0, padding: "13px 22px", cursor: "pointer",
    border: "1px solid transparent", transition: "all var(--dur) var(--ease)", ...style,
  };
  const variants = {
    primary: { background: h ? "rgba(255,255,255,0.88)" : "#ffffff", color: "var(--on-white)" },
    ghost: { background: h ? "var(--surface-1)" : "transparent", color: "var(--fg)", borderColor: h ? "var(--border-strong)" : "var(--border-strong)" },
    blue: { background: h ? "var(--blue-dim)" : "var(--blue)", color: "#fff" },
  };
  return (
    <button style={{ ...base, ...variants[variant] }} onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>
      {icon && <Icon name={icon} size={16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={16} />}
    </button>
  );
}

/* Filter chip / category tab — sharp, bordered, active = brighter border + bg. */
function Chip({ active, icon, children, onClick }) {
  const [h, setH] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        appearance: "none", WebkitAppearance: "none", outline: "none",
        display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer",
        fontFamily: "var(--font-mono)", fontWeight: 400, fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase",
        borderRadius: 0, padding: "9px 15px",
        transition: "all var(--dur) var(--ease)",
        background: active ? "var(--surface-2)" : h ? "var(--surface-1)" : "transparent",
        border: `1px solid ${active ? "var(--border-strong)" : "var(--border)"}`,
        color: active ? "var(--fg)" : "var(--fg-3)",
      }}>
      {icon && <Icon name={icon} size={13} />}
      {children}
    </button>
  );
}

/* Uppercase mono kicker / label */
function Kicker({ children, blue, style = {} }) {
  return <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: blue ? "var(--blue-bright)" : "var(--fg-3)", ...style }}>{children}</span>;
}

function LiveDot() {
  return <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--live)", display: "inline-block", animation: "neelPulse 1.8s var(--ease) infinite" }} />;
}

function Section({ children, id, style = {}, narrow }) {
  return (
    <section id={id} style={{ maxWidth: narrow ? "var(--maxw-prose)" : "var(--maxw)", margin: "0 auto", padding: "0 24px", ...style }}>
      {children}
    </section>
  );
}

Object.assign(window, { Icon, Button, Chip, Kicker, LiveDot, Section });