import { Link } from "@tanstack/react-router";

export function Logo() {
  return (
    <Link to="/" className="flex items-center gap-2.5" aria-label="FHD Media UK home">
      <svg viewBox="0 0 40 40" className="h-9 w-9" aria-hidden="true">
        <defs>
          <linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="var(--primary)" />
            <stop offset="1" stopColor="var(--violet)" />
          </linearGradient>
        </defs>
        <rect x="2" y="6" width="36" height="26" rx="7" fill="url(#lg)" />
        <path d="M16 13.5v11l9-5.5z" fill="var(--primary-foreground)" />
        <rect x="13" y="34" width="14" height="2.5" rx="1.25" fill="url(#lg)" />
      </svg>
      <span className="font-display text-lg font-bold tracking-tight">
        FHD <span className="text-brand">Media</span>{" "}
        <span className="text-xs font-semibold text-muted-foreground">UK</span>
      </span>
    </Link>
  );
}