<script lang="ts">
  import { browser } from '$app/environment';
  import { locales, defaultLocale } from '$lib/translations';
  import { PUBLIC_SITE_NAME } from '$env/static/public';
  import { page } from '$app/stores';
  export let type: string;
  export let title: string;
  export let image: string;
  export let description: string;
  export let createjs: boolean | undefined = false;
  export let calendly: boolean | undefined = false;
  export let tradingPlatformAnim: boolean | undefined = false;
  export let turnkeySolutionAnim: boolean | undefined = false;
  export let turnkeySolutionAnimMobile: boolean | undefined = false;
  export let schemaScript: string = '';

  let location = '';

  if (browser) {
    location = window.location.href;
  }
  $: ({ route } = $page.data);
  const { lang } = $page.data;
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />

  <meta property="og:type" content={type} />
  <meta property="og:url" content={location} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:site_name" content="Quadcode" />
  <meta property="og:locale" content="en" />

  <meta property="twitter:card" content="summary" />
  <meta property="twitter:url" content={location} />
  <meta property="twitter:title" content={title} />
  <meta property="twitter:description" content={description} />
  <meta property="twitter:image" content={image} />

  {@html schemaScript}
  <link rel="canonical" href={`${PUBLIC_SITE_NAME}${lang !== defaultLocale ? `/${lang}` : ''}${route}`} />
  <link rel="alternate" hreflang='x-default' href={`${PUBLIC_SITE_NAME}${route}`}>
  {#each $locales as locale}
    <link rel="alternate" hreflang={locale} href={`${PUBLIC_SITE_NAME}${locale !== defaultLocale ? `/${locale}`: ''}${route}`}>
  {/each}

  {#if createjs}
    <script defer src="./libs/createjs.min.js"></script>
  {/if}

  {#if tradingPlatformAnim}
    <script src="./libs/animations/trading-platform/NotEnough.js"></script>
  {/if}

  {#if turnkeySolutionAnim}
    {#if turnkeySolutionAnimMobile}
      <script src="./libs/animations/turnkey-solution/HeroDesktop.js"></script>
    {:else}
      <script src="./libs/animations/turnkey-solution/HeroMobile.js"></script>
    {/if}
  {/if}


  {#if calendly}
    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />
    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
  {/if}

  <!-- Roistat Counter Start -->
  <script defer>
    (function(w, d, s, h, id) {
      w.roistatProjectId = id; w.roistatHost = h;
      var p = d.location.protocol == "https:" ? "https://" : "http://";
      var u = /^.*roistat_visit=[^;]+(.*)?$/.test(d.cookie) ? "/dist/module.js" : "/api/site/1.0/"+id+"/init?referrer="+encodeURIComponent(d.location.href);
      var js = d.createElement(s); js.charset="UTF-8"; js.async = 1; js.src = p+h+u; var js2 = d.getElementsByTagName(s)[0]; js2.parentNode.insertBefore(js, js2);
    })(window, document, 'script', 'cloud.roistat.com', '1ec74ef9b67f65e8aaec7eb4ac4d541a');
  </script>
  <!-- Roistat Counter End -->
  <slot />
</svelte:head>