import Link from "next/link";

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

// SEO Insight brand mark — the tree logo from the Claude design,
// rendered in the brand gradient (Trust Blue → Active Orange → Insight Yellow).
export const BrandMark = ({
  className,
  gradientId = "seo-brand-mark",
}: {
  className?: string;
  gradientId?: string;
}) => {
  return (
    <svg
      viewBox="0 0 40 40"
      fill="none"
      aria-hidden="true"
      className={cn("size-7", className)}
    >
      <defs>
        <linearGradient
          id={gradientId}
          x1="4"
          y1="34"
          x2="36"
          y2="6"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#007BFF" />
          <stop offset="0.55" stopColor="#FF5722" />
          <stop offset="1" stopColor="#FBC02D" />
        </linearGradient>
      </defs>
      <rect
        x="12"
        y="27"
        width="16"
        height="9"
        rx="3"
        fill={`url(#${gradientId})`}
      />
      <path
        d="M20 28V14"
        stroke={`url(#${gradientId})`}
        strokeWidth="3.4"
        strokeLinecap="round"
      />
      <path
        d="M20 19C20 14 14 13 13 7"
        stroke={`url(#${gradientId})`}
        strokeWidth="3.4"
        strokeLinecap="round"
      />
      <path
        d="M20 19C20 14 26 13 27 7"
        stroke={`url(#${gradientId})`}
        strokeWidth="3.4"
        strokeLinecap="round"
      />
      <path
        d="M20 23C20 19 8 19 7 13"
        stroke={`url(#${gradientId})`}
        strokeWidth="3.4"
        strokeLinecap="round"
      />
      <path
        d="M20 23C20 19 32 19 33 13"
        stroke={`url(#${gradientId})`}
        strokeWidth="3.4"
        strokeLinecap="round"
      />
    </svg>
  );
};

export const Logo = ({
  className,
  lang = "fr",
}: {
  className?: string;
  lang?: string;
}) => {
  return (
    <Link
      href={`/${lang}`}
      className={cn("flex items-center gap-2", className)}
    >
      <BrandMark className="size-7" />
      <span className="font-display text-ink-1 text-base font-extrabold tracking-tight">
        SEO Insight
      </span>
    </Link>
  );
};