<script lang="ts">
    import UserPanel from '$lib/components/bio/UserPanel.svelte';
    import socials from '$lib/socials';
    import Tooltip from '../common/Tooltip.svelte';
  
    export let bio: BioSite | undefined = undefined;
    export let dim: boolean = false;
  </script>
  
  <img
    class="bg blur-[10vh] brightness-110"
    class:opacity-30={dim}
    src="/assets/landing/background-blur.svg"
    alt="Background blur" />
  
  <img
    class="bg blur-[3.25vh] brightness-125 z-10"
    class:opacity-30={dim}
    src="/assets/landing/background-logo.svg"
    alt="Background logo" />
  
  <div class="relative z-20 w-full h-full flex justify-between 2xl:gap-8 px-6 py-12 xs:p-12 sm:p-16 overflow-x-hidden">
    <div class="w-full h-full flex flex-col justify-between gap-8">
      <div class="flex flex-col gap-[50px] 2xl:gap-[60px] 3xl:gap-[120px]">
        <header>
          <a class="flex gap-2 items-center box-content" href="/">
            <div class="w-8 h-8 bg-white img logo" title="YourSitee logo" />
            <p class="text-white text-2xl font-medium">YourSit.ee</p>
            <div class="w-6 h-[18px] bg-accent img alpha" title="Alpha" />
          </a>
        </header>
        <main class="flex flex-col gap-10">
          <slot />
        </main>
      </div>
      <footer>
        <div class="flex flex-col gap-2">
          <div class="flex gap-2">
            {#each socials as social}
              <a href={social.url} target="_blank" aria-label={social.name} class="group">
                <div class="p-2 group">
                  <div
                    class="w-6 h-6 bg-text-clickable group-hover:bg-text-primary transition-colors img social"
                    style="--url: url({social.icon})" />
                  <div
                    class="relative opacity-0 group-hover:opacity-100 -translate-y-5 group-hover:-translate-y-8 transition-all"
                    aria-hidden="true">
                    <Tooltip>{social.name}</Tooltip>
                  </div>
                </div>
              </a>
            {/each}
          </div>
          <div class="flex-col gap-2 inline-flex">
            <div class="text-text-secondary">© YourSitee {new Date(Date.now()).getFullYear()}</div>
            <div class="flex gap-4">
              <a href="/privacy">Privacy Policy</a>
              <a href="/terms">Terms of Service</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
    {#if bio}
      <div class="hidden lg:flex flex-shrink-0 items-end justify-end">
        <div class="grid">
          <div class="user-panel">
            <UserPanel
              displayName={bio.displayName}
              username={bio.username}
              badges={bio.badges}
              description={bio.description}
              socials={{ links: [], texts: [], minimal: false, invert: false }}
              uid={bio.uid}
              uniqueId={bio.uniqueId}
              views={null}
              align={bio.align}
              location={bio.location ?? undefined} />
          </div>
        </div>
      </div>
    {/if}
  </div>
  
  <style lang="postcss">
    .bg {
      @apply w-screen h-screen fixed top-0 object-cover;
    }
  
    .img {
      mask-position: center;
      mask-size: cover;
      mask-repeat: no-repeat;
    }
  
    .img.logo {
      mask-image: url(/assets/brand/icon.svg);
    }
  
    .img.alpha {
      mask-image: url(/assets/brand/alpha.svg);
    }
  
    .img.social {
      mask-image: var(--url);
      mask-size: contain;
    }
  
    .grid > div {
      @apply col-start-1 row-start-1;
    }
  
    .user-panel {
      @apply w-[350px] xl:w-[400px];
    }
  
    footer a {
      @apply !text-text-clickable hover:!text-text-primary transition-colors;
    }
  </style>
  