export function Logo({ className = "", light = false }: { className?: string; light?: boolean }) {
  return (
    <a href="/" className={`flex items-center gap-2 ${className}`}>
      <span className="relative grid h-9 w-9 place-items-center rounded-lg bg-forest text-gold-2 shadow-sm ring-1 ring-gold/30">
        <svg viewBox="0 0 32 32" className="h-6 w-6" aria-hidden>
          <path
            fill="currentColor"
            d="M16 4 6 9v6c0 7.2 4.1 11.8 10 13 5.9-1.2 10-5.8 10-13V9L16 4zm0 4.2 6.5 3.2v3.7c0 5.2-2.8 8.5-6.5 9.6-3.7-1.1-6.5-4.4-6.5-9.6v-3.7L16 8.2z"
          />
          <path fill="#c45c26" d="M15 13h2v8h-2z" />
          <path fill="#e4c56a" d="M12 18h8v2h-8z" />
        </svg>
      </span>
      <span className="leading-tight">
        <span
          className={`font-display block text-[15px] font-semibold tracking-tight ${light ? "text-cream" : "text-forest"}`}
        >
          CediForge
        </span>
        <span className={`block text-[10px] uppercase tracking-[0.22em] ${light ? "text-gold-2" : "text-terra"}`}>
          Academy
        </span>
      </span>
    </a>
  );
}