---
import Picture from "astro/components/Picture.astro";
import HeroImage from "../../assets/img/hero.jpg";
import ArrowDown from "../icons/ArrowDown.astro";
---

<div class="hero" aria-label="Hero section">
  <div class="image-wrapper">
    <Picture
      class="image"
      src={HeroImage}
      formats={["jpg", "jpeg", "webp"]}
      alt="todo"
    />
  </div>

  <div class="content">
    <h1 class="heading-gradient">
      <span>Your Partner </span>
      <span>For A Better Web</span>
    </h1>

    <p>
      From concept to launch - websites, apps, and digital solutions that work
      hard, so you can play hard. We create long-term success by focusing on
      digital sovereignty and sustainability.
    </p>

    <div class="down">
      <ArrowDown />
    </div>
  </div>
</div>

<style>
  .hero {
    display: grid;
    grid-template-columns: var(--base-grid);
    padding-inline: var(--padding-x);
    max-width: var(--max-content-width);
    margin-inline: auto;

    @media screen and (min-width: 50rem) {
      height: 100svh;
      max-height: 90rem;
    }
  }

  .image-wrapper {
    grid-column: 3 / -1;
    max-height: 40vh;
    position: relative;
    z-index: -1;

    @media screen and (max-width: 49.9375rem) {
      margin-top: 1.5rem;
    }

    @media screen and (min-width: 50rem) {
      grid-column: 4 / -1;
      grid-row: 1;
      grid-column: 5 / -1;
      max-height: clamp(400px, 70vh, 1000px);
    }

    @media screen and (min-width: 75rem) {
      grid-column: -1 / -6;
    }
  }

  @media screen and (min-width: 50rem) and (max-width: 74.9375rem) {
    .image-wrapper::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: var(--gradient-overlay);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;

      backdrop-filter: blur(10px);
    }
  }

  .image {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .content {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 1.5em;
    z-index: 1;

    grid-column: 1 / -1;
    grid-row: 1;

    @media screen and (max-width: 24.9375rem) {
      margin-top: 6rem;
    }

    @media screen and (min-width: 25rem) and (max-width: 49.9375rem) {
      margin-top: 8rem;
    }

    @media screen and (min-width: 50rem) {
      row-gap: 2.25em;
      grid-template-rows: 1fr 1fr;
    }
  }

  h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: end;

    font-size: var(--fs-page-title);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-narrow);
    font-weight: 600;

    @media screen and (min-width: 50rem) {
      grid-column: 2 / -2;
    }

    @media screen and (min-width: 100rem) {
      grid-column: 3 / -3;
    }

    & span {
      display: block;
    }
  }

  p {
    grid-column: 1 / -1;
    grid-row: 2;

    max-width: 45ch;
    font-size: var(--fs-md);
    line-height: var(--leading-paragraph);

    @media screen and (min-width: 50rem) {
      grid-column: 2 / -5;
    }

    @media screen and (min-width: 64rem) {
      grid-column: 3 / -5;
    }

    @media screen and (min-width: 100rem) {
      grid-column: 4 / -4;
    }
  }

  .down {
    display: inline-flex;

    grid-column: 1 / -1;
    grid-row: 1 / 3;
    justify-self: center;
    align-self: end;

    padding: 1rem;
    margin-bottom: 2rem;

    background-color: transparent;
    border: none;

    & svg {
      display: inline-block;
      width: 3rem;
      height: 3rem;
    }

    @media screen and (max-width: 49.9375rem) {
      display: none;
    }
  }
</style>

<script>
  import { gsap } from "gsap";
  import { SplitText } from "gsap/SplitText";
  import { ScrollTrigger } from "gsap/ScrollTrigger";

  gsap.registerPlugin(SplitText);
  gsap.registerPlugin(ScrollTrigger);

  const heroSection = document.querySelector(".hero");

  if (heroSection) {
    const mm = gsap.matchMedia();

    mm.add("(prefers-reduced-motion: no-preference)", () => {
      const tl = gsap.timeline().pause();

      tl.addLabel("heading", 0);
      tl.addLabel("image", 0.2);
      tl.addLabel("text", 0.8);
      tl.addLabel("arrow", 1.5);

      tl.from(
        heroSection.querySelector(".image-wrapper"),
        {
          duration: 2,
          opacity: 0,
          xPercent: 10,
          ease: "expo.out",
        },
        "image",
      );

      new SplitText(heroSection.querySelector("h1"), {
        type: "words, chars",
        autoSplit: true,
        mask: "chars",
        charsClass: "char",
        onSplit: (self) => {
          tl.from(
            self.chars,
            {
              duration: 1,
              yPercent: -120,
              scale: 1.2,
              stagger: 0.015,
              ease: "expo.out",
              onComplete: () => self.revert(),
            },
            "heading",
          );
        },
      });

      new SplitText(heroSection.querySelector("p"), {
        type: "lines, words",
        autoSplit: true,
        mask: "lines",
        linesClass: "line",
        onSplit: (self) => {
          tl.from(
            self.lines,
            {
              duration: 0.9,
              yPercent: 105,
              stagger: 0.06,
              ease: "expo.out",
              onComplete: () => self.revert(),
            },
            "text",
          ).play();
        },
      });

      tl.from(
        heroSection.querySelector(".down"),
        {
          duration: 1,
          opacity: 0,
          translateY: "-100%",
          ease: "bounce.out",
        },
        "arrow",
      );
    });
  }
</script>