<script>
    import { t } from "../../i18n"
    import { path } from '../../utils/stores.js';

    const onNavigateTo = (e, route) => {
        e.preventDefault()
        history.pushState({}, '', route);
        path.set(route);
      }
</script>

<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="#" on:click={(e) => onNavigateTo(e, "/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="#" on:click={(e) => onNavigateTo(e, "/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>

