export function SiloMark({ className = "h-8 w-8" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 48 48"
      className={className}
      aria-hidden
      fill="none"
    >
      {/* cap */}
      <rect x="17" y="5" width="14" height="5" rx="1.5" fill="var(--straw)" />
      <rect x="15" y="9" width="18" height="3.5" rx="1" fill="var(--straw)" />
      {/* neck */}
      <path
        d="M19 12.5h10v6.5c0 1.2-.7 2-2 2H21c-1.3 0-2-.8-2-2V12.5Z"
        fill="currentColor"
      />
      {/* bottle body */}
      <path
        d="M16 21c0-1.4 1-2.5 2.4-2.5h11.2c1.4 0 2.4 1.1 2.4 2.5v17.2c0 3.4-2.6 6.3-6 6.3h-4c-3.4 0-6-2.9-6-6.3V21Z"
        fill="currentColor"
      />
      {/* milk window */}
      <path
        d="M19.2 24.5h9.6v12.4c0 1.8-1.4 3.3-3.1 3.3h-3.4c-1.7 0-3.1-1.5-3.1-3.3V24.5Z"
        fill="var(--straw)"
        opacity="0.92"
      />
      <path
        d="M19.2 24.5h9.6v4.2H19.2z"
        fill="var(--on-brand)"
        opacity="0.35"
      />
    </svg>
  );
}

export function SiloWordmark({ light = false }: { light?: boolean }) {
  return (
    <span className="flex items-center gap-2.5">
      <SiloMark
        className={
          light
            ? "h-9 w-9 shrink-0 text-[var(--on-brand)]"
            : "h-9 w-9 shrink-0 text-[var(--spruce)]"
        }
      />
      <span className="leading-none">
        <span
          className="block font-serif text-[1.4rem] font-semibold italic tracking-tight"
          style={{ color: light ? "var(--on-brand)" : "var(--ink)" }}
        >
          Silo
        </span>
        <span
          className="mt-0.5 block text-[0.68rem] font-bold uppercase tracking-[0.22em]"
          style={{ color: "var(--straw)" }}
        >
          Mart
        </span>
      </span>
    </span>
  );
}