---
import "../styles/global.css"
import Layout from "../layouts/Layout.astro"
import NavigationCard from "../components/NavigationCard.astro"
import ExperienceCard from '../components/ExperienceCard.astro';
import { PencilRuler, LibraryBig, NotepadText, GraduationCap, Wrench, Feather, Briefcase, Mail, Github, Linkedin, ExternalLink } from 'lucide-astro';

const navItems = [
  {
    href: "/workshop", 
    icon: PencilRuler,
    heading: "Workshop",
    content: "From the theory to the implementation. What I build to understand."
  },
  {
    href: "/library",
    icon: LibraryBig, 
    heading: "Library",
    content: "Books and papers and resources I use to learn. What I read, and why it matters."
  },
  {
    href: "/notes",
    icon: NotepadText,
    heading: "Notes", 
    content: "My explorations into the fundamental nature of everything."
  }
];

const experiences = [
  {
    title: "Software Engineer Intern",
    company: "MigaLabs",
    period: "July 2025 - December 2025",
    location: "Barcelona (Spain)",
    achievements: [
      "Built monitoring tools to keep tabs on over a terabyte of Ethereum blockchain data - quality control at scale",
      "Designed validation systems that could handle different network upgrades, since each fork had its own rules to follow",
      "Worked the company's main dashboard using Next.js, turning complex blockchain data into something the team and customers could actually understand",
      "Studied deep the Ethereum specifications to figure out what \"correct\" data should look like across different network phases (phase0, Altair, Bellatrix, Capella...)"
    ],
    technologies: "Go • Next.js • Tailwind CSS • Ethereum"
  },
  {
    title: "Full-stack Developer", 
    company: "Avantiam Inc",
    period: "September 2023 - August 2024",
    location: "Figueres (Spain)",
    achievements: [
      "Built a multitenant company management platform from the ground up - one codebase serving over 100 local companies",
      "Developed HR tools, task management, and time tracking features that teams actually ended up using",
      "Worked with Laravel and Livewire to create real-time interfaces that felt responsive and modern",
      "Dealt the challenge of building productivity tools that didn't feel like corporate bloatware"
    ],
    technologies: "Laravel • PHP • JavaScript • Livewire • Alpine.js • Tailwind CSS"
  },
  {
    title: "Backend Developer Intern",
    company: "Niblu Group", 
    period: "Summer 2023",
    location: "Maribor (Slovenia)",
    achievements: [
      "Spent a summer in Slovenia through Erasmus+, working on an e-learning platform while navigating a new country alone at 17",
      "Built course delivery systems using FastAPI and Next.js, focusing on making educational content engaging",
      "Got hands-on experience with AWS and Docker, learning how to deploy properly instead of just making things work locally",
      "Collaborated on tools designed to make learning more accessible. It felt meaningful beyond just writing code"
    ],
    technologies: "Next.js • FastAPI • Python • Tailwind CSS • AWS • Docker"
  }
];

const contacts = [
  {
    label: "Email",
    value: "alejandro.laguna@epitech.eu",
    href: "mailto:alejandro.laguna@epitech.eu",
    icon: Mail
  },
  {
    label: "GitHub",
    value: "@alejandrolaguna20",
    href: "https://github.com/alejandrolaguna20",
    icon: Github
  },
  {
    label: "LinkedIn",
    value: "Alejandro Laguna",
    href: "https://linkedin.com/in/alejandro-laguna",
    icon: Linkedin
  }
];

---

<Layout>
  <section class="max-w-3xl mb-10 sm:mb-14">
    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">About</h1>
    <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
      Guilty of having too many interests and being unable to focus on a couple of them and making notable progress. Currently a second-year computer science student at the <a class="underline" href="https://www.epitech.eu/"> European Institute of Technology</a>, and Software Engineer Intern at <a class="underline" href="https://migalabs.io/"> Migalabs </a></p>
  </section>

  <section class="mb-12">
    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
      <Mail class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Get in Touch
    </h2>
    <div class="bg-neutral-50 dark:bg-neutral-800 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-700">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {contacts.map(contact => (
          <a 
            href={contact.href}
            class="flex items-center gap-3 p-4 bg-white dark:bg-neutral-700 rounded-xl border border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500 transition-colors group"
            target="_blank"
            rel="noopener noreferrer"
          >
            <contact.icon class="w-5 h-5 text-neutral-500 dark:text-neutral-400 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors" />
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">{contact.label}</p>
              <p class="text-sm text-neutral-600 dark:text-neutral-400 truncate">{contact.value}</p>
            </div>
            <ExternalLink class="w-4 h-4 text-neutral-400 dark:text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" />
          </a>
        ))}
      </div>
    </div>
  </section>

  <section class="mb-12 bg-neutral-50 dark:bg-neutral-800 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-700">
    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
      <GraduationCap class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Education
    </h2>
    <ul class="space-y-4">
      <li>
        <p class="text-base text-neutral-900 dark:text-neutral-100 font-medium">Bachelor + Master's Degree in Computer Science</p>
        <p class="text-sm text-neutral-600 dark:text-neutral-400">European Institute of Technology, class of 2029</p>
        <ul class="list-['-_'] pl-8 italic text-sm text-neutral-700 dark:text-neutral-300">
          <li> In progress </li>
        </ul>
      </li>
      <li>
        <p class="text-base text-neutral-900 dark:text-neutral-100 font-medium">Vocational Studies in Networking, Microcomputers and Operative Systems</p>
        <p class="text-sm text-neutral-600 dark:text-neutral-400">INS Cendrassos, class of 2024</p>
        <ul class="list-['-_'] pl-8 italic text-sm text-neutral-700 dark:text-neutral-300">
          <li> Erasmus+ Scholarship </li>
          <li> First of the class</li>
          <li> Student of the year </li>
        </ul>
      </li>
    </ul>
  </section>
  <section class="mb-12">
    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
      <Briefcase class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Experience
    </h2>
    <div class="grid sm:grid-cols-1 gap-6">
      {experiences.map(exp => (
        <ExperienceCard {...exp} />
      ))}
    </div>
  </section>
  <section class="mb-12">
    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
      <Wrench class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Tools I Use
    </h2>
    <code class="block bg-neutral-50 dark:bg-neutral-800 p-4 rounded-xl text-neutral-800 dark:text-neutral-200 overflow-x-auto border border-neutral-200 dark:border-neutral-700">
      <b>Languages:</b> C, Go, Python, Javascript/Typescript, PHP<br>
      <b>Frameworks & Libraries:</b> Astro, React, Preact, NextJS, Vue, NuxtJS, Express, FastAPI, TailwindCSS <br>
      <b>Databases:</b> MongoDB, PostgreSQL, MySQL/MariaDB, ClickHouse <br>
      <b>Tools:</b> Git, Bash, Linux, LaTeX, Typst, Neovim<br>
    </code>
  </section>

  <section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
      <Feather class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Projects, posts, thoughts...
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 gap-5">
      {navItems.map(item => (
        <NavigationCard
          href={item.href}
          icon={item.icon}
          heading={item.heading}
          content={item.content}
        />
      ))}
    </div>
  </section>
</Layout>