Blog 8

import Image from "next/image";
import Link from "next/link";

import { cn } from "@/lib/utils";

import type { BlogGridContent } from "../_types/blog";
import type { Surface } from "../_types/common";
import { defaultBlog8Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** A three-across grid of article cards with image, standfirst and byline. */
export default function Blog8({
  content = defaultBlog8Content,
  surface = "muted",
}: {
  content?: BlogGridContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <SectionHeader
          className="border-border border-b pb-8"
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {content.posts.map((post) => (
            <article
              className="group flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors hover:border-input"
              key={post.href}
            >
              <div className="relative aspect-3/2 overflow-hidden">
                <Image
                  alt={post.image.alt}
                  className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                  fill
                  sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                  src={post.image.src}
                />
              </div>

              <div className="flex flex-1 flex-col p-6">
                <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
                  {post.category}
                </p>
                <h3 className="mt-3 font-display text-2xl text-primary">
                  <Link
                    className="transition-colors hover:text-primary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    href={post.href}
                  >
                    {post.title}
                  </Link>
                </h3>
                <p className="mt-3 flex-1 text-muted-foreground text-sm leading-relaxed">
                  {post.excerpt}
                </p>
                <p className="mt-6 border-border border-t pt-4 text-muted-foreground text-xs">
                  {[post.author, post.date, post.readTime]
                    .filter(Boolean)
                    .join(" · ")}
                </p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}