Blog 9

import Image from "next/image";

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

import type { BlogArticleContent } from "../_types/blog";
import type { Surface } from "../_types/common";
import { defaultBlog9Content } from "./data";

const surfaceClass: Record<Surface, string> = {
  default: "bg-background text-foreground",
  muted: "bg-muted text-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
};

function telHref(phone: string): string {
  return `tel:${phone.replace(/[^\d+]/g, "")}`;
}

/** Article body in a reading column beside an author card. */
export default function Blog9({
  content = defaultBlog9Content,
  surface = "default",
}: {
  content?: BlogArticleContent;
  surface?: Surface;
}) {
  const { author } = 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">
        <div className="grid gap-14 lg:grid-cols-12 lg:gap-16">
          <article className="lg:col-span-7">
            <div className="space-y-6 text-lg text-muted-foreground leading-relaxed">
              {content.paragraphs.map((paragraph) => (
                <p key={paragraph.slice(0, 40)}>{paragraph}</p>
              ))}
            </div>
          </article>

          {author && (
            <aside className="lg:col-span-5">
              <div className="rounded-lg border border-border bg-card p-6">
                <p className="inline-flex items-center gap-2 font-medium text-[0.6875rem] text-muted-foreground/70 uppercase tracking-[0.22em]">
                  {author.label}
                </p>
                <div className="mt-5 flex items-center gap-4">
                  <div className="relative size-16 shrink-0 overflow-hidden rounded-md bg-muted">
                    <Image
                      alt={author.image.alt}
                      className="object-cover"
                      fill
                      sizes="64px"
                      src={author.image.src}
                    />
                  </div>
                  <div>
                    <p className="font-display text-primary text-xl">
                      {author.name}
                    </p>
                    <p className="mt-0.5 text-muted-foreground text-sm">
                      {author.role}
                    </p>
                  </div>
                </div>
                <p className="mt-5 text-muted-foreground text-sm leading-relaxed">
                  {author.bio}
                </p>
                {author.phone && (
                  <a
                    className="mt-5 inline-block border-border border-t pt-5 text-primary text-sm transition-colors hover:text-primary/70"
                    href={telHref(author.phone)}
                  >
                    {author.phone}
                  </a>
                )}
              </div>
            </aside>
          )}
        </div>
      </div>
    </section>
  );
}