'use client'

export function Logo({ size = 40 }: { size?: number }) {
  return (
    <div className="flex items-center gap-2">
      <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        {/* Wood log */}
        <ellipse cx="24" cy="30" rx="16" ry="10" fill="#D4915C" />
        <ellipse cx="24" cy="30" rx="16" ry="10" fill="url(#wood-grain)" opacity="0.3" />
        <ellipse cx="24" cy="27" rx="16" ry="10" fill="#E8A96C" />
        {/* Tree rings */}
        <ellipse cx="24" cy="27" rx="10" ry="6" fill="none" stroke="#D4915C" strokeWidth="1" />
        <ellipse cx="24" cy="27" rx="6" ry="3.5" fill="none" stroke="#D4915C" strokeWidth="0.8" />
        <ellipse cx="24" cy="27" rx="2.5" ry="1.5" fill="#D4915C" />
        {/* Saw */}
        <rect x="30" y="6" width="3" height="18" rx="1" fill="#888" transform="rotate(15 30 6)" />
        <rect x="29" y="4" width="5" height="5" rx="1" fill="#F5A623" transform="rotate(15 30 6)" />
        {/* Saw teeth */}
        <path d="M31 10 L34 11 L31 12 L34 13 L31 14 L34 15 L31 16 L34 17 L31 18 L34 19 L31 20" stroke="#666" strokeWidth="0.5" fill="none" transform="rotate(15 30 6)" />
        {/* Leaf */}
        <path d="M12 8 Q16 2 20 8 Q16 10 12 8Z" fill="#4CAF50" />
        <line x1="16" y1="5" x2="16" y2="9" stroke="#388E3C" strokeWidth="0.5" />
        <defs>
          <pattern id="wood-grain" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="4" y2="4" stroke="#C4814C" strokeWidth="0.3" />
          </pattern>
        </defs>
      </svg>
      <div className="flex flex-col leading-tight">
        <span className="font-heading font-bold text-xl text-primary">LEVIS</span>
        <span className="font-heading text-sm text-dark/70 -mt-1">Holzbau</span>
      </div>
    </div>
  )
}