GRV-Summit-Site/components/brand/BrandLogo.tsx

import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";

const siteName = "Great Rift Valley Innovation Summit";

type BrandLogoProps = {
  className?: string;
  href?: string;
  /** Header/footer wordmark, or icon-only */
  variant?: "default" | "footer" | "icon";
  /** Tighter sizing for the floating navbar */
  compact?: boolean;
};

export function BrandLogo({
  className,
  href = "/",
  variant = "default",
  compact = false,
}: BrandLogoProps) {
  const isFooter = variant === "footer";

  const markSize = compact ? "size-8" : "size-9 md:size-10";
  const markPad = isFooter ? "rounded-md bg-white p-1 shadow-sm" : "rounded-md";

  const mark = (
    <span className={cn("inline-flex shrink-0 items-center justify-center", markPad)}>
      <Image
        src="/branding/logo-icon.png"
        alt=""
        width={40}
        height={40}
        className={cn("object-contain", variant === "icon" ? "size-8" : markSize)}
        priority={variant === "default"}
      />
    </span>
  );

  if (variant === "icon") {
    return (
      <span className={cn("inline-flex", className)} aria-hidden>
        {mark}
      </span>
    );
  }

  const primaryClass = isFooter
    ? "text-white"
    : "text-[#37a47a]";
  const secondaryClass = isFooter
    ? "text-white/85"
    : "text-[#30614c]/90";

  const primarySize = compact
    ? "text-[12px] sm:text-[13px] md:text-sm"
    : isFooter
      ? "text-base md:text-lg"
      : "text-sm sm:text-base md:text-lg";
  const secondarySize = compact
    ? "text-[8px] sm:text-[9px]"
    : "text-[9px] sm:text-[10px]";

  const content = (
    <span className={cn("inline-flex min-w-0 items-center gap-2.5", className)}>
      {mark}
      <span
        className={cn(
          "flex min-w-0 flex-col items-start justify-center leading-none",
          compact ? "gap-0" : "gap-0.5"
        )}
      >
        <span
          className={cn(
            "font-wordmark uppercase whitespace-nowrap",
            primaryClass,
            primarySize
          )}
        >
          Great Rift Valley
        </span>
        <span
          className={cn(
            "font-normal whitespace-nowrap",
            secondaryClass,
            secondarySize
          )}
        >
          Innovation Summit
        </span>
      </span>
    </span>
  );

  if (!href) return content;

  return (
    <Link
      href={href}
      className="shrink-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#37a47a] focus-visible:ring-offset-2"
      aria-label={siteName}
    >
      {content}
    </Link>
  );
}