/**
 * Inline SVG brand mark for FlatRender.
 *
 * Icon meaning:
 *  • Blue rounded square = the platform
 *  • White play triangle  = video / rendering
 *  • Three stacked bars   = flat-design layers / composition
 *
 * Rendered inline so it works without a network request and
 * inherits the correct colour in both light and dark contexts.
 */

interface LogoMarkProps {
  /** Pixel size of the square icon (default 36) */
  size?: number;
  className?: string;
}

export function LogoMark({ size = 36, className }: LogoMarkProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
      className={className}
    >
      {/* Blue rounded background */}
      <rect width="40" height="40" rx="9" fill="#2563EB" />

      {/* Play triangle */}
      <path d="M12 12.5L12 27.5L24.5 20L12 12.5Z" fill="white" />

      {/* Flat-design layer bars (decreasing width, right side) */}
      <rect x="27" y="13" width="7"   height="2.5" rx="1.25" fill="white" fillOpacity="0.9" />
      <rect x="27" y="18.75" width="5.5" height="2.5" rx="1.25" fill="white" fillOpacity="0.75" />
      <rect x="27" y="24.5" width="4"   height="2.5" rx="1.25" fill="white" fillOpacity="0.6" />
    </svg>
  );
}