// Shared UI primitives used by every gohegan.net UI kit.
// Exported to window so other Babel files can pick them up.

const HEGAN_LOGO_MARK = (props = {}) => (
  <svg viewBox="0 0 64 64" fill="none" width={props.size || 24} height={props.size || 24} aria-hidden="true">
    <g stroke="currentColor" strokeWidth="3" strokeLinecap="round">
      <line x1="14" y1="14" x2="50" y2="14"/>
      <line x1="14" y1="14" x2="14" y2="50"/>
      <line x1="14" y1="14" x2="50" y2="50"/>
      <line x1="50" y1="14" x2="50" y2="50"/>
      <line x1="14" y1="50" x2="50" y2="50"/>
    </g>
    <circle cx="14" cy="14" r="6" fill="#2563eb"/>
    <circle cx="50" cy="14" r="5" fill="currentColor"/>
    <circle cx="14" cy="50" r="5" fill="currentColor"/>
    <circle cx="50" cy="50" r="5" fill="currentColor"/>
  </svg>
);

// Mono wordmark — Geist Mono, medium weight, tight tracking.
// `suffix` adds a muted `.net` after the name.
const GoheganLogo = ({ size = 22, withWord = true, suffix = false }) => (
  <span
    style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      color: "var(--fg-0)",
    }}
  >
    <HEGAN_LOGO_MARK size={size} />
    {withWord && (
      <span
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: size * 0.8,
          fontWeight: 500,
          lineHeight: 1,
          letterSpacing: "-0.04em",
        }}
      >
        gohegan
        {suffix && <span style={{ opacity: 0.4, marginLeft: 0 }}>.net</span>}
      </span>
    )}
  </span>
);

// Lucide icon — must be called after lucide CDN has loaded.
const Icon = ({ name, size = 18, strokeWidth = 1.75, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML = '';
    const i = document.createElement('i');
    i.setAttribute('data-lucide', name);
    ref.current.appendChild(i);
    window.lucide.createIcons({
      icons: window.lucide.icons,
      nameAttr: 'data-lucide',
      attrs: { width: size, height: size, 'stroke-width': strokeWidth },
    });
  }, [name, size, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', alignItems: 'center', ...style }} aria-hidden="true"/>;
};

// A status dot with a soft halo.
const Dot = ({ tone = 'ok', size = 8 }) => {
  const colors = {
    ok:    { fg: 'var(--success)', halo: 'rgba(22,163,74,0.18)' },
    warn:  { fg: 'var(--warning)', halo: 'rgba(217,119,6,0.18)' },
    err:   { fg: 'var(--danger)',  halo: 'rgba(220,38,38,0.18)' },
    info:  { fg: 'var(--accent)',  halo: 'rgba(37,99,235,0.18)' },
    off:   { fg: 'var(--fg-3)',    halo: 'rgba(115,115,115,0.18)' },
  }[tone];
  return (
    <span style={{
      display: 'inline-block',
      width: size, height: size, borderRadius: '50%',
      background: colors.fg,
      boxShadow: `0 0 0 ${Math.max(2, size/2)}px ${colors.halo}`,
      flexShrink: 0,
    }}/>
  );
};

// Mono tape: stretch of metadata across hero/footer.
const Tape = ({ items }) => (
  <div className="hg-tape">
    {items.map((it, i) => (
      <span key={i}>{it.k}: <b>{it.v}</b></span>
    ))}
  </div>
);

Object.assign(window, { HEGAN_LOGO_MARK, GoheganLogo, Icon, Dot, Tape });