import Script from "next/script";

const MATOMO_URL = "https://analytics.atakanozban.com/";
const MATOMO_SITE_ID = "3";

/**
 * First-party analytics (Matomo) for songs2vid.com + docs subdomain.
 * Loaded once from the root layout so landing, dashboard, and legal pages share it.
 */
export function Matomo() {
  return (
    <>
      <Script id="matomo-analytics" strategy="afterInteractive">{`
  var _paq = window._paq = window._paq || [];
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setCookieDomain", "*.songs2vid.com"]);
  _paq.push(["setDomains", ["*.songs2vid.com"]]);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);
  (function () {
    var u = ${JSON.stringify(MATOMO_URL)};
    _paq.push(["setTrackerUrl", u + "matomo.php"]);
    _paq.push(["setSiteId", ${JSON.stringify(MATOMO_SITE_ID)}]);
    var d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
    g.async = true;
    g.src = u + "matomo.js";
    s.parentNode.insertBefore(g, s);
  })();
`}</Script>
      <noscript>
        <p>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            referrerPolicy="no-referrer-when-downgrade"
            src={`${MATOMO_URL}matomo.php?idsite=${MATOMO_SITE_ID}&rec=1`}
            style={{ border: 0 }}
            alt=""
          />
        </p>
      </noscript>
    </>
  );
}