Article cards

import { ArrowRight } from "lucide-react";

const posts = [
  { href: "/journal/late-payment-reminders", cover: "/journal/reminders.jpg", topic: "Guides",
    title: "How to word a late-payment reminder without losing the client", date: "2026-10-02", readingTime: "6 min read" },
  { href: "/journal/day-rate-or-project-fee", cover: "/journal/pricing.jpg", topic: "Pricing",
    title: "Day rate or project fee? A simple way to decide", date: "2026-09-24", readingTime: "8 min read" },
  { href: "/journal/recurring-proration", cover: "/journal/recurring.jpg", topic: "Product",
    title: "Recurring invoices now handle mid-month changes", date: "2026-09-17", readingTime: "3 min read" },
];

const formatDate = (iso: string) =>
  new Date(iso).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });

export function ArticleCards() {
  return (
    <section aria-labelledby="journal-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <h2 id="journal-title" className="text-3xl font-semibold tracking-tight text-fg">From the journal</h2>
          <a href="/journal" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
            All articles <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>
        <div className="mt-10 grid gap-x-6 gap-y-10 md:grid-cols-3">
          {posts.map((p) => (
            <a key={p.href} href={p.href} className="group flex flex-col gap-3">
              <img src={p.cover} alt="" className="aspect-[16/10] w-full rounded-lg border border-border bg-surface object-cover transition group-hover:border-border-strong" />
              <span className="w-fit rounded-full bg-surface-2 px-2 py-0.5 text-xs font-medium text-fg-muted">{p.topic}</span>
              <h3 className="text-base font-semibold leading-snug tracking-tight text-fg group-hover:underline group-hover:underline-offset-4">{p.title}</h3>
              <p className="text-xs text-fg-subtle">
                <time dateTime={p.date}>{formatDate(p.date)}</time> · {p.readingTime}
              </p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}