export function LogoMark({ size = 44 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden>
      <path d="M50 12a36 36 0 1 0 0 72" fill="none" stroke="#079B49" strokeWidth="13" strokeLinecap="round" />
      <path d="M28 52c10-14 22-8 30 2 8 10 22 10 30-2-4 22-20 34-38 34-10 0-20-6-24-14 6 4 14 2 18-4-6 2-14-2-16-16z" fill="#22339C" />
      <path d="M34 50c8-6 16-2 20 6" stroke="#fff" strokeWidth="4" fill="none" strokeLinecap="round" />
      <path d="M30 48c4-8 14-10 18-2-6-2-12 0-18 2z" fill="#079B49" />
      <rect x="58" y="8" width="12" height="46" rx="6" transform="rotate(32 64 31)" fill="#22339C" />
    </svg>
  );
}
export function Logo({ compact = false }: { compact?: boolean }) {
  return (
    <span className="flex items-center gap-2.5 anim-fade">
      <LogoMark size={compact ? 38 : 46} />
      <span className="leading-none">
        <span className="block font-extrabold text-brand tracking-tight" style={{ fontFamily: "Georgia, serif", fontSize: compact ? 14 : 17 }}>MARHATAB FAMILY</span>
        <span className="block font-bold text-royal tracking-[0.42em] mt-1" style={{ fontSize: compact ? 9 : 11 }}>PHARMACY</span>
      </span>
    </span>
  );
}