---
import "../styles/global.css"
import Layout from "../layouts/Layout.astro"
import NavigationCard from '../components/NavigationCard.astro';
import { Fingerprint, PencilRuler, LibraryBig, ScrollText } from 'lucide-astro';

const navItems = [
  {
    href: "/about",
    icon: Fingerprint,
    heading: "About",
    content: "Who am I, my academic and professional background, what drives this work."
  },
  {
    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: "/log",
    icon: ScrollText,
    heading: "Log",
    content: "Progress notes across study, work, and self, and some reflections."
  }
];
---
<Layout>
  <section class="max-w-4xl mb-20 sm:mb-28">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] mb-6 text-neutral-900 dark:text-neutral-100">
      A <span class="text-neutral-600 dark:text-neutral-400"> notebook </span> for <br>working things out.
    </h2>
    <p class="text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl">
      Unpolished notes, working prototypes, honest questions. A space for building understanding from the ground up. Trying to understand the world by writing and building.
    </p>
  </section>

  <section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
    <h2 id="navigation-heading" class="sr-only">Site navigation</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
      {navItems.map(item => (
        <NavigationCard
          href={item.href}
          icon={item.icon}
          heading={item.heading}
          content={item.content}
        />
      ))}
    </div>
  </section>
</Layout>
