About 2

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

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import type { AboutContent } from "../_types/about";
import type { Surface } from "../_types/common";
import { defaultAbout2Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

const tones = {
  dark: {
    border: "border-primary-foreground/10",
    muted: "text-primary-foreground/60",
    value: "text-secondary",
  },
  light: {
    border: "border-border",
    muted: "text-muted-foreground",
    value: "text-primary",
  },
};

/** An overlapping pair of photos with credentials, beside the story told as
 *  prose. Numbered items, if given instead, are shown as a static list. */
export default function About2({
  content = defaultAbout2Content,
  surface = "default",
}: {
  content?: AboutContent;
  surface?: Surface;
}) {
  const t = surface === "primary" ? tones.dark : tones.light;
  const [main, inset] = content.images;

  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-14 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-5">
            <div className="relative aspect-4/5 overflow-hidden rounded-lg">
              <Image
                alt={main.alt}
                className="object-cover"
                fill
                sizes="(min-width: 1024px) 40vw, 100vw"
                src={main.src}
              />
            </div>

            {inset && (
              <div
                className={cn(
                  "relative -mt-16 ml-auto hidden w-3/5 rounded-lg border-8 sm:block",
                  surface === "primary"
                    ? "border-primary"
                    : surface === "muted"
                      ? "border-muted"
                      : "border-background",
                )}
              >
                <div className="relative aspect-4/3 overflow-hidden rounded-sm">
                  <Image
                    alt={inset.alt}
                    className="object-cover"
                    fill
                    sizes="30vw"
                    src={inset.src}
                  />
                </div>
              </div>
            )}

            {content.credentials && content.credentials.length > 0 && (
              <div
                className={cn(
                  "mt-8 grid grid-cols-3 gap-6 border-t pt-6 sm:mt-4",
                  t.border,
                )}
              >
                {content.credentials.map((credential) => (
                  <div key={credential.label}>
                    <p className={cn("font-display text-2xl", t.value)}>
                      {credential.value}
                    </p>
                    <p className={cn("mt-1 text-xs leading-snug", t.muted)}>
                      {credential.label}
                    </p>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="lg:col-span-7">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              title={content.title}
              tone={toneFor(surface)}
            />

            {content.body && content.body.length > 0 ? (
              <div className={cn("mt-8 space-y-5 leading-relaxed", t.muted)}>
                {content.body.map((paragraph) => (
                  <p key={paragraph.slice(0, 40)}>{paragraph}</p>
                ))}
              </div>
            ) : (
              <ol className={cn("mt-8 grid gap-6", t.muted)}>
                {content.items?.map((item) => (
                  <li className="flex gap-5" key={item.id}>
                    <span className="pt-1.5 font-mono text-xs opacity-60">
                      {item.id}
                    </span>
                    <div>
                      <p className={cn("font-display text-2xl", t.value)}>
                        {item.title}
                      </p>
                      <p className="mt-2 text-sm leading-relaxed">
                        {item.body}
                      </p>
                    </div>
                  </li>
                ))}
              </ol>
            )}

            {content.actions && content.actions.length > 0 && (
              <div className="mt-10 flex flex-wrap items-center gap-3">
                {content.actions.map((action, index) => (
                  <Button
                    className={cn(
                      "px-7 shadow-none",
                      index === 0
                        ? "border-none bg-primary text-primary-foreground hover:bg-primary/90"
                        : "border-input bg-background text-primary before:shadow-none hover:bg-muted",
                    )}
                    key={action.href}
                    render={<Link href={action.href} />}
                    size="xl"
                    variant={index === 0 ? "default" : "outline"}
                  >
                    {action.label}
                  </Button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}