Related 1

import Link from "next/link";

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

import type { Surface } from "../_types/common";
import type { RelatedContent } from "../_types/related";
import { defaultRelated1Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** Three text-only link cards on a hairline rule: "more from…", "nearby". */
export default function Related1({
  content = defaultRelated1Content,
  surface = "muted",
}: {
  content?: RelatedContent;
  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"
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        {/* Cards sit on a `gap-px` parent whose background is the rule
            colour, so each one repaints the band's own surface. */}
        <div className="mt-10 grid gap-px overflow-hidden rounded-lg bg-border sm:grid-cols-3">
          {content.items.map((item) => (
            <Link
              className={cn(
                "group p-8 transition-colors hover:bg-card",
                surfaceClass[surface],
              )}
              href={item.href}
              key={item.href}
            >
              <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
                {item.eyebrow}
              </p>
              <h3 className="mt-4 font-display text-2xl text-primary">
                {item.title}
              </h3>
              <p className="mt-3 text-muted-foreground text-sm leading-relaxed">
                {item.description}
              </p>
              {item.meta && (
                <p className="mt-5 text-muted-foreground text-xs">
                  {item.meta}
                </p>
              )}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}