/**
 * EazyByt wordmark — "eazy" in the current text color (charcoal in light mode,
 * near-white in dark mode) and "byt." in brand orange. Scalable SVG, so it stays
 * crisp at any size. Control size with the className height (e.g. "h-7 w-auto").
 */
export function Logo({ className = "h-7 w-auto text-content" }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 340 80"
      role="img"
      aria-label="EazyByt"
    >
      <text
        x="4"
        y="60"
        textLength="332"
        lengthAdjust="spacingAndGlyphs"
        fontFamily="'Trebuchet MS', 'Segoe UI', system-ui, Arial, sans-serif"
        fontSize="66"
        fontWeight="800"
        letterSpacing="-2"
      >
        <tspan fill="currentColor">eazy</tspan>
        <tspan fill="#e8791e">byt.</tspan>
      </text>
    </svg>
  );
}