// Minimal design-system shim for the landing page. The kit uses only Icon and
// PillButton from the DS bundle; these are faithful re-implementations (same
// props/markup) styled via icons.css + aeq.css.
(function () {
  function Icon({ name, size = 20, color, className = "", style = {}, ...rest }) {
    return (
      <span
        className={`icon icon-${name} ${className}`.trim()}
        style={{ width: size, height: size, color, ...style }}
        aria-hidden="true"
        {...rest}
      />
    );
  }

  const ARROW = (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M6.8687 9.2414C6.7341 9.2414 6.5996 9.1927 6.4934 9.0884C6.288 8.8867 6.288 8.553 6.4934 8.3513L9.9165 4.4991L6.4934 0.64691C6.288 0.44526 6.288 0.11149 6.4934 -0.09016C6.6987 -0.29181 7.0387 -0.29181 7.244 -0.09016L11.0425 4.1306C11.2478 4.3322 11.2478 4.666 11.0425 4.8676L7.244 9.0884C7.1378 9.1927 7.0032 9.2414 6.8687 9.2414Z" fill="currentColor" />
      <path d="M10.6486 4.931H1.3517C1.05213 4.931 0.803711 4.7356 0.803711 4.5C0.803711 4.2644 1.05213 4.069 1.3517 4.069H10.6486C10.9481 4.069 11.1966 4.2644 11.1966 4.5C11.1966 4.7356 10.9481 4.931 10.6486 4.931Z" fill="currentColor" />
    </svg>
  );

  function PillButton({ children, tone = "light", as = "a", style = {}, ...rest }) {
    const Tag = as;
    return (
      <Tag className={`aeq-pill${tone === "dark" ? " aeq-pill--dark" : ""}`} style={style} {...rest}>
        {children}
        <span className="aeq-pill__badge"><span style={{ display: "flex", transform: "translate(0.5px, 1px)" }}>{ARROW}</span></span>
      </Tag>
    );
  }

  window.AequitasCapitalDesignSystem_4533c9 = { Icon, PillButton };
})();