export function ArchitectPortrait({
  photoSrc,
  name,
  title,
  size = "hero",
  tone = "dark",
}: {
  photoSrc?: string | null;
  name?: string | null;
  title?: string | null;
  size?: "hero" | "section";
  tone?: "dark" | "light";
}) {
  const label = name?.trim() || "Architect";
  const initial = label.slice(0, 1).toUpperCase();
  const dark = tone === "dark";

  const frame =
    size === "hero"
      ? "h-[min(17.5rem,78vw)] w-[min(17.5rem,78vw)] sm:h-[min(20rem,68vw)] sm:w-[min(20rem,68vw)] lg:h-56 lg:w-56 xl:h-64 xl:w-64"
      : "h-44 w-44 sm:h-52 sm:w-52";

  return (
    <figure
      className={`studio-architect-portrait relative mx-auto ${frame} lg:mx-0`}
    >
      <div
        className={`relative h-full w-full overflow-hidden rounded-[360px] ${
          dark
            ? "border border-white/25 bg-white/[0.06]"
            : "border border-[var(--archi-line)] bg-[var(--studio-stone)]"
        }`}
        style={{ borderRadius: 360 }}
      >
        {photoSrc ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={photoSrc}
            alt={`${label} portrait`}
            className="h-full w-full rounded-[360px] object-cover object-center"
            style={{ borderRadius: 360 }}
          />
        ) : (
          <div
            className={`flex h-full w-full flex-col items-center justify-center gap-2 rounded-[360px] ${
              dark ? "text-white/45" : "text-[var(--archi-ink-muted)]"
            }`}
            style={{ borderRadius: 360 }}
            aria-label={`${label} profile placeholder`}
          >
            <ProfilePersonIcon
              className={
                size === "hero"
                  ? "h-14 w-14 sm:h-16 sm:w-16 lg:h-16 lg:w-16"
                  : "h-14 w-14"
              }
            />
            <span className="font-[family-name:var(--font-display)] text-3xl tracking-tight lg:text-4xl">
              {initial}
            </span>
          </div>
        )}
      </div>
      {(name || title) && size === "hero" ? (
        <figcaption className="mt-4 hidden text-center lg:block lg:text-left">
          {name ? (
            <p className="font-[family-name:var(--font-display)] text-lg tracking-tight text-white">
              {name}
            </p>
          ) : null}
          {title ? (
            <p className="mt-1 text-xs tracking-[0.18em] text-white/45 uppercase">
              {title}
            </p>
          ) : null}
        </figcaption>
      ) : null}
    </figure>
  );
}

export function ProfilePersonIcon({
  className = "h-8 w-8",
}: {
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      aria-hidden
      stroke="currentColor"
      strokeWidth="1.4"
    >
      <circle cx="12" cy="8" r="3.4" />
      <path d="M4.75 19.5c1.55-3.55 4.05-5.25 7.25-5.25s5.7 1.7 7.25 5.25" />
    </svg>
  );
}
