/**
 * Wabenhain-Wortzeichen: Hexagon-Rahmen mit drei stilisierten Tannen,
 * nachempfunden dem gedruckten Glas-Etikett. "default" fuer helle
 * Hintergrunde (Honiggold-Hexagon, dunkle Tannen), "inverted" fuer dunkle
 * Hintergruende wie Footer/Mobile-Menue (Creme-Hexagon und -Tannen).
 */
export function Logomark({
  className = "h-8 w-8",
  variant = "default",
}: {
  className?: string;
  variant?: "default" | "inverted";
}) {
  const hexColor = variant === "inverted" ? "#F4EFE5" : "#B88A44";
  const treeColor = variant === "inverted" ? "#F4EFE5" : "#24352B";

  return (
    <svg viewBox="0 0 100 100" className={className} fill="none" aria-hidden="true">
      <polygon
        points="50,5 88.97,27.5 88.97,72.5 50,95 11.03,72.5 11.03,27.5"
        stroke={hexColor}
        strokeWidth="2.5"
      />
      {[
        { x: 20, y: 45, scale: 0.7 },
        { x: 38, y: 32, scale: 0.95 },
        { x: 56, y: 45, scale: 0.7 },
      ].map((tree) => (
        <g key={tree.x} transform={`translate(${tree.x} ${tree.y}) scale(${tree.scale})`}>
          <polygon points="10,2 5,13 15,13" stroke={treeColor} strokeWidth="1.4" strokeLinejoin="round" />
          <polygon points="10,10 2,22 18,22" stroke={treeColor} strokeWidth="1.4" strokeLinejoin="round" />
          <rect x="8" y="22" width="4" height="4" stroke={treeColor} strokeWidth="1.4" />
        </g>
      ))}
    </svg>
  );
}