import type { Metadata } from "next";
import Link from "next/link";
import { Container, Pill, SectionHeader } from "@/src/components/site";
import { NOTES } from "@/src/content/notes";

export const metadata: Metadata = {
  title: "Notes",
  description:
    "Evergreen engineering write-ups with diagrams: verification, architecture and testing.",
  alternates: { canonical: "/notes" },
};

export default function Page() {
  return (
    <Container className="py-16 md:py-24">
      <SectionHeader
        as="h1"
        kicker="/notes"
        title="Notes"
        lead="Evergreen engineering write-ups with diagrams. No client work, no hype."
      />
      <ul className="mt-12 max-w-3xl divide-y divide-border border-y border-border">
        {NOTES.map((note) => (
          <li key={note.slug}>
            <Link
              href={`/notes/${note.slug}`}
              className="group block py-8 hover:text-fg"
            >
              <p className="font-mono text-xs text-muted">
                <time dateTime={note.publishedOn}>{note.publishedOn}</time>
                {" · "}
                {note.readingMinutes} min read
              </p>
              <h2 className="!mb-2 !mt-2 !text-xl !leading-snug text-fg group-hover:text-accent md:!text-2xl">
                {note.title}
              </h2>
              <p className="!mb-4 text-base leading-relaxed text-muted">
                {note.summary}
              </p>
              <span className="flex flex-wrap gap-2">
                {note.tags.map((tag) => (
                  <Pill key={tag}>{tag}</Pill>
                ))}
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </Container>
  );
}