<script>
  import { base } from "$app/paths";
  import styles from "./GetStarted.module.scss";
  import clsx from "clsx";
  import Button from "../Button/Button.svelte";
  import { t, locale } from "../../lib/translations/index";

  const isTh = locale.get() === "th" ? true : false;
  const isPt = locale.get() === "pt" ? true : false;
  const isEs = locale.get() === "es" ? true : false;
  const isAr = locale.get() === "ar" ? true : false;
</script>

<section class={styles.wrapper}>
  <div class={styles.blueBox}>
    <p class={clsx("text", styles.text)}>{$t('Get started today from $1')}</p>
    <h2 class={clsx("title", styles.title)}>{@html $t("You make money.<br />Exnova takes care of the technicalities")}</h2>


    <figure class={clsx(styles.bg, isPt && styles["bg--pt"])}>
      <img alt={$t("Succeed in the markets")} src="{base}/images/traderoom.webp" class={styles.imgDesktop} />
      <img alt={$t("Succeed in the markets")} src="{base}/images/traderoom-mob.webp" class={styles.imgMobile} />
    </figure>
  </div>
  <Button className={styles.btn} text={$t('Upgrade to Exnova')} />
</section>