<script>
  import Navbar from "$components/navbar.svelte";
  import Footer from "$components/footer.svelte";
  import Header from "$components/header.svelte";
  import Head from "$components/head.svelte";
  import Card from "$components/card.svelte";

  import { locale, _ } from "$lib/locale.js";

  let { data } = $props();

  // return list of projects that have decriptions for the given locale
  function projects() {
    return data.projects.filter(p => {
      return (
        p.desc[$locale.code] !== "" &&
        p.desc[$locale.code] !== null &&
        p.desc[$locale.code] !== undefined
      );
    });
  }
</script>

<Head title="home" desc="home page of my personal website" />
<Navbar />
<Header picture="tired" title={$_("home.title")} />
<main>
  <!-- welcome -->
  <Card>
    <p>{@html $_("home.welcome.desc")}</p>
    <br />
    <p>{$_("home.welcome.thanks")}</p>
  </Card>

  <!-- projects -->
  <Card title={$_("home.projects.title")} id="projects">
    <p>{$_("home.projects.desc")}:</p>
    <br />
    <ul>
      {#each projects() as project}
        <li class="project">
          <a href={project.url}>{project.name}</a>: {project.desc[$locale.code]}
        </li>
      {/each}
    </ul>
  </Card>

  <!-- services -->
  <Card title={$_("home.services.title")} id="services">
    <p>{$_("home.services.desc")}:</p>
    <br />
    <ul>
      <li>{@html $_("home.services.speed")}</li>
      <li>{@html $_("home.services.security")}</li>
      <li>{@html $_("home.services.blocks")}</li>
      <li>{@html $_("home.services.bullshit")}</li>
    </ul>
    <br />
    <a class="services" href="/services" data-sveltekit-preload-data>
      {$_("home.services.link")}
    </a>
  </Card>

  <!-- contact -->
  <Card title={$_("home.contact.title")} id="contact">
    <p>{@html $_("home.contact.desc")}</p>
    <br />
    <p>{@html $_("home.contact.mastodon")}</p>
  </Card>
</main>
<Footer />

<style>
  main {
    background: var(--black-1);
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 40px;
  }

  .services {
    color: var(--color);
    text-decoration-color: var(--color);
  }

  .project a {
    color: var(--color);
    text-decoration-color: var(--color);
  }
</style>
