interface LogoProps {
  className?: string;
  size?: number;
}

export function Logo({ className = '', size = 40 }: LogoProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 500 500"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-label="webklar Logo"
    >
      {/* Left V-shape (lighter green) */}
      <path
        d="M70 120 L70 280 L165 375 L165 320 L110 265 L110 120 Z"
        fill="url(#gradient-left)"
      />
      
      {/* Center chevron (medium green) */}
      <path
        d="M165 215 L250 130 L335 215 L335 270 L250 185 L165 270 Z"
        fill="url(#gradient-center)"
      />
      
      {/* Right V-shape (darker green) */}
      <path
        d="M430 120 L430 280 L335 375 L335 320 L390 265 L390 120 Z"
        fill="url(#gradient-right)"
      />
      
      {/* Bottom connection left */}
      <path
        d="M165 320 L165 375 L250 460 L250 405 Z"
        fill="url(#gradient-bottom-left)"
      />
      
      {/* Bottom connection right */}
      <path
        d="M335 320 L335 375 L250 460 L250 405 Z"
        fill="url(#gradient-bottom-right)"
      />
      
      <defs>
        <linearGradient id="gradient-left" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#9AA67F" />
          <stop offset="100%" stopColor="#0F5010" />
        </linearGradient>
        <linearGradient id="gradient-center" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#0F5010" />
          <stop offset="100%" stopColor="#0A400C" />
        </linearGradient>
        <linearGradient id="gradient-right" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#0A400C" />
          <stop offset="100%" stopColor="#052006" />
        </linearGradient>
        <linearGradient id="gradient-bottom-left" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#0F5010" />
          <stop offset="100%" stopColor="#0A400C" />
        </linearGradient>
        <linearGradient id="gradient-bottom-right" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#0A400C" />
          <stop offset="100%" stopColor="#052006" />
        </linearGradient>
      </defs>
    </svg>
  );
}