<script>
  import { t } from '$lib/translations';
  import Seo from '$lib/components/Seo.svelte';

  /** @type {import('./$types').PageProps} */
  let { data } = $props();

  // svelte-ignore state_referenced_locally
  const metadata = data.metadata;
</script>

<Seo {...metadata} />

<section aria-labelledby="tos-heading">
  <h1 id="tos-heading">{$t('terms.of.service.title')}</h1>
  <p><em>{$t('terms.of.service.update')}</em></p>

  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
  {@html $t('terms.of.service.content')}
</section>

<style>
  section {
    width: 70%;
    margin: 0 auto;
    margin-top: 130px;
  }
  h2 {
    font-size: 17px;
  }

  @media (max-width: 768px) {
    section {
      width: 90%;
    }
  }
</style>
