---
import {
	ArrowUpRight,
	Code,
	Server,
	Building,
	Cloud,
	GraduationCap,
} from "@lucide/astro";
import { siteConfig } from "@/config/site.js";
import experiences from "@/collections/experiences.json";
import social from "@/collections/social.json";
import AboutExperience from "@/components/elements/AboutExperience.astro";
import Button from "@/components/ui/Button.astro";
import Layout from "@/layouts/Layout.astro";
import Toc from "@/components/widgets/Toc.astro";

// Manually define page table of contents structure
const headings = [
  { depth: 2, slug: "about-me", text: "About Me" },
  { depth: 2, slug: "expertise", text: "Expertise" },
  { depth: 2, slug: "experience", text: "Experience" },
  { depth: 2, slug: "education", text: "Education" },
  { depth: 2, slug: "lets-connect", text: "Let's Connect" },
];

const filtered = headings.filter(h => h.depth <= 3);

---

<Layout title="About Me">
  <!-- Mobile TOC -->
  <div class="block lg:hidden px-7 pt-6">
    <Toc headings={filtered} />
  </div>

  <!-- Main container -->
  <div class="relative site-container mx-auto my-8">
    <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 xl:gap-16">
      <!-- Left TOC - Fixed on desktop -->
      <aside class="relative hidden lg:block lg:w-40 xl:w-50 flex-shrink-0">
          <div class="toc-sticky-wrapper">
            <Toc headings={filtered} />
          </div>
      </aside>

      <!-- Right main content - Adaptive width -->
      <main class="relative flex-1 min-w-0 w-full lg:max-w-none">
        <div
          class="w-full"
          data-aos="fade-up-xs"
          data-aos-duration="500"
          data-aos-once="true"
        >
            <h2
              id="about-me"
              class="text-2xl font-brand tracking-tight sm:text-3xl lg:text-4xl"
            >
             About Me
            </h2>
            <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
      </div>

        <div
          class="flex items-center gap-3 mb-6"
          data-aos="fade-up-xs"
          data-aos-delay="100"
          data-aos-duration="500"
          data-aos-once="true"
        >
            <div class="flex items-center gap-3">
              <span class="font-brand text-[24px] text-neutral-700 dark:text-neutral-100">Alexandre</span>
              <span class="text-[0.75em] text-neutral-400">|</span>
              <a href={siteConfig.social.github} class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 text-sm" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4.5 h-4.5 fill-current">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
                @vorpax
              </a>
            </div>
        </div>

        <p
          class="text-2xl mt-2 mb-2 font-brand italic text-left text-primary-strong dark:text-primary-light"
          data-aos="fade-up-xs"
          data-aos-delay="200"
          data-aos-duration="500"
          data-aos-once="true"
        >"Bridging business strategy with technical implementation."</p>

        <div
          class="social"
          data-aos="fade-up-xs"
          data-aos-delay="300"
          data-aos-duration="600"
          data-aos-once="true"
        >
             <div class="social-list flex flex-wrap gap-2 items-center justify-start mt-6 mb-8">
                {social
                  .filter(item => item.isShow !== false)
                  .map((item, index) => (
                    <a
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="social-item relative group overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-2 hover:rotate-[-6deg] hover:shadow-lg"
                      data-aos="fade-up-xs"
                      data-aos-delay={400 + (index * 50)}
                      data-aos-duration="400"
                      data-aos-once="true"
                    >
                      <img
                        src={item.image}
                        alt={item.name}
                        class="w-[96px] h-[96px] rounded-xl object-cover transition-transform duration-300 group-hover:scale-105"
                      />
                      <div class="absolute bottom-[10px] left-[12px] z-10">
                        <div class="social-name font-semibold text-[10px] text-white drop-shadow-md">
                          {item.name}
                        </div>
                        <div class="social-username text-[9px] text-white/85 drop-shadow-sm">
                          @{item.username}
                        </div>
                      </div>
                    </a>
                  ))
                }
             </div>
        </div>

        <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>

        <p
          class="text-neutral-700 pb-4 pt-2 leading-[1.8] dark:text-neutral-200"
          data-aos="fade-up-xs"
          data-aos-delay="100"
          data-aos-duration="500"
          data-aos-once="true"
        >
          Started in business prep school, now at HEC Paris. Self-taught in infrastructure and development. I bridge business strategy with technical implementation.
        </p>

        <div
          class="mt-8 mb-16 flex item-center justify-start gap-3"
          data-aos="fade-up-xs"
          data-aos-delay="200"
          data-aos-duration="500"
          data-aos-once="true"
        >
              <Button url={siteConfig.social.linkedin} type="fill"> LinkedIn <ArrowUpRight size={16} /> </Button>
              <Button url={siteConfig.social.github}> GitHub <ArrowUpRight size={16} /> </Button>
        </div>

        <div class="w-full border-b-1 border-dashed border-b-neutral-200 dark:border-b-neutral-700 mt-4 mb-8"></div>
          <section>
              <h2
                id="expertise"
                class="mt-8 mb-2 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
                data-aos="fade-up-xs"
                data-aos-duration="500"
                data-aos-once="true"
              >Expertise</h2>
              <div
                class="list flex flex-wrap gap-3 mt-4 mb-12 w-full items-center justify-start"
                data-aos="fade-up-xs"
                data-aos-delay="100"
                data-aos-duration="600"
                data-aos-once="true"
              >
                <!-- Infrastructure -->
                <div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800 dark:text-neutral-200">
                  <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
                    <Server size={22} />
                    <div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
                      Infrastructure
                    </div>
                  </div>
                </div>
                <!-- Fullstack Development -->
                <div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
                  <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
                    <Code size={22} />
                    <div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
                      Fullstack Development
                    </div>
                  </div>
                </div>
                <!-- Business Strategy -->
                <div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
                  <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
                    <Building size={22} />
                    <div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
                      Business Strategy
                    </div>
                  </div>
                </div>
                <!-- DevOps -->
                <div class="item flex justify-start items-start flex-grow-0 flex-shrink-0 overflow-hidden gap-2 px-5 py-4 rounded-xl bg-gradient-to-b from-[f7f8f0] to-[#f1f2f9] dark:from-gray-900 dark:to-gray-800">
                  <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 gap-2">
                    <Cloud size={22} />
                    <div class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-neutral-700 dark:text-neutral-200">
                      DevOps
                    </div>
                  </div>
                </div>
              </div>
          </section>

        <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>

      <section class="experience">
        <h2
          id="experience"
          class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
          data-aos="fade-up-xs"
          data-aos-duration="500"
          data-aos-once="true"
        >
          Experience
        </h2>
        <div
          class="px-5 py-10"
          data-aos="fade-up-xs"
          data-aos-delay="100"
          data-aos-duration="600"
          data-aos-once="true"
        >
          {
            experiences.map((experience, index) => {
              return (
                <div
                  class="pb-10 border-l border-dashed border-gray-200 last:border-l-0 dark:border-neutral-500"
                  data-aos="fade-up-xs"
                  data-aos-delay={200 + (index * 100)}
                  data-aos-duration="500"
                  data-aos-once="true"
                >
                  <AboutExperience
                    dates={experience.dates}
                    role={experience.role}
                    company={experience.company}
                    description={experience.description}
                    logo={experience.logo}
                  />
                </div>
              )
            })
          }
        </div>
      </section>

        <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-4 mb-8"></div>

      <section class="education">
        <h2
          id="education"
          class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
          data-aos="fade-up-xs"
          data-aos-duration="500"
          data-aos-once="true"
        >
          Education
        </h2>
        <div
          class="space-y-4 mt-6"
          data-aos="fade-up-xs"
          data-aos-delay="100"
          data-aos-duration="600"
          data-aos-once="true"
        >
          <div class="flex items-start gap-3">
            <GraduationCap size={20} class="mt-1 text-primary dark:text-primary-light" />
            <div>
              <p class="font-medium text-neutral-800 dark:text-neutral-100">HEC Paris</p>
              <p class="text-sm text-neutral-600 dark:text-neutral-400">M1 - Master in Management</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <GraduationCap size={20} class="mt-1 text-primary dark:text-primary-light" />
            <div>
              <p class="font-medium text-neutral-800 dark:text-neutral-100">Sorbonne University</p>
              <p class="text-sm text-neutral-600 dark:text-neutral-400">Bachelor's in Mathematics</p>
            </div>
          </div>
        </div>
      </section>

        <div class="w-full border-b-1 border-dashed border-b-gray-200 dark:border-b-neutral-700 mt-12 mb-8"></div>

      <section>
        <h2
          id="lets-connect"
          class="mt-12 mb-4 text-[28px] text-neutral-800 dark:text-neutral-200 font-brand"
          data-aos="fade-up-xs"
          data-aos-duration="500"
          data-aos-once="true"
        >Let's Connect</h2>
        <p
          class="text-sm leading-6 text-neutral-700 dark:text-neutral-300"
          data-aos="fade-up-xs"
          data-aos-delay="100"
          data-aos-duration="500"
          data-aos-once="true"
        >
          Reach out on <a
            href={siteConfig.social.linkedin}
            target="_blank"
            class="text-primary underline dark:text-primary-light">LinkedIn</a
          > or check out my work on <a href={siteConfig.social.github} target="_blank" class="text-primary underline dark:text-primary-light"
            >GitHub</a
          >.
        </p>
        <p class="text-sm leading-6 text-neutral-700 dark:text-neutral-300 mt-2">
          Email: <span class="text-primary dark:text-primary-light">{siteConfig.mail}</span>
        </p>
      </section>
      </main>
    </div>
  </div>
</Layout>

<style>
.toc-sticky-wrapper {
  position: sticky;
  top: 8rem;
}
</style>