import clsx from "clsx";

/** Devwebs mark: a speech bubble carrying the "dw" monogram. */
export function BrandMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 40 40" className={clsx("shrink-0", className)} aria-hidden>
      <path d="M8 4h24a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6H17l-8 6v-6H8a6 6 0 0 1-6-6V10a6 6 0 0 1 6-6Z" fill="#2FBF8F" />
      <text x="20" y="22.5" textAnchor="middle" fontSize="14" fontWeight="700" fill="#0F2A2B" fontFamily="Instrument Sans Variable, sans-serif" letterSpacing="-0.5">
        dw
      </text>
    </svg>
  );
}

export function Brand({ tone = "light" }: { tone?: "light" | "dark" }) {
  return (
    <div className="flex items-center gap-2.5">
      <BrandMark className="size-9" />
      <div className="leading-tight">
        <div className={clsx("text-[15px] font-semibold", tone === "light" ? "text-white" : "text-ink")}>Devwebs</div>
        <div className={clsx("text-xs", tone === "light" ? "text-ink-muted" : "text-muted")}>WhatsApp CRM</div>
      </div>
    </div>
  );
}
