<script lang="ts">
import {onMount} from "svelte";
import {t} from "$lib/translations";
import Github from "$lib/icons/Github.svelte";
import Telegram from "$lib/icons/Telegram.svelte";
import Linkedin from "$lib/icons/Linkedin.svelte";
import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';

export let starCount: number | null;
let logo: HTMLElement;

onMount(async () => {
  const {gsap} = await import('gsap')
  const {Flip} = await import('gsap/Flip')
  const {ScrollTrigger} = await import('gsap/ScrollTrigger')

  gsap.registerPlugin(Flip, ScrollTrigger);

  ScrollTrigger.create({
    trigger: logo,
    start: "top-=10% top+=64px",
    onEnter: () => {
      const state = Flip.getState(logo);
      logo.classList.add("hero__logo--in-nav")
      Flip.from(state, {
        duration: .6,
      })
    },
    onLeaveBack: () => {
      const state = Flip.getState(logo);
      logo.classList.remove("hero__logo--in-nav")
      Flip.from(state, {
        absolute: true,
        duration: .6,
      })
    }
  })
})

const goTop = () => {
  document.body.scrollIntoView()
}
</script>

<div class="hero min-h-dvh flex flex-col justify-center gap-4 items-center p-2 md:p-8">
  <div
    class="hero__logo-wrapper mb-16"
  >
    <enhanced:img
      src="$lib/assets/kopyl_frame_white.png"
      alt="kopyl logo"
      class="hero__logo"
      bind:this={logo}
      on:click={goTop}
      on:keydown={goTop}
      role="button"
      tabindex="0"
    ></enhanced:img>
  </div>

  <h1 class="hero__name text-4xl text-center">
    {$t('anatoly_kopyl')}
  </h1>

  <p class="text-center mb-8 text-slate-400 max-w-96 text-balance">
    {@html $t('hero.subtitle')}
  </p>

  <div class="flex gap-6">
    <a
      class="hero__social-icon"
      target="_blank"
      href="https://github.com/anatolykopyl"
    >
      <Github></Github>
      {#if starCount}
        <div class="rounded-lg text-sm border border-slate-200 border-opacity-50 px-2 bg-slate-500 bg-opacity-25 absolute bottom-0 w-max translate-y-full mb-1 flex gap-1 items-center">
          {starCount}
          <MaterialSymbolsStarRounded class="max-h-4 max-w-4" />
        </div>
      {/if}
    </a>
    <a
      class="hero__social-icon"
      target="_blank"
      href="https://www.linkedin.com/in/akopyl/"
    >
      <Linkedin></Linkedin>
    </a>
    <a
      class="hero__social-icon"
      target="_blank"
      href="https://t.me/anatolykopyl"
    >
      <Telegram></Telegram>
    </a>
  </div>
</div>

<style lang="postcss">
  .hero__logo-wrapper {
    min-width: 64px;
    min-height: 64px;
    max-width: 256px;
    height: 25vh;
    aspect-ratio: 1;
  }

  .hero__logo {
    box-sizing: border-box;
    z-index: 100;
    background: theme(colors.slate.950);
  }

  :global(.hero__logo--in-nav) {
    position: fixed;
    width: 64px;
    height: 64px;
    top: 16px;
    left: 16px;

    @media screen(md) {
      left: 32px;
    }
  }

  .hero__social-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    height: fit-content;

    :global(svg) {
      width: 48px;
      height: 48px;
      color: white;
      opacity: .8;
      transition: opacity .3s;
    }

    &:hover {
      :global(svg) {
        opacity: 1;
      }
    }
  }
</style>
