---
import SectionHeader from "@/components/elements/SectionHeader.astro";
import { Server, Code, GraduationCap } from "@lucide/astro";

interface Props {
  title?: string;
  description?: string;
}
const { title, description } = Astro.props;
---

<section class="py-8 sm:py-12 md:py-16 md:pb-12 site-container">
    <div class="space-y-6 sm:space-y-8 md:space-y-8">
      <SectionHeader title={title} description={description}/>
    </div>

    <div class="explore-content w-full relative mt-6 sm:mt-8">
        <div class="explore-list w-full relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
            <!-- Infrastructure -->
            <a href="/work/homelab" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
              data-aos="fade-up-sm"
              data-aos-delay="500"
              data-aos-duration="600"
              data-aos-once="true">
                <div class="content">
                    <h3>Infrastructure</h3>
                    <p>Self-hosted homelab with Kubernetes, monitoring, and PKI.</p>
                </div>
                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
                    <Server size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                </div>
            </a>

            <!-- Development -->
            <a href="/work/freelance" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
              data-aos="fade-up-sm"
              data-aos-delay="600"
              data-aos-duration="600"
              data-aos-once="true">
                <div class="content">
                    <h3>Development</h3>
                    <p>Fullstack projects with Python, Golang, and modern tooling.</p>
                </div>
                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
                    <Code size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                </div>
            </a>

            <!-- HEC IA -->
            <a href="/work/hec-ia" class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 h-[180px] sm:h-[200px] group"
              data-aos="fade-up-sm"
              data-aos-delay="700"
              data-aos-duration="600"
              data-aos-once="true">
                <div class="content">
                    <h3>HEC IA</h3>
                    <p>Making AI accessible to business students through workshops.</p>
                </div>
                <div class="absolute right-6 bottom-0 top-0 flex items-center opacity-20 group-hover:opacity-40 transition-opacity duration-300">
                    <GraduationCap size={100} stroke-width={1} class="text-primary dark:text-primary-light" />
                </div>
            </a>


        </div>
    </div>
</section>

<style>
    .content {
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        max-width: 65%;
        padding-left: 1rem;
        padding-right: 0.5rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        transition: all 0.3s ease-in-out;
        z-index: 1;
    }

    @media (min-width: 640px) {
        .content {
            max-width: 60%;
            padding-left: 1.25rem;
        }
    }

    @media (min-width: 768px) {
        .content {
            max-width: 55%;
            padding-left: 1.5rem;
        }
    }

    .content h3 {
        font-size: 1.25rem;
        line-height: 1.1;
        margin-bottom: 0.5rem;
        font-family: var(--font-brand);
        color: var(--color-neutral-800);
    }

    html.dark .content h3 {
        color: var(--color-neutral-100);
    }

    @media (min-width: 640px) {
        .content h3 {
            font-size: 1.5rem;
        }
    }

    @media (min-width: 768px) {
        .content h3 {
            font-size: 1.75rem;
        }
    }

    .content p {
        font-size: 0.75rem;
        line-height: 1.4;
        font-weight: 400;
        color: var(--color-neutral-500);
        margin-bottom: 0;
    }

    html.dark .content p {
        color: var(--color-neutral-400);
    }

    @media (min-width: 640px) {
        .content p {
            font-size: 0.8125rem;
        }
    }

    @media (min-width: 768px) {
        .content p {
            font-size: 0.875rem;
        }
    }

    .explore-item {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        justify-content: start;
        align-items: center;
        transition: all 0.3s ease-in-out;
    }

    a.explore-item:hover {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

    html.dark a.explore-item:hover {
        border-color: var(--color-primary-dark);
    }
</style>
