import type { Metadata } from "next";
import Link from "next/link";
import { CtaBand } from "@/components/cta-band";
import { Eyebrow, Section } from "@/components/section";
import { posts } from "@/lib/content";

export const metadata: Metadata = {
  title: "Insights",
  description:
    "Essays from The Agentic Cloud on agentic runtimes, attention-free fabrics, and FedRAMP High afterlives.",
};

export default function InsightsPage() {
  return (
    <>
      <Section className="pt-16 md:pt-24">
        <Eyebrow>Insights</Eyebrow>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
          Writing for the architecture review, not the feed.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          The thesis, the runtime, and the trust plane — at a length that
          survives a change-control board.
        </p>
      </Section>
      <Section className="pt-0">
        <div className="divide-y divide-white/10 border-y border-white/10">
          {posts.map((p) => (
            <Link
              key={p.slug}
              href={`/insights/${p.slug}`}
              className="block py-8 transition-colors hover:bg-white/5"
            >
              <p className="font-mono text-[11px] text-muted-foreground">
                {p.date} · {p.reading} · {p.tags.join(" · ")}
              </p>
              <h2 className="mt-2 font-heading text-3xl">{p.title}</h2>
              <p className="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                {p.dek}
              </p>
            </Link>
          ))}
        </div>
      </Section>
      <CtaBand />
    </>
  );
}