Process 4

import {
  ClipboardCheck,
  Handshake,
  Home,
  KeyRound,
  Search,
  Sparkles,
} from "lucide-react";
import Image from "next/image";

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

import type { Surface } from "../_types/common";
import type { ProcessContent, ProcessIcon } from "../_types/process";
import { defaultProcess4Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

const stepIcons: Record<ProcessIcon, typeof Search> = {
  clipboard: ClipboardCheck,
  handshake: Handshake,
  home: Home,
  key: KeyRound,
  search: Search,
  sparkles: Sparkles,
};

/** Header (and an optional photo) in a narrow column beside a 2×2 grid of
 *  numbered steps on a hairline rule. */
export default function Process4({
  content = defaultProcess4Content,
  surface = "muted",
}: {
  content?: ProcessContent;
  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">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-4">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />

            {content.image && (
              <div className="relative mt-10 hidden aspect-4/3 overflow-hidden rounded-lg lg:block">
                <Image
                  alt={content.image.alt}
                  className="object-cover"
                  fill
                  sizes="33vw"
                  src={content.image.src}
                />
              </div>
            )}
          </div>

          {/* Cells sit on a `gap-px` parent whose background is the rule
              colour, so each one repaints the band's own surface. */}
          <ol className="grid gap-px overflow-hidden rounded-lg bg-border lg:col-span-8 lg:grid-cols-2">
            {content.steps.map((step, index) => {
              const Icon = stepIcons[step.icon];

              return (
                <li
                  className={cn(
                    "group flex flex-col p-8 transition-colors hover:bg-card lg:p-10",
                    surfaceClass[surface],
                  )}
                  key={step.title}
                >
                  <div className="flex items-center justify-between">
                    <span className="flex size-11 items-center justify-center rounded-md border border-input text-primary transition-colors group-hover:border-primary group-hover:bg-primary group-hover:text-primary-foreground">
                      <Icon className="size-5" />
                    </span>
                    <span className="font-display text-4xl text-muted-foreground/40 transition-colors group-hover:text-secondary">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                  </div>

                  <h3 className="mt-8 font-display text-2xl text-primary">
                    {step.title}
                  </h3>
                  <p className="mt-3 text-muted-foreground text-sm leading-relaxed">
                    {step.body}
                  </p>
                </li>
              );
            })}
          </ol>
        </div>
      </div>
    </section>
  );
}