import { createFileRoute, Link } from "@tanstack/react-router";
import { PageIntro } from "@/components/site/layout";
import { INSIGHTS } from "@/lib/content";

export const Route = createFileRoute("/insights")({
  component: InsightsPage,
  head: () => ({
    meta: [{ title: "Insights — Daciora Consulting" }],
  }),
});

function InsightsPage() {
  return (
    <>
      <PageIntro
        kicker="Insights"
        title="Writing for decision, not for display."
        lede="Selected notes from the practice. Most of our work remains with the client. What we publish is unclassified, and written to be argued with."
      />
      <section className="bg-paper text-ink-fg pb-20 md:pb-28">
        <div className="site-wrap divide-y divide-rule border-y border-rule">
          {INSIGHTS.map((item) => (
            <article key={item.slug} className="grid gap-8 py-10 md:grid-cols-12 md:py-14">
              <Link
                to="/insights/$slug"
                params={{ slug: item.slug }}
                className="md:col-span-5"
              >
                <img
                  src={item.image}
                  alt=""
                  className="aspect-16/10 w-full object-cover"
                  loading="lazy"
                />
              </Link>
              <div className="flex flex-col justify-center md:col-span-7">
                <p className="text-[0.68rem] font-semibold tracking-label text-ink-muted uppercase">
                  {item.category} · {item.date} · {item.read}
                </p>
                <h2 className="mt-3 font-display text-3xl leading-snug font-medium md:text-4xl">
                  <Link
                    to="/insights/$slug"
                    params={{ slug: item.slug }}
                    className="text-ink-fg no-underline hover:text-ink-muted"
                  >
                    {item.title}
                  </Link>
                </h2>
                <p className="mt-4 max-w-xl text-[1.05rem] leading-relaxed text-ink-muted">
                  {item.dek}
                </p>
              </div>
            </article>
          ))}
        </div>
      </section>
    </>
  );
}
