---
import Button from "../components/ui/Button.astro";
import { siteConfig } from "@/config/site";
import Layout from "@/layouts/Layout.astro";
import FeaturedWork from "../components/sections/FeaturedWork.astro";
import SocialCard from "@/components/cards/SocialCard.astro";
import AnimatedText from "@/components/ui/AnimatedText.astro";
import Explore from "@/components/sections/Explore.astro";
---

<Layout
title="Alexandre | Vorpax"
description="M1 HEC Paris | President HEC IA | Freelance Fullstack Developer | Infrastructure Enthusiast"
keywords="Alexandre, Portfolio, Developer, Infrastructure, Homelab, HEC Paris, Engineering"
>
  <div
    class="relative site-container z-20  w-full mx-auto mt-16 px-4 md:mt-18 lg:mt-20 xl:px-0"
  >
    <div class="relative w-full px-4 flex flex-col items-center justify-between md:flex-row mb-16 ">
      <div class="relative w-full md:max-w-[520px] md:w-1/2 text-center sm:text-left sm:-mt-8">
        <!-- Title - AnimatedText animation -->
        <h1 class="mb-4">
          <AnimatedText
            content="Hi, I'm Alexandre"
            delay={0.1}
            duration={0.5}
            stagger={0.08}
            class="text-5xl text-pri leading-tight md:text-4xl lg:text-6xl font-brand "
          />
        </h1>

        <!-- Tagline -->
        <div class="mb-4">
          <AnimatedText
            content="Business x Engineering x Infrastructure"
            delay={0.3}
            duration={0.5}
            stagger={0.02}
            class="text-xl font-medium text-primary dark:text-primary-light"
          />
        </div>

        <!-- Description -->
        <div class="mb-4">
          <AnimatedText
            content="M1 at HEC Paris. President of HEC IA. Freelance fullstack developer. Infrastructure enthusiast."
            delay={0.5}
            duration={0.5}
            stagger={0.015}
            class="text-base text-neutral-700 dark:text-neutral-300"
          />
        </div>

        <!-- Button - AOS animation -->
        <div
          class=""
          data-aos="fade-up-sm"
          data-aos-delay="900"
          data-aos-duration="500"
          data-aos-once="true"
        >
          <Button url={siteConfig.social.github} type="fill" className="m-auto mt-4 text-center sm:text-left sm:m-0 sm:mt-6 max-w-[200px]">
            View GitHub
          </Button>
        </div>

        <!-- Social Cards - AOS animation -->
        <div
          class="social mt-8 mb-8"
          data-aos="fade-up-sm"
          data-aos-delay="1000"
          data-aos-duration="600"
          data-aos-once="true"
        >
          <SocialCard displaySocialIds={[1, 2]}/>
        </div>
      </div>

      <!-- Empty space on the right for now, can add hero image later -->
      <div
        class="relative justify-end w-full mt-16 md:flex md:pl-10 md:w-1/2 md:mt-0 md:translate-y-4 xl:translate-y-0"
        data-aos="fade-left-sm"
        data-aos-delay="300"
        data-aos-duration="800"
        data-aos-once="true"
      >
      </div>
    </div>
  </div>

  <section
    class="mt-26 mb-12"
    data-aos="fade-up-sm"
    data-aos-delay="100"
    data-aos-duration="600"
    data-aos-once="true"
  >
    <Explore title="Explore" />
  </section>

  <section
    class="mt-26 mb-12"
    data-aos="fade-up-sm"
    data-aos-delay="100"
    data-aos-duration="600"
    data-aos-once="true"
  >
    <FeaturedWork title="Projects" description="What I've been working on." limit={3} />
  </section>

</Layout>
