// Paytools wordmark — uses the brand PNG from the design system.
// `variant` picks the appropriate file: "default" (dark wordmark + purple bot)
// for light surfaces, "light" for muted contexts, "white" for dark surfaces.
const __PAYTOOLS_LOGO_SRC = {
  default: "/design-system/assets/paytools-logo.png",
  light:   "/design-system/assets/paytools-logo-light.png",
  white:   "/design-system/assets/paytools-logo-white.png"
};
const __PAYTOOLS_LOGO_RATIO = 600 / 174;

const PaytoolsLogo = ({ height = 28, variant = "default" }) => {
  const src = __PAYTOOLS_LOGO_SRC[variant] || __PAYTOOLS_LOGO_SRC.default;
  return (
    <img
      src={src}
      alt="Paytools"
      width={Math.round(height * __PAYTOOLS_LOGO_RATIO)}
      height={height}
      style={{ display: "block", height, width: "auto" }}
    />
  );
};

window.PaytoolsLogo = PaytoolsLogo;

// Site-wide tracking bootstrap. PaytoolsLogo renders in the header of every
// page, so loading the trackers here means they run once per page without a
// <script> tag repeated across every HTML file. The IDs stay single-sourced in
// the loader files (see lib/hotjar.js, lib/hubspot.js, lib/linkedin.js,
// lib/gtm.js). GTM's <noscript> body fallback lives in the page footers.
(function () {
  if (window.__ptTrackingLoaded) return;
  window.__ptTrackingLoaded = true;
  ["/lib/hotjar.js", "/lib/hubspot.js", "/lib/linkedin.js", "/lib/gtm.js"].forEach(function (src) {
    var s = document.createElement("script");
    s.src = src;
    s.async = true;
    document.head.appendChild(s);
  });
})();