Bead Ring

import { BeadRing } from "@/components/motion/bead-ring"
import { Orbital } from "@/components/orbs/orbital-v4"

const TIDEPOOL = {
  ground: "oklch(0.24 0.05 215)",
  upper:
    "radial-gradient(ellipse 140% 110% at 50% 38%, oklch(0.86 0.10 175) 0%, oklch(0.62 0.12 190 / 0.7) 52%, transparent 100%)",
  lower:
    "radial-gradient(ellipse 130% 100% at 50% 82%, oklch(0.28 0.07 235) 0%, oklch(0.28 0.07 235 / 0.8) 56%, transparent 100%)",
  glow: "oklch(0.80 0.11 180)",
  form: "strong",
} as const

// The orb is the lamp: the ground brightens toward it and falls off outward.
const LIT_GROUND =
  "radial-gradient(circle at 50% 50%, oklch(0.42 0.09 200 / 0.55) 0%, oklch(0.30 0.06 215 / 0.35) 22%, oklch(0.22 0.03 230 / 0.12) 48%, transparent 70%)"

export default function BeadRingDemo({
  animated = false,
}: {
  animated?: boolean
}) {
  return (
    <div
      data-demo="bead-ring"
      className="dark relative grid w-full place-items-center overflow-hidden bg-background"
      style={{ backgroundImage: LIT_GROUND }}
    >
      <div className="relative size-[min(84vw,600px)]">
        <BeadRing
          size={600}
          beadSize={22}
          color="oklch(0.74 0.13 188)"
          duration={30}
          animated={animated}
          style={{ width: "100%", height: "100%" }}
        />
        <BeadRing
          size={440}
          beadSize={18}
          color="oklch(0.76 0.12 352)"
          direction="ccw"
          duration={20}
          animated={animated}
          style={{ width: "73%", height: "73%" }}
        />
        <BeadRing
          size={300}
          beadSize={14}
          color="oklch(0.86 0.11 92)"
          duration={14}
          animated={animated}
          style={{ width: "50%", height: "50%" }}
        >
          <Orbital palette={TIDEPOOL} size={150} grain={0.25} />
        </BeadRing>
      </div>
    </div>
  )
}