"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Heart, Coffee, Crown, Sparkles, ArrowRight, Check } from "lucide-react"; export default function PayWhatYouWantDial() { const [price, setPrice] = useState(25); const min = 5; const max = 150; // Calculate percentage for the SVG Arc const percent = (price - min) / (max - min); // Radius of the arc is 130. Semi-circle length is Pi * r = 3.14159 * 130 ≈ 408.4 const arcLength = 408.4; const strokeDashoffset = arcLength - percent * arcLength; // Dynamic Tiers based on price let currentTier = { name: "Supporter", icon: Coffee, color: "text-emerald-500", bg: "bg-emerald-500", border: "border-emerald-500/20", glow: "shadow-[0_0_30px_-5px_rgba(16,185,129,0.3)]", features: ["Personal License", "Basic Support", "Community Access"], message: "A lovely coffee to keep the code flowing." }; if (price >= 50 && price < 100) { currentTier = { name: "Pro Backer", icon: Heart, color: "text-rose-500", bg: "bg-rose-500", border: "border-rose-500/20", glow: "shadow-[0_0_30px_-5px_rgba(244,63,94,0.3)]", features: ["Commercial License", "Priority Email Support", "All Source Files", "Early Access"], message: "You are amazing! This helps me dedicate more time." }; } else if (price >= 100) { currentTier = { name: "Legend", icon: Crown, color: "text-amber-500", bg: "bg-amber-500", border: "border-amber-500/20", glow: "shadow-[0_0_30px_-5px_rgba(245,158,11,0.3)]", features: ["Extended License", "1-on-1 Setup Call", "Custom Requests", "Lifetime Updates"], message: "Legendary support. You are funding the next big update!" }; } const TierIcon = currentTier.icon; return (

Pay what you want.

Support indie development. Choose a fair price for the value you receive. Higher tiers unlock exclusive perks.

{/* --- INTERACTIVE DIAL SECTION --- */}

{/* SVG Arc Gauge */}

{/* Price Display inside the Dial */}

{currentTier.name}

$ {price}

{/* Range Slider Control */}

setPrice(Number(e.target.value))} className="absolute w-full h-full opacity-0 cursor-ew-resize z-20" /> {/* Custom Track */}

{/* Custom Thumb */}

${min} ${max}+

{/* --- REWARDS SECTION --- */}

"{currentTier.message}"

{feature}

); }