---
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import BlogCard from '../components/svelte/BlogCard.svelte'
import Skills from '../components/svelte/Skills.svelte'
import { buttonVariants } from '@/lib/button-variants'
import Logo from '../components/svelte/Logo.svelte'
import Layout from '@/layouts/Layout.astro'
import { getRecentPosts, getFeaturedProjects } from '@/lib/data-utils'
import { SITE } from '@/consts'
import ProjectCard from '../components/svelte/ProjectCard.svelte'
import IconGit from '~icons/simple-icons/git'
import IconGraduationCap from '~icons/lucide/graduation-cap'
import IconWrench from '~icons/lucide/wrench'
import IconFolderCode from '~icons/lucide/folder-code'
import IconPenLine from '~icons/lucide/pen-line'
import Timeline from '../components/svelte/Timeline.svelte'
import EducationItem from '../components/svelte/EducationItem.svelte'
import { education } from '@/data/education'
import ContactForm from '../components/svelte/ContactForm.svelte'
import IconMail from '~icons/lucide/mail'

const blog = await getRecentPosts(3)
const featuredProjects = await getFeaturedProjects()
const currentUrl = Astro.url;
const turnstileSitekey = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
---

<Layout canonicalUrl={currentUrl}>
  <PageHead slot="head" title="Patrick Jaroszewski | Software Engineer" />
  <!-- Cloudflare Turnstile - Only loaded on homepage -->
  <link slot="head" rel="preconnect" href="https://challenges.cloudflare.com" />
  <script slot="head" is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" defer></script>
  <section class="flex flex-col gap-y-12 px-4 py-8 sm:px-8 lg:px-16">
    <div
      class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:gap-8 sm:text-left"
    >
      <div class="relative overflow-hidden rounded-lg sm:shrink-0 sm:overflow-hidden sm:rounded-lg">
        <Logo
          class="h-54 w-32 object-cover sm:w-32 md:w-40 lg:w-48 "
        />
      </div>
      <div class="mt-8 sm:mt-0 sm:max-w-xl">
        <h1
          class="font-custom text-foreground text-start text-4xl font-extrabold sm:text-5xl"
        >
          {SITE.title}
        </h1>
        <p class="text-md text-foreground mt-4 text-start font-sans" title="description" aria-label="description">
          Full Stack Developer & DevOps Engineer passionate about building scalable web applications and robust infrastructure. A <span class="animate-highlight font-semibold">relentless learner</span> driven by curiosity — skilled in modern web technologies, self-hosted infrastructure, and automation. Exploring new tech, sharing what I learn, and open to software engineering and DevOps opportunities.
        </p>
        <p class="text-md text-foreground mt-4 text-start font-sans flex items-center gap-1.5 flex-wrap">
          <span class="animate-underline">Explore my projects</span> on my self-hosted
          <Link href="https://git.jaroszew.ski/patrick" external class="inline-flex items-center gap-1.5 text-primary hover:underline">
            git forge.
            <IconGit class="size-4 text-primary" />
          </Link>
        </p>
      </div>
    </div>

    <section class="relative" aria-labelledby="skills-title">
      <h2
        id="skills-title"
        class="font-custom text-foreground text-2xl font-bold flex items-center gap-2"
        title="skills"
        aria-label="skills"
        role="heading"
      >
        <IconWrench class="size-5" />
        Skills & Technologies
      </h2>
      <p class="text-muted-foreground text-sm" aria-label="skills description">
        Here are some of the technologies I've been working with:
      </p>
      <div class="mt-8">
        <Skills client:load />
      </div>
    </section>

    <section class="flex flex-col gap-y-4" aria-labelledby="featured-projects-title" role="region">
      <div class="relative">
        <h2
          id="featured-projects-title"
          class="font-custom text-foreground text-2xl font-bold flex items-center gap-2"
        >
          <IconFolderCode class="size-5" />
          Featured Projects
        </h2>
        <p class="text-muted-foreground text-sm">
          A selection of projects I've worked on.
        </p>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
        {
          featuredProjects.map((project) => (
            <ProjectCard
              id={project.id}
              name={project.data.name}
              description={project.data.description}
              image={typeof project.data.image === 'string' ? project.data.image : project.data.image.src}
              tags={project.data.tags}
              endDate={project.data.endDate}
              client:load
            />
          ))
        }
      </div>
      <div class="flex justify-center">
        <Link
          href="/projects"
          class={buttonVariants({ variant: 'ghost' }) + ' group'}
        >
          View all projects <span
            class="ml-1.5 transition-transform group-hover:translate-x-1"
            >&rarr;</span
          >
        </Link>
      </div>
    </section>

    <section class="flex flex-col gap-y-4" aria-labelledby="latest-posts-title" role="region">
      <div class="relative" aria-labelledby="latest-posts-title">
        <h2
          id="latest-posts-title"
          class="font-custom text-foreground text-2xl font-bold flex items-center gap-2"
          title="latest blog posts"
          aria-label="latest blog posts"
        >
          <IconPenLine class="size-5" />
          Latest Blog Posts
        </h2>
        <p class="text-muted-foreground text-sm" aria-label="blog description">
          Here are some of my latest blog posts. You can find more on my blog
          page.
        </p>
      </div>
      <ul class="flex flex-col gap-y-4">
        {
          blog.map((post) => (
            <li>
              <BlogCard entry={post} />
            </li>
          ))
        }
      </ul>
      <div class="flex justify-center" aria-label="see all posts">
        <Link
          href="/blog"
          class={buttonVariants({ variant: 'ghost' }) + ' group'}
        >
          See all posts <span
            class="ml-1.5 transition-transform group-hover:translate-x-1"
            >&rarr;</span
          >
        </Link>
      </div>
    </section>

    <section class="flex flex-col gap-y-4" aria-labelledby="education-title" role="region">
      <div class="relative">
        <h2
          id="education-title"
          class="font-custom text-foreground text-2xl font-bold flex items-center gap-2"
        >
          <IconGraduationCap class="size-6" />
          Education
        </h2>
        <p class="text-muted-foreground text-sm">
          My academic background and achievements.
        </p>
      </div>
      <div class="mt-4">
        <Timeline client:load>
          {education.map(entry => (
            <EducationItem entry={entry} client:load />
          ))}
        </Timeline>
      </div>
    </section>

    <section class="flex flex-col gap-y-4" aria-labelledby="contact-title" role="region" id="contact">
      <div class="relative">
        <h2
          id="contact-title"
          class="font-custom text-foreground text-2xl font-bold flex items-center gap-2"
        >
          <IconMail class="size-5" />
          Get In Touch
        </h2>
        <p class="text-muted-foreground text-sm">
          Interested in working together? Send me a message and I'll get back to you soon.
        </p>
      </div>
      <div class="mt-4">
        <div class="contact-card w-full rounded-xl border bg-card p-6 sm:p-8 shadow-md">
          <div class="mx-auto max-w-2xl">
            <ContactForm client:load sitekey={turnstileSitekey} />
          </div>
        </div>
      </div>
    </section>
  </section>
</Layout>

<style>
  .animate-highlight {
    background: linear-gradient(to right, var(--color-primary) 50%, transparent 50%);
    background-size: 201% 100%;
    background-position: 100% 0;
    animation: highlight 0.6s ease-out 1.2s forwards;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
  }

  .animate-underline {
    position: relative;
    display: inline-block;
  }

  .animate-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    animation: underline 0.5s ease-out 3.2s forwards;
  }

  @keyframes highlight {
    to {
      background-position: 0 0;
      color: var(--color-primary-foreground);
    }
  }

  @keyframes underline {
    to {
      transform: scaleX(1);
    }
  }

  /* Contact card gradient effect */
  .contact-card {
    position: relative;
    overflow: hidden;
  }

  .contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(315deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }

  :global(.dark) .contact-card::before {
    background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
  }
</style>
