// Aigocy — atomic primitives

const Button = ({ variant = "dark", icon, children, onClick, type, ...rest }) => {
  const classes = {
    dark:   "ag-btn ag-btn--dark",
    light:  "ag-btn ag-btn--light",
    accent: "ag-btn ag-btn--accent",
  }[variant] || "ag-btn ag-btn--dark";
  return (
    <button className={classes} onClick={onClick} type={type || "button"} {...rest}>
      {children}
      {icon ? <span className="ag-btn__icon">{icon}</span> : null}
    </button>
  );
};

const SparkleIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path d="M10 0 L11.5 8.5 L20 10 L11.5 11.5 L10 20 L8.5 11.5 L0 10 L8.5 8.5 Z"/>
  </svg>
);

const EyebrowPill = ({ children, withSparkle = false }) => (
  <span className="ag-eyebrow-pill">
    {withSparkle ? <SparkleIcon size={18} /> : null}
    {children}
  </span>
);

const TickIcon = () => (
  <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="2,5 4.5,7.5 8,3"/>
  </svg>
);

const ListTick = ({ children }) => (
  <li className="ag-list-tick">
    <span className="ag-list-tick__dot"><TickIcon/></span>
    <span>{children}</span>
  </li>
);

const IconCircle = ({ children, variant = "dark", size = 32 }) => (
  <span
    className={`ag-icon-circle ag-icon-circle--${variant}`}
    style={{ width: size, height: size }}
  >
    {children}
  </span>
);

const ChevronRight = () => (
  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="9,6 15,12 9,18"/>
  </svg>
);

const SectionHeading = ({ eyebrow, children, sub, align = "center", onDark = false }) => (
  <header className={`ag-section-heading ag-section-heading--${align} ${onDark ? "is-dark" : ""}`}>
    {eyebrow ? <EyebrowPill>{eyebrow}</EyebrowPill> : null}
    <h2 className="ag-section-heading__title">{children}</h2>
    {sub ? <p className="ag-section-heading__sub">{sub}</p> : null}
  </header>
);

Object.assign(window, {
  Button, EyebrowPill, ListTick, IconCircle, SectionHeading,
  SparkleIcon, TickIcon, ChevronRight,
});