import Link from "next/link";
import { Navigation } from "@/components/navigation";
import { BlogCard } from "@/components/blog-card";
import { ProjectCard } from "@/components/project-card";
import { getBlogPosts, getProjects } from "@/lib/content";
import { ArrowRight } from "lucide-react";

export default function Home() {
  const allPosts = getBlogPosts();
  const recentPosts = allPosts.slice(0, 3);
  const allProjects = getProjects();
  const recentProjects = allProjects.slice(0, 3);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-6 py-16 max-w-5xl">
        <section className="mb-24">
          <h1 className="text-5xl font-bold text-foreground mb-6">
            Hi, I'm <span className="text-primary">Alex Muszynski</span>.
          </h1>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl leading-relaxed">
            I'm a tinkerer that works in the realm of software. Welcome to my
            portfolio where I share my projects and thoughts on tech.
          </p>
          <Link
            href="/about"
            className="inline-flex items-center gap-2 text-lg font-medium text-foreground hover:text-primary transition-colors"
          >
            Learn more about me
            <ArrowRight size={20} />
          </Link>
        </section>

        <section className="mb-24">
          <div className="flex items-center justify-between mb-10">
            <h2 className="text-3xl font-bold text-foreground">Recent Posts</h2>
            <Link
              href="/blog"
              className="text-base text-muted-foreground hover:text-foreground transition-colors"
            >
              View all posts
            </Link>
          </div>
          <div className="grid gap-10">
            {recentPosts.map((post) => (
              <BlogCard key={post.slug} post={post} />
            ))}
          </div>
        </section>

        <section>
          <div className="flex items-center justify-between mb-10">
            <h2 className="text-3xl font-bold text-foreground">
              Recent Projects
            </h2>
            <Link
              href="/projects"
              className="text-base text-muted-foreground hover:text-foreground transition-colors"
            >
              View all projects
            </Link>
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {recentProjects.map((project) => (
              <ProjectCard key={project.slug} project={project} />
            ))}
          </div>
        </section>
      </main>
    </div>
  );
}