<script lang="ts">
    import Avatar from '$lib/components/bio/profile/Avatar.svelte';
    import Landing from '$lib/components/screens/Landing.svelte';
  
    export let data;
  
    $: title = 'The most advanced link-in-bio · YourSitee';
    $: description =
      'Feature-rich, customizable, modern, and user-friendly link-in-bio tool. Create your own sitee now — yoursit.ee!';
    $: image = 'https://cdn.yoursit.ee/branding/logo_blue_background-sm.png';
  </script>
  
  <svelte:head>
    <title>YourSitee</title>
    <meta property="og:title" content={title} />
    <meta name="twitter:title" content={title} />
    <meta property="og:description" content={description} />
    <meta name="twitter:description" content={description} />
    <meta property="og:image" content={image} />
    <meta name="twitter:image" content={image} />
  </svelte:head>
  
  <Landing bio={data.bio}>
    <p class="text-[60px] 2xl:text-[100px] 3xl:text-[120px] font-medium leading-none max-w-[1330px]">
      The most advanced <span class="whitespace-nowrap">link-in-bio</span>. Ever.
    </p>
    <p class="text-xl leading-[1.25] text-[#D1D6DB] max-w-[430px]">
      YourSitee is a feature-rich, customizable, modern, and user-friendly link-in-bio tool.
    </p>
    <div class="flex gap-2 flex-col md:flex-row">
      {#if data.session}
        <a data-sveltekit-reload href="/dashboard" class="button primary flex gap-1"
          ><Avatar uniqueId={data.session.data.uniqueId} veryTiny={true} /> Continue to the Dashboard</a>
        <a data-sveltekit-reload href="/dashboard/logout" class="button">Log out</a>
      {:else}
        <a data-sveltekit-reload href="/dashboard/register" class="button primary">Invited for Alpha? Sign up</a>
        <a data-sveltekit-reload href="/dashboard/login" class="button">Log in</a>
      {/if}
    </div>
  </Landing>
  
  <style lang="postcss">
    .button {
      @apply bg-button-dark-transparent-fill hover:bg-button-dark-fill !text-text-primary font-medium rounded-2xl box-border px-4 py-2 w-fit h-fit;
    }
  
    .button.primary {
      @apply bg-text-header hover:bg-text-primary !text-item;
    }
  </style>
  