export function Brand({ compact = false }: { compact?: boolean }) {
  return (
    <div className={`brand ${compact ? 'brand--compact' : ''}`} aria-label="星痕智能课程工坊">
      <span className="brand-mark" aria-hidden="true">
        <svg
          className="brand-mark-svg"
          viewBox="0 0 44 26"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <linearGradient id="brandGoldDot" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#deb66c" />
              <stop offset="100%" stopColor="#b58735" />
            </linearGradient>
            <linearGradient id="brandArcTrail" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#8292a8" />
              <stop offset="60%" stopColor="#8fa0b5" />
              <stop offset="100%" stopColor="#a5b5cb" />
            </linearGradient>
          </defs>
          <circle cx="8" cy="18" r="3.6" fill="url(#brandGoldDot)" />
          <path
            d="M 14.2 14.2 C 20.2 7.2, 30.2 4.6, 41 10"
            stroke="url(#brandArcTrail)"
            strokeWidth="1.8"
            strokeLinecap="round"
          />
        </svg>
      </span>
      <span className="brand-text">
        <strong className="brand-title">星痕</strong>
        {!compact && <small className="brand-sub">XINGHEN</small>}
      </span>
    </div>
  )
}