Ring Tower

"use client"

import { RingTower } from "@/components/ui/ring-tower"

const settings = {
  rings: 5,
  speed: 1,
  parallax: 24,
  backface: 0.86,
  draggable: true,
  scenes: true,
}

// Inline SVG landscapes, so the preview needs no network images.
function scene(
  sky: [string, string],
  sun: string,
  hills: [string, string, string],
  width = 1200,
  height = 800
) {
  const ridge = (base: number, amp: number, seed: number) => {
    let d = `M0 ${height}L0 ${base}`
    for (let x = 0; x <= width; x += width / 12) {
      const y = base - amp * (0.5 + 0.5 * Math.sin(x / 140 + seed) * Math.cos(x / 310 + seed * 2))
      d += `L${x.toFixed(0)} ${y.toFixed(0)}`
    }
    return `${d}L${width} ${height}Z`
  }
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
<defs><linearGradient id="s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${sky[0]}"/><stop offset="1" stop-color="${sky[1]}"/></linearGradient>
<radialGradient id="g"><stop offset="0" stop-color="${sun}" stop-opacity=".9"/><stop offset="1" stop-color="${sun}" stop-opacity="0"/></radialGradient></defs>
<rect width="${width}" height="${height}" fill="url(#s)"/>
<circle cx="${width * 0.68}" cy="${height * 0.36}" r="${height * 0.34}" fill="url(#g)"/>
<circle cx="${width * 0.68}" cy="${height * 0.36}" r="${height * 0.08}" fill="${sun}"/>
<path d="${ridge(height * 0.58, height * 0.22, 1)}" fill="${hills[0]}"/>
<path d="${ridge(height * 0.72, height * 0.16, 4)}" fill="${hills[1]}"/>
<path d="${ridge(height * 0.86, height * 0.12, 7)}" fill="${hills[2]}"/>
</svg>`
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
}

const SCENES = [
  scene(["#F6C38B", "#FBE7C6"], "#FFF4D6", ["#7A8F6B", "#4E6650", "#2C4236"]),
  scene(["#2B2F6B", "#E07A6B"], "#FFD3A1", ["#6B4E7A", "#4A3560", "#2A1D3F"]),
  scene(["#8EC5F0", "#E4F2FB"], "#FFFFFF", ["#9DB7C9", "#6E8FA6", "#405F75"]),
  scene(["#FF9A5A", "#FFD08A"], "#FFF1C1", ["#C7643E", "#94442B", "#5C2A1D"]),
  scene(["#0F1B3D", "#3B4F8F"], "#E8ECFF", ["#2A3A6B", "#1B2650", "#0E1634"]),
  scene(["#BFE3C9", "#F4FBEF"], "#FFFBE0", ["#7FB58F", "#4F8C63", "#2D5E3E"]),
  scene(["#F2B8C6", "#FCE6EC"], "#FFF6F8", ["#C98AA0", "#9A5D78", "#653A52"]),
  scene(["#5A6B7A", "#B9C4CC"], "#F2F4F6", ["#76838E", "#525E69", "#323B44"]),
]

export default function RingTowerDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-background p-4">
      <div className="relative h-[560px] w-full max-w-5xl overflow-hidden rounded-xl border border-border bg-background">
        <RingTower
          images={s.scenes ? SCENES : undefined}
          rings={s.rings}
          speed={s.speed}
          parallax={s.parallax}
          backface={s.backface}
          draggable={s.draggable}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-background via-background/60 to-transparent"
        />
      </div>
    </div>
  )
}