// iBOrbit primitives — small reusable atoms.
// Attaches all components to window so other Babel scripts can use them.

const Card = ({ className = "", style, children, ...rest }) => (
  <div className={`card ${className}`} style={style} {...rest}>{children}</div>
);

const Eyebrow = ({ children, style, className = "" }) => (
  <div className={`eyebrow ${className}`} style={style}>{children}</div>
);

const LabelPill = ({ children, style, className = "" }) => (
  <span className={`label ${className}`} style={style}>{children}</span>
);

const Scribble = ({ children, className = "purple" }) => (
  <span className={`scribble ${className}`}>{children}</span>
);

const Button = ({ variant = "default", href, children, ...rest }) => {
  const cls = `btn ${variant === "default" ? "" : variant}`.trim();
  if (href) return <a href={href} className={cls} {...rest}>{children}</a>;
  return <button className={cls} {...rest}>{children}</button>;
};

// Lucide icon. Renders <i data-lucide=name> and triggers a global redraw.
const Icon = ({ name, size, className = "", style }) => {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const s = size ? { width: size, height: size, ...style } : style;
  return <i data-lucide={name} className={className} style={s}></i>;
};

const IconPill = ({ name, size = "default", className = "" }) => (
  <span className={`icon-pill ${size === "sm" ? "sm" : ""} ${className}`}>
    <Icon name={name} />
  </span>
);

const Avatar = ({ src, alt = "", size = 42, mini = false, style }) => {
  const cls = mini ? "mini-avatar" : "avatar";
  const s = { width: size, height: size, ...style };
  return (
    <span className={cls} style={s}>
      {src ? <img src={src} alt={alt} /> : <span>{alt.slice(0, 2).toUpperCase()}</span>}
    </span>
  );
};

const AvatarRow = ({ avatars = [], mini = false, size }) => (
  <div className="avatar-row">
    {avatars.map((a, i) => <Avatar key={i} src={a.src} alt={a.alt} mini={mini} size={size} />)}
  </div>
);

const CheckList = ({ items, gap }) => (
  <div className="check-list" style={gap ? { gap } : null}>
    {items.map((it, i) => (
      <div className="check-item" key={i}>
        <Icon name="circle-check" />
        <span dangerouslySetInnerHTML={{ __html: it }} />
      </div>
    ))}
  </div>
);

const Tag = ({ children, variant }) => (
  <span className={`tag ${variant || ""}`}>{children}</span>
);

// ProofStrip: pass an array of {icon, value, label} (4 or 5 entries).
// Optionally pass a leading `intro` element for the first cell.
const ProofStrip = ({ items, intro }) => (
  <div className="card proof-strip" style={{ gridTemplateColumns: `repeat(${items.length + (intro ? 1 : 0)}, 1fr)` }}>
    {intro && <div style={{ gridTemplateColumns: "1fr" }}>{intro}</div>}
    {items.map((it, i) => (
      <div key={i}>
        <Icon name={it.icon} className="icon" />
        <div>
          <strong>{it.value}</strong>
          <span dangerouslySetInnerHTML={{ __html: it.label }} />
        </div>
      </div>
    ))}
  </div>
);

const Placeholder = ({ children, className = "", style }) => (
  <div className={`placeholder ${className}`} style={style}>
    <span>{children}</span>
  </div>
);

Object.assign(window, {
  Card, Eyebrow, LabelPill, Scribble, Button, Icon, IconPill,
  Avatar, AvatarRow, CheckList, Tag, ProofStrip, Placeholder,
});