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

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

  const metadata = data.metadata;
</script>

<Seo {...metadata} />

<div class="home-container">
  <section aria-labelledby="main-title">
    <h1 id="main-title">{$t('home.main.title')}</h1>
    {@html $t('home.main.description')}
  </section>

  <section aria-labelledby="features-title">
    <h2 id="features-title">{$t('home.features.title')}</h2>
    {@html $t('home.features.list')}
  </section>

  <section aria-labelledby="how-to-use-title">
    <h2 id="how-to-use-title">{$t('home.howtouse.title')}</h2>
    {@html $t('home.howtouse.list')}
  </section>

  <section aria-labelledby="testimonials-title">
    <h2 id="testimonials-title">{$t('home.testimonials.title')}</h2>
    {@html $t('home.testimonials.description')}
  </section>

  <section aria-labelledby="donation-title">
    <h2 id="donation-title">{$t('home.donation.title')}</h2>
    {@html $t('home.donation.description')}
    <p>
      <a href="/donate" class="button">{$t('home.donation.cta')}</a>
      – {$t('home.donation.cta.description')}
    </p>
  </section>

  <!--TODO: add video preview-->
  <section aria-labelledby="cta-title">
    <h2 id="cta-title">{$t('home.cta.title')}</h2>
    <p>
      <a href="/viewer" class="button">{$t('home.cta.cta')}</a>
      – {@html $t('home.cta.cta.description')}
    </p>
  </section>
</div>

<style>
  .home-container {
    margin: 0 auto;
    width: 70%;
  }

  @media (max-width: 768px) {
    .home-container {
      width: 100%;
    }
  }
</style>
