---
import "../styles/global.css"
import Layout from "../layouts/Layout.astro"
import NavigationCard from '../components/NavigationCard.astro';
import { ArrowLeft, Construction } from 'lucide-astro';

const navItems = [
  {
    href: "/",
    icon: ArrowLeft,
    heading: "Home",
    content: "Go back"
  },
];
---

<Layout>
  <section class="max-w-4xl mb-20 sm:mb-28">
    <div class="flex items-center gap-4 mb-6">
      <Construction class="w-12 h-12 sm:w-16 sm:h-16 text-neutral-600 dark:text-neutral-400" />
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] text-neutral-900 dark:text-neutral-100">
        Work in Progress
      </h2>
    </div>
    <p class="text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl mb-6">
      This page is currently under construction. I'm working hard to bring you something amazing, but it's not quite ready yet.
    </p>
    <p class="text-base sm:text-lg text-neutral-500 dark:text-neutral-500 leading-relaxed max-w-2xl">
      Check back soon for updates, or feel free to explore other parts of the site while you wait.
    </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>
