ultisuite-client/components/ultimail-logo.tsx

"use client"

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

type UltiMailLogoProps = {
  className?: string
  /** `horizontal` = picto + texte. `mark` = picto seul. `stacked` = wordmark empilé. */
  variant?: "horizontal" | "mark" | "stacked"
  /** Lien au clic ; `null` = pas de lien. Défaut : boîte de réception. */
  href?: string | null
}

/** Icône extraite du master PNG (pas le SVG VTracer, trop « M Gmail » à petite taille). */
const HEADER_ICON = "/brand/ultimail-header-icon.png"
const STACKED_WORDMARK = "/brand/ultimail-wordmark-stacked.png"
/** Fond transparent, picto couleurs d'origine, texte éclairci (pas de filter CSS invert/hue). */
const STACKED_WORDMARK_DARK = "/brand/ultimail-wordmark-stacked-dark.png"
const DEFAULT_INBOX_HREF = "/mail/inbox"

const STACKED_IMG_CLASS =
  "h-[11.25rem] w-auto max-w-none shrink-0 object-contain select-none sm:h-[12rem]"

export function UltiMailLogo({
  className,
  variant = "horizontal",
  href = DEFAULT_INBOX_HREF,
}: UltiMailLogoProps) {
  const mark = (
    <img
      src={HEADER_ICON}
      alt=""
      width={288}
      height={288}
      draggable={false}
      className={cn(
        "shrink-0 object-contain object-center select-none",
        variant === "mark" ? "h-10 w-10" : "h-8 w-8"
      )}
      aria-hidden
    />
  )

  if (variant === "mark") {
    if (href === null) {
      return <div className={cn("shrink-0", className)}>{mark}</div>
    }
    return (
      <Link
        href={href}
        className={cn(
          "shrink-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
          className
        )}
        aria-label="Ultimail — Boîte de réception"
      >
        {mark}
      </Link>
    )
  }

  if (variant === "stacked") {
    const stacked = (
      <div className="flex h-[6.25rem] items-center justify-center overflow-hidden sm:h-[6.75rem]">
        <img
          src={STACKED_WORDMARK}
          alt="Ultimail"
          width={320}
          height={320}
          draggable={false}
          className={cn(STACKED_IMG_CLASS, "dark:hidden")}
        />
        <img
          src={STACKED_WORDMARK_DARK}
          alt="Ultimail"
          width={320}
          height={320}
          draggable={false}
          aria-hidden
          className={cn(STACKED_IMG_CLASS, "hidden dark:block")}
        />
      </div>
    )

    if (href === null) {
      return <div className={cn("flex justify-center", className)}>{stacked}</div>
    }

    return (
      <Link
        href={href}
        className={cn(
          "flex justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
          className
        )}
        aria-label="Ultimail — Boîte de réception"
      >
        {stacked}
      </Link>
    )
  }

  const body = (
    <div
      role="img"
      aria-label="Ultimail"
      className="flex min-w-0 items-center gap-2.5 text-foreground"
    >
      {mark}
      <span className="min-w-0 truncate text-[1.375rem] font-semibold leading-none tracking-tight text-foreground dark:text-white">
        Ultimail
      </span>
    </div>
  )

  if (href === null) {
    return <div className={cn("min-w-0", className)}>{body}</div>
  }

  return (
    <Link
      href={href}
      className={cn(
        "flex min-w-0 items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        className
      )}
      aria-label="Ultimail — Boîte de réception"
    >
      {body}
    </Link>
  )
}