import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { ArrowLeft } from "lucide-react";
import { insightBySlug } from "@/lib/content";

export const Route = createFileRoute("/insights/$slug")({
  loader: ({ params }) => {
    const article = insightBySlug(params.slug);
    if (!article) throw notFound();
    return { article };
  },
  component: InsightArticle,
  head: ({ loaderData }) => ({
    meta: [
      {
        title: loaderData
          ? `${loaderData.article.title} — Daciora Consulting`
          : "Insights — Daciora Consulting",
      },
    ],
  }),
});

function InsightArticle() {
  const { article } = Route.useLoaderData();

  return (
    <article className="bg-paper text-ink-fg">
      <header className="bg-ink pt-28 pb-14 md:pt-36 md:pb-20">
        <div className="site-wrap max-w-3xl">
          <Link
            to="/insights"
            className="inline-flex min-h-11 items-center gap-2 text-[0.72rem] font-semibold tracking-[0.16em] text-muted uppercase no-underline hover:text-fg"
          >
            <ArrowLeft className="size-4" strokeWidth={1.5} />
            Insights
          </Link>
          <p className="label-kicker mt-8">
            {article.category} · {article.date} · {article.read}
          </p>
          <h1 className="mt-5 font-display text-section leading-[1.1] font-medium tracking-display text-fg md:text-display">
            {article.title}
          </h1>
          <p className="mt-6 text-lede leading-snug text-muted">{article.dek}</p>
        </div>
      </header>
      <img
        src={article.image}
        alt=""
        className="mx-auto h-56 w-full max-w-[1400px] object-cover md:h-80"
      />
      <div className="site-wrap max-w-2xl py-14 md:py-20">
        <div className="space-y-6 text-[1.08rem] leading-[1.7] text-ink-fg">
          {article.paragraphs.map((p) => (
            <p key={p.slice(0, 40)}>{p}</p>
          ))}
        </div>
        <hr className="hairline-light my-12" />
        <p className="text-sm leading-relaxed text-ink-muted">
          This note is unclassified and reflects the judgement of Daciora
          Consulting. It does not represent the position of any government or
          client.
        </p>
        <Link
          to="/contact"
          className="mt-10 inline-flex min-h-12 items-center bg-ink px-6 text-[0.78rem] font-semibold tracking-[0.16em] text-fg uppercase no-underline transition-[background-color,scale] duration-150 ease-out hover:bg-ink-soft active:scale-[0.96]"
        >
          Discuss this with a principal
        </Link>
      </div>
    </article>
  );
}
