<script lang="ts">
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';
  import Carousel from '$lib/components/Carousel.svelte';
  let { data } = $props();

  onMount(() => {
    if (document.querySelector('.workclone')) {
      document.querySelector('.workclone')?.remove();
    }

    gsap.to('.logo-wrapper', {
      opacity: 0,
      scale: 0.85,
      zIndex: -1,
      duration: 0.5,
      ease: 'power2.out',
    });
    gsap.to('.work', {
      y: '-100vh',
      duration: 1,
      ease: 'power4.out',
    });
    gsap.to('.carousel', {
      y: '100vh',
      duration: 1,
      ease: 'power4.out',
    });

    return () => {
      gsap.killTweensOf('.logo-wrapper, .work, .carousel');
    };
  });
</script>

<div
  class="
    logo-wrapper
    fixed z-1
    w-screen h-screen text-center
  "
>
  <div
    class="
      svg-logo
      flex flex-col justify-center
      w-full h-full m-auto p-[3em]
      text-[#440011]
      [&_svg]:object-fill [&_svg]:w-full [&_svg]:h-full
      md:w-3/5
    "
  >
    {@html data.svg}
  </div>
</div>
<div
  class="
    subnav
    fixed z-22
    md:top-0 md:left-0 md:inline-block
  "
>
  <a
    href="/work"
    class="
      subnav-item button 
      inline-flex items-center gap-2 
      m-(--spacing-nav)
    "
  >
    <svg 
      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" 
      class="
        w-6 h-6 
        inline-block
      "
    >
      <path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
    </svg>
    Back
  </a>
</div>
<div 
  class="
    carousel
    relative md:landscape:absolute z-1
    -top-[100vh] md:top-[calc(-100vh-10vw)]
  "
>
  <Carousel images={data.images} title={data.title} />
</div>
<article
  class="
    work
    relative overflow-hidden 
    top-[100vh] md:landscape:top-[calc(200vh-11.25rem-2.5vw)]
    px-(--spacing-outer) pb-[100px] pt-0
    md:landscape:ml-[150px] md:landscape:mr-(--spacing-outer) md:landscape:my-0 
    md:landscape:px-(--spacing-outer) md:landscape:pb-[100px] 
    md:landscape:w-[calc(100%-150px-var(--spacing-outer))]

    [&_h1]:mt-[0.125em] [&_h1]:mb-[0.5em] [&_h1]:text-[2.5rem] [&_h1]:text-(--color-highlight)
    md:[&_h1]:text-[6rem]
  "
>
  <div
    class="
      description
      mt-[1.5em] leading-[1.3] tracking-normal uppercase
      text-xl md:text-[1.75rem]
    "
  >
    {data.description}
  </div>
  <h1>{data.title}</h1>
  <div
    class="
      work-content
      relative z-2
      md:flex md:gap-[2em]
    "
  >
    <div
      class="
        infobox
        text-xl pb-[2em]
        md:flex-[0_0_25%]
      "
    >
      <div class="tasks">
        <div class="tasks-title font-bold italic mb-[0.125em]">What I did:</div>
        <ul class="m-0 flex flex-wrap gap-[0.125em]">
          {#each data.tags as tag (tag)}
            <li
              class="
                text-base list-none border-none uppercase rounded-[3px]
                m-0 py-[0.25em] px-[0.33em]
                bg-(--color-highlight) text-(--color-bg)
              "
            >
              {tag}
            </li>
          {/each}
        </ul>
      </div>
      <div class="reference">
        <div class="reference-title font-bold italic mt-4 mb-0">Reference:</div>
        <div><a href={data.reference}>{data.referenceName}</a></div>
      </div>
      {#if data.agency}
      <div class="agency">
        <div class="agency-title font-bold italic mt-4 mb-0">Agency:</div>
        <div><a href={data.agency}>{data.agencyName}</a></div>
      </div>
      {/if}
    </div>
    <div
      class="
        work-content-text
        [&_p]:mt-5
        [&_h2]:mt-10 [&_h2]:text-[2rem] md:[&_h2]:text-[2.5rem]
        *:first:mt-0 [&>h1:first-child]:mt-0
      "
    >
      {#await import(`../md/${data.slug}.md`) then { default: Content }}
        <Content />
      {:catch error}
        <p>Error loading content: {error.message}</p>
      {/await}
    </div>
  </div>
</article>
