Blog 7

import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

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

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

/** The lead article: a wide image beside its title, standfirst and byline. */
export default function Blog7({
  content = defaultBlog7Content,
  surface = "default",
}: {
  content?: BlogFeaturedContent;
  surface?: Surface;
}) {
  const { post } = content;

  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)}
        />

        <Link
          className="group mt-10 grid gap-8 lg:grid-cols-12 lg:gap-12"
          href={post.href}
        >
          <div className="relative aspect-3/2 overflow-hidden rounded-lg lg:col-span-7">
            <Image
              alt={post.image.alt}
              className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
              fill
              priority
              sizes="(min-width: 1024px) 58vw, 100vw"
              src={post.image.src}
            />
          </div>

          <div className="flex flex-col justify-center lg:col-span-5">
            <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
              <span className="size-1 bg-secondary" />
              {post.category}
            </p>
            <h3 className="mt-5 font-display text-3xl text-primary leading-[1.1] sm:text-4xl">
              {post.title}
            </h3>
            <p className="mt-4 text-muted-foreground leading-relaxed">
              {post.excerpt}
            </p>
            <p className="mt-6 text-muted-foreground text-sm">
              {[post.author, post.date, post.readTime]
                .filter(Boolean)
                .join(" · ")}
            </p>
            <span className="mt-6 inline-flex items-center gap-2 text-primary text-sm underline-offset-4 group-hover:underline">
              {content.linkLabel}
              <ArrowUpRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </span>
          </div>
        </Link>
      </div>
    </section>
  );
}