function CloudShape({ path }: { path: string }) {
  return <path d={path} fill="currentColor" />
}

const cloudLg =
  'M24 36c-9.941 0-18-6.268-18-14S14.059 8 24 8c2.2 0 4.28.45 6.16 1.26C33.1 4.54 38.78 2 45 2c11.046 0 20 7.82 20 17.5 0 .84-.06 1.66-.17 2.46C68.9 20.62 74.6 18 81 18c13.255 0 24 9.402 24 21S94.255 60 81 60H24Z'

const cloudMd =
  'M18 30C8.059 30 0 24.627 0 18S8.059 6 18 6c1.65 0 3.21.34 4.62.95C25.58 3.4 30.22 1 35 1c9.389 0 17 6.82 17 15.25 0 .7-.05 1.38-.14 2.05C55.12 16.35 59.68 14 65 14c11.046 0 20 8.402 20 18.5S76.046 51 65 51H18Z'

const cloudSm =
  'M14 22C6.82 22 1 17.523 1 12S6.82 2 14 2c1.28 0 2.5.26 3.6.72C19.98 1.13 23.52 0 27 0c7.18 0 13 5.82 13 13s-5.82 13-13 13H14Z'

const clouds = [
  { id: 1, path: cloudLg, viewBox: '0 0 120 48', className: 'auth-cloud--1' },
  { id: 2, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--2' },
  { id: 3, path: cloudSm, viewBox: '0 0 54 26', className: 'auth-cloud--3' },
  { id: 4, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--4' },
  { id: 5, path: cloudLg, viewBox: '0 0 120 48', className: 'auth-cloud--5' },
  { id: 6, path: cloudSm, viewBox: '0 0 54 26', className: 'auth-cloud--6' },
  { id: 7, path: cloudMd, viewBox: '0 0 96 40', className: 'auth-cloud--7' },
] as const

export function SceneDecor() {
  return (
    <div className="hx-scene-deco" aria-hidden>
      <span className="auth-scene-blob auth-scene-blob--sky" />
      <span className="auth-scene-blob auth-scene-blob--sky-alt" />

      {clouds.map((cloud) => (
        <svg key={cloud.id} className={`auth-cloud ${cloud.className}`} viewBox={cloud.viewBox} fill="none">
          <CloudShape path={cloud.path} />
        </svg>
      ))}
      <svg className="auth-leaf auth-leaf--1" viewBox="0 0 32 32" fill="none">
        <path
          d="M16 4C10 10 6 18 8 26c6-2 12-8 14-16-2-2-4-4-6-6Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path d="M16 10v12M13 18h6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </svg>
      <svg className="auth-leaf auth-leaf--2" viewBox="0 0 32 32" fill="none">
        <path
          d="M16 4C10 10 6 18 8 26c6-2 12-8 14-16-2-2-4-4-6-6Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  )
}

/** @deprecated 使用 SceneDecor */
export const AuthSceneDecor = SceneDecor

/** 品牌徽章：巡檢視窗 + 燈塔信標，幾何俐落、適合小尺寸 */
export function AuthTicketIcon({ className = '' }: { className?: string }) {
  return (
    <span className={`auth-ticket-icon ${className}`.trim()}>
      <svg viewBox="0 0 40 40" fill="none" aria-hidden className="auth-ticket-icon__svg">
        <defs>
          <linearGradient id="hx-mark-body" x1="8" y1="10" x2="30" y2="32" gradientUnits="userSpaceOnUse">
            <stop stopColor="var(--hx-brand)" />
            <stop offset="1" stopColor="var(--hx-brand-hover)" />
          </linearGradient>
          <linearGradient id="hx-mark-beam" x1="22" y1="11" x2="34" y2="18" gradientUnits="userSpaceOnUse">
            <stop stopColor="var(--hx-brand)" stopOpacity="0.85" />
            <stop offset="1" stopColor="var(--hx-brand)" stopOpacity="0" />
          </linearGradient>
        </defs>

        <rect
          x="7.5"
          y="7.5"
          width="25"
          height="25"
          rx="7.5"
          stroke="currentColor"
          strokeWidth="1.35"
          opacity="0.28"
        />
        <path
          d="M11 13.5h5.2M23.8 13.5h5.2M11 26.5h5.2M23.8 26.5h5.2"
          stroke="currentColor"
          strokeWidth="1.45"
          strokeLinecap="round"
          opacity="0.42"
        />

        <path
          d="M14.2 28.4h11.6a1.8 1.8 0 0 0 1.8-1.8V18.2H14.2v8.4Z"
          fill="url(#hx-mark-body)"
        />
        <path d="M14.2 18.2 20 12.4l5.8 5.8H14.2Z" fill="currentColor" opacity="0.92" />
        <path d="M22.2 12.8 28 18.6" stroke="var(--hx-surface)" strokeWidth="0.9" strokeLinecap="round" opacity="0.55" />

        <path d="M22 18.2v8.4a1.35 1.35 0 0 1-2.7 0v-8.4" fill="var(--hx-surface)" opacity="0.96" />

        <circle cx="20" cy="10.6" r="2.15" fill="var(--hx-surface)" />
        <circle cx="20" cy="10.6" r="1.05" fill="currentColor" />
        <path
          d="M21.4 10.6h11.5"
          stroke="url(#hx-mark-beam)"
          strokeWidth="2.4"
          strokeLinecap="round"
        />

        <ellipse cx="20" cy="31.8" rx="10.5" ry="1.7" fill="currentColor" opacity="0.1" />
      </svg>
    </span>
  )
}