---
import Button from "../ui/Button.astro";
import Heading from "../ui/Heading.astro";
import Tools from "../portfolio/Tools.astro";
import { Icon } from "astro-icon/components";
import Hobbies from "../portfolio/Hobbies.astro";
import { AstroError } from "astro/errors";
import { getCollection} from "astro:content";

const [staticData] = await getCollection('staticData');

if (!staticData) {
  throw new AstroError("JSON data not found");
}
---

<section
  class="scroll-m-16 px-8 max-sm:px-4 py-8"
  id="home"
  aria-label="Professional profile and introduction"
>
  <div
    class="mx-auto mb-4 h-96 w-full max-w-7xl rounded-2xl bg-linear-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 hover:to-mint-300/30 dark:hover:to-mint-600/30 p-[.2rem]  max-md:h-auto"
  >
    <div
      class="group relative z-0 flex h-full items-center justify-center gap-8 overflow-hidden rounded-2xl bg-linear-to-tr from-riptide-100 to-white p-4 transition-all hover:shadow-[0_10px_50px_rgba(13,188,130,0.2)] dark:bg-linear-to-r dark:from-mint-950 dark:to-zinc-950 dark:overflow-hidden max-md:w-full max-md:gap-3 max-lg:gap-2 max-sm:flex-col dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] before:absolute before:left-65 before:top-10 before:h-[40%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-80 before:-z-10 before:transition hover:before:animate-pulse"
    >
      <div class="aspect-square h-4/5 max-md:size-32">
        <div
          class="group-hover:scale-105 relative z-10 flex w-full cursor-pointer items-center overflow-hidden rounded-full p-[2px] transition-all duration-500"
        >
          <div
            class="absolute inset-0 h-full w-full rounded-fullfrom-transparent  to-riptide-500 dark:from-transparent  f dark:to-mint-300 animate-rotate-border bg-conic/[from_var(--border-angle)] "
          >
          </div>
          <div class="relative z-20 flex w-full rounded-full bg-mint-900">
            <div
              class="w-full aspect-square rounded-full bg-center bg-cover"
              style={`background-image: url(${staticData.data.profileImage})`}
              aria-label={staticData.data.profileAlt}
            >
              <a
                href={staticData.data.profileLink}
                class="flex h-full w-full"
                aria-label="View about me page"></a>
            </div>
          </div>
        </div>
      </div>

      <div
        class="flex h-full w-7/12 flex-col justify-center gap-4 p-4 max-md:w-full max-md:gap-2"
      >
        <span
          class="relative inline-flex items-center text-xs font-semibold leading-0 dark:text-white text-blacktext max-md:font-medium max-sm:justify-center"
        >
          <span
            class="before:mr-2 before:block before:h-1.5 before:w-1.5 before:rounded-full before:bg-green-400 before:shadow-[0px_0px_0px_3px_rgba(34,197,94,0.5)] before:animate-pulse before:content-['']"
          ></span>
          Available for work
        </span>

        <h1
          class="text-4xl font-black leading-none text-blacktext  dark:text-white max-xl:text-3xl max-lg:text-2xl  max-sm:text-center"
        >
          {staticData.data.profileName} 👋
        </h1>
        <p
          class="mb-0 text-lg font-semibold leading-8 text-blacktext dark:text-gray-200 max-xl:text-base"
        >
          <span
            class="bg-linear-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent   dark:from-riptide-300 dark:to-mint-200"
            >{staticData.data.profileTitle}</span
          > with <span
            class="bg-linear-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent  dark:from-riptide-300 dark:to-mint-200"
            >8 years of experience</span
          >, passionate about development, technology, and coffee that sparks ideas. I love bringing digital projects to life. 🚀☕
        </p>

        <div class="flex gap-4 max-sm:flex-col max-sm:items-center">
          <Button
            link={"mailto:" + staticData.data.email}
            text={staticData.data.contactSectionButtonText}
            iconName={staticData.data.emailIconName}
          />
          <Button
            link={staticData.data.profileLink}
            text="About Me"
            iconName="person"
            variant="dark"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="mx-auto grid max-w-7xl grid-cols-2 grid-rows-4 max-sm:gap-3 gap-4 max-md:h-[80vh] max-sm:h-[900px] max-xl:h-[550px] xl:h-[700px] md:grid-cols-4 md:grid-rows-2"
  >
    <div
      class="col-start-2 row-start-2 flex flex-col gap-3 rounded-2xl border border-emerald-50 bg-linear-to-r from-riptide-200 to-mint-200 p-8 dark:border-zinc-800 dark:border-2 dark:bg-zinc-800 dark:bg-gradient-radial dark:from-riptide-500 dark:to-mint-500 max-md:gap-0 max-xl:p-5 max-md:p-4 max-lg:gap-1 md:col-start-4"
    >
      <div class="flex flex-col-reverse items-start gap-4 max-md:gap-2">
        <Heading text="Beyond the Code" level={3} />
      </div>

      <div class="overflow-y-auto">
        <Hobbies />
      </div>
    </div>

    <div
      class="col-start-1 row-start-2 rounded-2xl bg-linear-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 hover:to-mint-300/30 dark:hover:to-mint-600/30 p-[.2rem] transition-all ease-in duration-150 hover:scale-105 hover:shadow-[0_20px_50px_rgba(13,188,130,0.4)] z-40 md:col-start-3"
    >
      <div class="h-full w-full overflow-hidden rounded-2xl dark:bg-zinc-900">
        <div
          class="relative h-full w-full overflow-hidden rounded-2xl  bg-linear-to-tr from-riptide-100 to-white dark:from-transparent dark:bg-linear-to-bl dark:to-transparent "
        >
          <a
            target="_blank"
            href={staticData.data.github}
            aria-label="View this site's code repository on GitHub"
          >
            <div
              class="relative flex h-full flex-col gap-8 p-8 dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] before:absolute before:left-30 before:bottom-30 before:h-[30%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-90 before:transition before:z-0 max-xl:p-5 max-md:p-4 xl:before:bottom-10"
            >
              <div class="z-2">
                <Heading text="Do you like this site's design?" level={3}/>
              </div>

              <Icon
                class="absolute -bottom-10 left-30 size-50 text-mint-500/30 group-hover:animate-pulse ease-in-out max-sm:left-10 max-md:left-30 xl:size-56 xl:-bottom-5 xl:-right-24"
                name="github"
                aria-hidden="true"
              />
            </div>
          </a>
        </div>
      </div>
    </div>

    <div
      class="col-span-2 col-start-1 row-start-1 rounded-2xl bg-linear-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5  hover:to-mint-300/30 dark:hover:to-mint-600/30 p-[.2rem] md:col-start-3"
    >
      <article
        class="group relative z-0 flex h-full w-full flex-col overflow-hidden rounded-2xl bg-linear-to-tr from-riptide-100 to-mint-100 p-6 transition hover:shadow-[0_10px_50px_rgba(13,188,130,0.2)] dark:bg-linear-to-r dark:from-mint-900 dark:to-mint-950 dark:overflow-hidden max-md:p-4 gap-6 max-md:gap-3 max-lg:gap-4 dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] before:absolute before:left-30 before:-bottom-0 before:h-[80%] before:aspect-square before:rounded-full before:blur-3xl dark:before:opacity-80 before:opacity-30 before:-z-10 before:transition"
      >
        <div class="flex items-center gap-4 max-md:gap-2">
          <Icon
            class="text-3xl dark:text-white text-mint-500 max-md:text-2xl max-sm:text-sm"
            name="dashboard"
            aria-hidden="true"
          />
          <Heading text="Tech" textGradient="Stack" level={3} />
        </div>
        <div class="overflow-y-auto">
          <Tools />
        </div>
      </article>
    </div>

    <div
      class="col-span-2 row-span-2 rounded-2xl bg-linear-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 p-[.2rem] hover:to-mint-300/30 dark:hover:to-mint-600/30 md:col-start-1 md:row-start-1"
    >
      <article
        class="group relative flex h-full flex-col justify-start overflow-hidden rounded-2xl bg-linear-to-br from-riptide-100 to-white dark:from-mint-950 dark:to-zinc-950 p-8 transition-all hover:shadow-[0_20px_50px_rgba(13,188,130,0.4)] max-md:p-6 dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] before:absolute before:left-1/2 before:bottom-30 before:h-[30%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-70 before:transition before:-z-0 hover:before:animate-pulse xl:before:bottom-2/5"
      >
        <a
          href="#projects"
          class="absolute left-0 top-0 z-40 h-full w-full bg-transparent"
          aria-label="View projects section"></a>
        <div class="flex items-center gap-4 max-md:gap-2">
          <Icon
            class="text-3xl dark:text-white text-mint-500 max-md:text-2xl max-sm:text-xl"
            name="code"
            aria-hidden="true"
          />
          <Heading text="Projects" level={3}/>
        </div>
        <p
          class="z-2 my-6 text-lg font-semibold leading-6 dark:text-gray-200 text-blacktext max-xl:text-base max-w-[90%] max-md:max-w-[85%]"
        >
          I love <span
            class="bg-linear-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent  dark:from-riptide-300 dark:to-mint-200"
            >turning ideas into real projects.</span
          >
          <br /> Here I show you some of the <span
            class="bg-linear-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent  dark:from-riptide-300 dark:to-mint-200"
            >developments</span
          > I've worked on, applying technology, design, and lots of creativity.
          <span
            class="bg-linear-to-r from-riptide-500 to-mint-500  font-black  bg-clip-text text-transparent  dark:from-riptide-300 dark:to-mint-200"
            >Check them out!</span
          >
        </p>
        <img
          class="relative left-0 z-0 mt-40 w-full object-cover transition-all ease-in-out duration-500 group-hover:rotate-2 group-hover:scale-185 max-xl:mt-28 max-lg:mt-10 max-sm:mt-0 max-md:scale-100 max-sm:scale-125 scale-180 max-md:group-hover:scale-105 before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:absolute before:left-30 before:-bottom-0 before:h-[80%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-80 before:-z-10 before:transition"
          src={staticData.data.portfolioImage}
          alt="View of two website interfaces with modern and dark design. The first screen shows the title 'Behind the Code' with a rocket and dark background, explaining the origin of a community software project. The second screen presents a platform for finding speakers, with an attractive design, expert photos, and a prominent search button."
          loading="lazy"
          width="480"
          height="320"
        />
      </article>
    </div>
  </div>
</section>