// MeshBackdrop — layered radial gradients that drift slowly over a
// 60-second loop. Builds the cinematic "ambient nebula" feel without
// shipping a video or a heavy 3D canvas. CSS-only, GPU-composited
// transforms — no main-thread work after first paint.
//
// Composition: drop this once near the top of the page as
// `position: absolute; inset: 0;` underneath your content. The blobs
// drift in opposite directions so the composite movement never
// repeats visibly.

import type { ReactNode } from 'react'
import { cn } from '../cn'

interface MeshBackdropProps {
  readonly className?: string
  /** Brand mode — picks the colour palette. `cool` = violet/cyan
   *  (default), `warm` = amber/rose. The kit's `--primary` is honoured
   *  via the `from-primary/*` Tailwind utility callers can pass via
   *  className. */
  readonly tone?: 'cool' | 'warm'
}

export const MeshBackdrop = ({
  className, tone = 'cool',
}: MeshBackdropProps): ReactNode => {
  // OK to read tone here — the blobs themselves are styled via inline
  // gradients to avoid Tailwind shipping an extra colour class.
  const blob1 = tone === 'warm'
    ? 'oklch(0.6 0.2 25 / 0.55)'
    : 'oklch(0.55 0.25 290 / 0.55)'
  const blob2 = tone === 'warm'
    ? 'oklch(0.7 0.18 60 / 0.4)'
    : 'oklch(0.65 0.2 220 / 0.4)'
  const blob3 = tone === 'warm'
    ? 'oklch(0.55 0.25 350 / 0.35)'
    : 'oklch(0.5 0.25 310 / 0.45)'

  return (
    <div
      aria-hidden="true"
      className={cn(
        'absolute inset-0 overflow-hidden pointer-events-none',
        className,
      )}
    >
      {/* Three slow-drifting blobs at offset positions + offset
       * animation phases. Heavy blur = ambient feel. */}
      <div
        className="absolute -top-1/4 -left-1/4 w-[60vw] h-[60vw] rounded-full blur-3xl opacity-70 motion-safe:animate-mesh-drift-a"
        style={{ background: `radial-gradient(circle, ${blob1}, transparent 60%)` }}
      />
      <div
        className="absolute -bottom-1/3 -right-1/4 w-[55vw] h-[55vw] rounded-full blur-3xl opacity-60 motion-safe:animate-mesh-drift-b"
        style={{ background: `radial-gradient(circle, ${blob2}, transparent 60%)` }}
      />
      <div
        className="absolute top-1/3 left-1/2 w-[40vw] h-[40vw] -translate-x-1/2 rounded-full blur-3xl opacity-50 motion-safe:animate-mesh-drift-c"
        style={{ background: `radial-gradient(circle, ${blob3}, transparent 60%)` }}
      />
    </div>
  )
}