blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DD-Thanks/Component.tsx

@@ -1,500 +1,501 @@
-'use client'
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Link from 'next/link'
-import {
-  Check,
-  DownloadCloud,
-  Home,
-  LayoutGrid,
-  MailCheck,
-  ShieldCheck,
-  Sparkles
-} from 'lucide-react'
-import { cn } from '@/utilities/ui'
-
-type InfoPill = {
-  id?: string | null
-  label?: string | null
-  icon?: 'mail' | 'download' | 'shield' | null
-}
-
-type CtaLink = {
-  label?: string | null
-  href?: string | null
-  variant?: 'primary' | 'secondary' | null
-  icon?: 'home' | 'grid' | 'download' | null
-}
-
-type ThanksConfettiProps = {
-  sectionId?: string | null
-  customCSS?: string | null
-  headline?: string | null
-  description?: string | null
-  subDescription?: string | null
-  replayLabel?: string | null
-  brandLabel?: string | null
-  showBrandLabel?: boolean | null
-  showReplayButton?: boolean | null
-  autoPlayConfetti?: boolean | null
-  confettiDuration?: number | null
-  infoPills?: InfoPill[] | null
-  ctaLinks?: CtaLink[] | null
-  className?: string
-  disableInnerContainer?: boolean
-}
-
-type ConfettiParticle = {
-  x: number
-  y: number
-  vx: number
-  vy: number
-  size: number
-  rotation: number
-  rotationSpeed: number
-  color: string
-  shape: 'circle' | 'square'
-  life: number
-  maxLife: number
-}
-
-const CONFETTI_COLORS = ['#d6d3d1', '#a8a29e', '#10b981', '#6ee7b7', '#ffffff', '#f5f5f4']
-
-const defaultInfoPills: Required<Pick<InfoPill, 'label' | 'icon'>>[] = [
-  { icon: 'mail', label: 'Confirmation sent' },
-  { icon: 'download', label: 'Files ready' },
-  { icon: 'shield', label: 'License activated' }
-]
-
-const defaultCtaLinks: Required<Pick<CtaLink, 'label' | 'href' | 'variant' | 'icon'>>[] = [
-  { label: 'Back to Home', href: '/', variant: 'primary', icon: 'home' },
-  { label: 'Continue Browsing', href: '/components', variant: 'secondary', icon: 'grid' }
-]
-
-function PillIcon({ icon }: { icon?: InfoPill['icon'] }) {
-  if (icon === 'download') return <DownloadCloud className="h-3.5 w-3.5" />
-  if (icon === 'shield') return <ShieldCheck className="h-3.5 w-3.5" />
-
-  return <MailCheck className="h-3.5 w-3.5" />
-}
-
-function CtaIcon({ icon }: { icon?: CtaLink['icon'] }) {
-  if (icon === 'grid') return <LayoutGrid className="h-4 w-4" />
-  if (icon === 'download') return <DownloadCloud className="h-4 w-4" />
-
-  return <Home className="h-4 w-4" />
-}
-
-function getSafeDuration(duration?: number | null) {
-  if (typeof duration !== 'number' || !Number.isFinite(duration)) return 3000
-  return Math.min(Math.max(duration, 1000), 8000)
-}
-
-function createParticles({
-  amount,
-  originX,
-  originY,
-  angle,
-  spread,
-  velocity,
-  width,
-  height
-}: {
-  amount: number
-  originX: number
-  originY: number
-  angle?: number
-  spread: number
-  velocity: number
-  width: number
-  height: number
-}): ConfettiParticle[] {
-  return Array.from({ length: amount }, () => {
-    const baseAngle = typeof angle === 'number' ? angle : Math.random() * 360
-    const randomAngle = (baseAngle - spread / 2 + Math.random() * spread) * (Math.PI / 180)
-    const speed = velocity * (0.45 + Math.random() * 0.75)
-
-    return {
-      x: originX * width,
-      y: originY * height,
-      vx: Math.cos(randomAngle) * speed,
-      vy: Math.sin(randomAngle) * speed,
-      size: 4 + Math.random() * 7,
-      rotation: Math.random() * Math.PI,
-      rotationSpeed: -0.22 + Math.random() * 0.44,
-      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)] ?? '#ffffff',
-      shape: Math.random() > 0.5 ? 'circle' : 'square',
-      life: 0,
-      maxLife: 90 + Math.random() * 70
-    }
-  })
-}
-
-export function DDThanks({
-  sectionId,
-  headline = 'Thank you! 🎉',
-  description = 'Your order has been confirmed and is on its way.',
-  subDescription = "We've sent a confirmation email with your download links and license keys. Check your inbox — and maybe your spam folder too.",
-  replayLabel = 'Replay confetti',
-  brandLabel = 'DesignsDusted',
-  showBrandLabel = true,
-  showReplayButton = true,
-  autoPlayConfetti = true,
-  confettiDuration = 3000,
-  infoPills,
-  ctaLinks,
-  className
-}: ThanksConfettiProps) {
-  const hasRun = useRef(false)
-  const canvasRef = useRef<HTMLCanvasElement | null>(null)
-  const animationRef = useRef<number | null>(null)
-  const particlesRef = useRef<ConfettiParticle[]>([])
-  const [visible, setVisible] = useState(false)
-
-  const pills = useMemo(() => {
-    const source = infoPills?.length ? infoPills : defaultInfoPills
-    return source.filter((pill) => pill.label)
-  }, [infoPills])
-
-  const links = useMemo(() => {
-    const source = ctaLinks?.length ? ctaLinks : defaultCtaLinks
-    return source.filter((link) => link.label && link.href)
-  }, [ctaLinks])
-
-  const stopAnimation = useCallback(() => {
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current)
-      animationRef.current = null
-    }
-  }, [])
-
-  const fireConfetti = useCallback(() => {
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (!canvas || !ctx) return
-
-    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    if (reducedMotion) return
-
-    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
-    const width = window.innerWidth
-    const height = window.innerHeight
-
-    canvas.width = width * pixelRatio
-    canvas.height = height * pixelRatio
-    canvas.style.width = `${width}px`
-    canvas.style.height = `${height}px`
-    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
-
-    const duration = getSafeDuration(confettiDuration)
-    const end = performance.now() + duration
-
-    particlesRef.current = [
-      ...particlesRef.current,
-      ...createParticles({
-        amount: 120,
-        originX: 0.5,
-        originY: 0.5,
-        spread: 100,
-        velocity: 20,
-        width,
-        height
-      }),
-      ...createParticles({
-        amount: 60,
-        originX: 0,
-        originY: 0.6,
-        angle: -35,
-        spread: 70,
-        velocity: 18,
-        width,
-        height
-      }),
-      ...createParticles({
-        amount: 60,
-        originX: 1,
-        originY: 0.6,
-        angle: 215,
-        spread: 70,
-        velocity: 18,
-        width,
-        height
-      })
-    ]
-
-    stopAnimation()
-
-    const frame = (now: number) => {
-      ctx.clearRect(0, 0, width, height)
-
-      if (now < end && Math.random() > 0.35) {
-        particlesRef.current.push(
-          ...createParticles({
-            amount: 2,
-            originX: 0,
-            originY: 0.3,
-            angle: -25,
-            spread: 55,
-            velocity: 10,
-            width,
-            height
-          }),
-          ...createParticles({
-            amount: 2,
-            originX: 1,
-            originY: 0.3,
-            angle: 205,
-            spread: 55,
-            velocity: 10,
-            width,
-            height
-          })
-        )
-      }
-
-      particlesRef.current = particlesRef.current.filter((particle) => {
-        particle.life += 1
-        particle.x += particle.vx
-        particle.y += particle.vy
-        particle.vy += 0.28
-        particle.vx *= 0.992
-        particle.rotation += particle.rotationSpeed
-
-        const opacity = Math.max(0, 1 - particle.life / particle.maxLife)
-        if (opacity <= 0 || particle.y > height + 40) return false
-
-        ctx.save()
-        ctx.globalAlpha = opacity
-        ctx.translate(particle.x, particle.y)
-        ctx.rotate(particle.rotation)
-        ctx.fillStyle = particle.color
-
-        if (particle.shape === 'circle') {
-          ctx.beginPath()
-          ctx.arc(0, 0, particle.size * 0.5, 0, Math.PI * 2)
-          ctx.fill()
-        } else {
-          ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size)
-        }
-
-        ctx.restore()
-        return true
-      })
-
-      if (particlesRef.current.length || now < end) {
-        animationRef.current = requestAnimationFrame(frame)
-      } else {
-        ctx.clearRect(0, 0, width, height)
-        animationRef.current = null
-      }
-    }
-
-    animationRef.current = requestAnimationFrame(frame)
-  }, [confettiDuration, stopAnimation])
-
-  useEffect(() => {
-    if (hasRun.current) return
-    hasRun.current = true
-
-    const timer = window.setTimeout(() => {
-      setVisible(true)
-      if (autoPlayConfetti !== false) fireConfetti()
-    }, 200)
-
-    return () => window.clearTimeout(timer)
-  }, [autoPlayConfetti, fireConfetti])
-
-  useEffect(() => {
-    return () => {
-      stopAnimation()
-      particlesRef.current = []
-    }
-  }, [stopAnimation])
-
-  return (
-    <section
-      id={sectionId ?? undefined}
-      className={cn(
-        'thanks-confetti-section relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-stone-950 px-4 py-24 text-center',
-        className
-      )}
-    >
-      <canvas
-        ref={canvasRef}
-        aria-hidden="true"
-        className="pointer-events-none fixed inset-0 z-[60] h-screen w-screen"
-      />
-
-      <div className="pointer-events-none absolute inset-0">
-        <div
-          className="absolute inset-0 opacity-20"
-          style={{
-            backgroundImage:
-              'radial-gradient(circle at 20% 50%, rgba(16,185,129,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%)'
-          }}
-        />
-        <div
-          className="absolute inset-0 opacity-5"
-          style={{
-            backgroundImage:
-              'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
-            backgroundSize: '60px 60px'
-          }}
-        />
-      </div>
-
-      <div
-        className="relative z-10 flex w-full max-w-lg flex-col items-center px-2"
-        style={{
-          opacity: visible ? 1 : 0,
-          transform: visible ? 'translateY(0) scale(1)' : 'translateY(32px) scale(0.96)',
-          transition:
-            'opacity 0.7s cubic-bezier(0.34,1.56,0.64,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1)'
-        }}
-      >
-        <div className="relative mb-8">
-          <div
-            className="flex h-24 w-24 items-center justify-center rounded-full"
-            style={{
-              background: 'linear-gradient(135deg, #10b981 0%, #6ee7b7 100%)',
-              boxShadow: '0 0 60px rgba(16,185,129,0.35), 0 0 120px rgba(16,185,129,0.15)',
-              opacity: visible ? 1 : 0,
-              transform: visible ? 'scale(1)' : 'scale(0.5)',
-              transition:
-                'opacity 0.5s ease 0.3s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s'
-            }}
-          >
-            <Check className="h-11 w-11 stroke-[3px] text-white" />
-          </div>
-          <div
-            className="absolute inset-0 rounded-full bg-emerald-500/20"
-            style={{
-              animation: visible
-                ? 'thanks-confetti-ping 2s cubic-bezier(0,0,0.2,1) infinite 0.8s'
-                : 'none'
-            }}
-          />
-        </div>
-
-        <div
-          style={{
-            opacity: visible ? 1 : 0,
-            transform: visible ? 'translateY(0)' : 'translateY(20px)',
-            transition: 'opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s'
-          }}
-        >
-          {headline && (
-            <h1 className="mb-3 text-4xl font-bold tracking-tight text-white md:text-5xl">
-              {headline}
-            </h1>
-          )}
-
-          {description && (
-            <p className="mb-2 text-lg leading-relaxed text-stone-400">{description}</p>
-          )}
-
-          {subDescription && (
-            <p className="mb-10 text-sm leading-relaxed text-stone-500">{subDescription}</p>
-          )}
-        </div>
-
-        {pills.length > 0 && (
-          <div
-            className="mb-10 flex flex-wrap items-center justify-center gap-3"
-            style={{
-              opacity: visible ? 1 : 0,
-              transform: visible ? 'translateY(0)' : 'translateY(16px)',
-              transition: 'opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s'
-            }}
-          >
-            {pills.map((item, index) => (
-              <div
-                key={
-                  'id' in item ? (item.id ?? `${item.label}-${index}`) : `${item.label}-${index}`
-                }
-                className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2"
-              >
-                <span className="flex h-4 w-4 items-center justify-center text-emerald-400">
-                  <PillIcon icon={item.icon} />
-                </span>
-                <span className="whitespace-nowrap text-sm text-stone-400">{item.label}</span>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {links.length > 0 && (
-          <div
-            className="flex w-full flex-col gap-3 sm:flex-row"
-            style={{
-              opacity: visible ? 1 : 0,
-              transform: visible ? 'translateY(0)' : 'translateY(16px)',
-              transition: 'opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s'
-            }}
-          >
-            {links.map((link, index) => {
-              const isPrimary =
-                (link.variant ?? (index === 0 ? 'primary' : 'secondary')) === 'primary'
-
-              return (
-                <Link
-                  key={`${link.href}-${index}`}
-                  href={link.href ?? '#'}
-                  className={cn(
-                    'inline-flex flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg px-6 py-3.5 text-sm font-semibold transition-colors',
-                    isPrimary
-                      ? 'bg-white text-stone-900 hover:bg-stone-100'
-                      : 'border border-white/15 bg-white/10 text-white hover:bg-white/20'
-                  )}
-                >
-                  <CtaIcon icon={link.icon} />
-                  {link.label}
-                </Link>
-              )
-            })}
-          </div>
-        )}
-
-        {showReplayButton !== false && replayLabel && (
-          <div
-            className="mt-8"
-            style={{
-              opacity: visible ? 1 : 0,
-              transition: 'opacity 0.6s ease 1.1s'
-            }}
-          >
-            <button
-              type="button"
-              onClick={fireConfetti}
-              className="flex cursor-pointer items-center gap-1.5 text-xs text-stone-600 transition-colors hover:text-stone-400"
-            >
-              <Sparkles className="h-3 w-3" />
-              {replayLabel}
-            </button>
-          </div>
-        )}
-      </div>
-
-      {showBrandLabel !== false && brandLabel && (
-        <div
-          className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 text-xs font-black uppercase tracking-[0.35em] text-stone-500"
-          style={{
-            opacity: visible ? 0.4 : 0,
-            transition: 'opacity 0.6s ease 1.2s'
-          }}
-        >
-          {brandLabel}
-        </div>
-      )}
-
-      <style>{`
-        @keyframes thanks-confetti-ping {
-          75%, 100% {
-            transform: scale(2);
-            opacity: 0;
-          }
-        }
-      `}</style>
-    </section>
-  )
-}
+'use client'
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Link from 'next/link'
+import {
+  Check,
+  DownloadCloud,
+  Home,
+  LayoutGrid,
+  MailCheck,
+  ShieldCheck,
+  Sparkles,
+} from 'lucide-react'
+import { cn } from '@/utilities/ui'
+
+type InfoPill = {
+  id?: string | null
+  label?: string | null
+  icon?: 'mail' | 'download' | 'shield' | null
+}
+
+type CtaLink = {
+  label?: string | null
+  href?: string | null
+  variant?: 'primary' | 'secondary' | null
+  icon?: 'home' | 'grid' | 'download' | null
+}
+
+type ThanksConfettiProps = {
+  sectionId?: string | null
+  customCSS?: string | null
+  headline?: string | null
+  description?: string | null
+  subDescription?: string | null
+  replayLabel?: string | null
+  brandLabel?: string | null
+  showBrandLabel?: boolean | null
+  showReplayButton?: boolean | null
+  autoPlayConfetti?: boolean | null
+  confettiDuration?: number | null
+  infoPills?: InfoPill[] | null
+  ctaLinks?: CtaLink[] | null
+  className?: string
+  disableInnerContainer?: boolean
+}
+
+type ConfettiParticle = {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  size: number
+  rotation: number
+  rotationSpeed: number
+  color: string
+  shape: 'circle' | 'square'
+  life: number
+  maxLife: number
+}
+
+const CONFETTI_COLORS = ['#d6d3d1', '#a8a29e', '#10b981', '#6ee7b7', '#ffffff', '#f5f5f4']
+
+const defaultInfoPills: Required<Pick<InfoPill, 'label' | 'icon'>>[] = [
+  { icon: 'mail', label: 'Confirmation sent' },
+  { icon: 'download', label: 'Files ready' },
+  { icon: 'shield', label: 'License activated' },
+]
+
+const defaultCtaLinks: Required<Pick<CtaLink, 'label' | 'href' | 'variant' | 'icon'>>[] = [
+  { label: 'Back to Home', href: '/', variant: 'primary', icon: 'home' },
+  { label: 'Continue Browsing', href: '/components', variant: 'secondary', icon: 'grid' },
+]
+
+function PillIcon({ icon }: { icon?: InfoPill['icon'] }) {
+  if (icon === 'download') return <DownloadCloud className="h-3.5 w-3.5" />
+  if (icon === 'shield') return <ShieldCheck className="h-3.5 w-3.5" />
+
+  return <MailCheck className="h-3.5 w-3.5" />
+}
+
+function CtaIcon({ icon }: { icon?: CtaLink['icon'] }) {
+  if (icon === 'grid') return <LayoutGrid className="h-4 w-4" />
+  if (icon === 'download') return <DownloadCloud className="h-4 w-4" />
+
+  return <Home className="h-4 w-4" />
+}
+
+function getSafeDuration(duration?: number | null) {
+  if (typeof duration !== 'number' || !Number.isFinite(duration)) return 3000
+  return Math.min(Math.max(duration, 1000), 8000)
+}
+
+function createParticles({
+  amount,
+  originX,
+  originY,
+  angle,
+  spread,
+  velocity,
+  width,
+  height,
+}: {
+  amount: number
+  originX: number
+  originY: number
+  angle?: number
+  spread: number
+  velocity: number
+  width: number
+  height: number
+}): ConfettiParticle[] {
+  return Array.from({ length: amount }, () => {
+    const baseAngle = typeof angle === 'number' ? angle : Math.random() * 360
+    const randomAngle = (baseAngle - spread / 2 + Math.random() * spread) * (Math.PI / 180)
+    const speed = velocity * (0.45 + Math.random() * 0.75)
+
+    return {
+      x: originX * width,
+      y: originY * height,
+      vx: Math.cos(randomAngle) * speed,
+      vy: Math.sin(randomAngle) * speed,
+      size: 4 + Math.random() * 7,
+      rotation: Math.random() * Math.PI,
+      rotationSpeed: -0.22 + Math.random() * 0.44,
+      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)] ?? '#ffffff',
+      shape: Math.random() > 0.5 ? 'circle' : 'square',
+      life: 0,
+      maxLife: 90 + Math.random() * 70,
+    }
+  })
+}
+
+export function DDThanks({
+  sectionId,
+  headline = 'Thank you! 🎉',
+  description = 'Your order has been confirmed and is on its way.',
+  subDescription = "We've sent a confirmation email with your download links and license keys. Check your inbox — and maybe your spam folder too.",
+  replayLabel = 'Replay confetti',
+  brandLabel = 'DesignsDusted',
+  showBrandLabel = true,
+  showReplayButton = true,
+  autoPlayConfetti = true,
+  confettiDuration = 3000,
+  infoPills,
+  ctaLinks,
+  className,
+}: ThanksConfettiProps) {
+  const hasRun = useRef(false)
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const animationRef = useRef<number | null>(null)
+  const particlesRef = useRef<ConfettiParticle[]>([])
+  const [visible, setVisible] = useState(false)
+
+  const pills = useMemo(() => {
+    const source = infoPills?.length ? infoPills : defaultInfoPills
+    return source.filter((pill) => pill.label)
+  }, [infoPills])
+
+  const links = useMemo(() => {
+    const source = ctaLinks?.length ? ctaLinks : defaultCtaLinks
+    return source.filter((link) => link.label && link.href)
+  }, [ctaLinks])
+
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+      animationRef.current = null
+    }
+  }, [])
+
+  const fireConfetti = useCallback(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reducedMotion) return
+
+    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
+    const width = window.innerWidth
+    const height = window.innerHeight
+
+    canvas.width = width * pixelRatio
+    canvas.height = height * pixelRatio
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${height}px`
+    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
+
+    const duration = getSafeDuration(confettiDuration)
+    const end = performance.now() + duration
+
+    particlesRef.current = [
+      ...particlesRef.current,
+      ...createParticles({
+        amount: 120,
+        originX: 0.5,
+        originY: 0.5,
+        spread: 100,
+        velocity: 20,
+        width,
+        height,
+      }),
+      ...createParticles({
+        amount: 60,
+        originX: 0,
+        originY: 0.6,
+        angle: -35,
+        spread: 70,
+        velocity: 18,
+        width,
+        height,
+      }),
+      ...createParticles({
+        amount: 60,
+        originX: 1,
+        originY: 0.6,
+        angle: 215,
+        spread: 70,
+        velocity: 18,
+        width,
+        height,
+      }),
+    ]
+
+    stopAnimation()
+
+    const frame = (now: number) => {
+      ctx.clearRect(0, 0, width, height)
+
+      if (now < end && Math.random() > 0.35) {
+        particlesRef.current.push(
+          ...createParticles({
+            amount: 2,
+            originX: 0,
+            originY: 0.3,
+            angle: -25,
+            spread: 55,
+            velocity: 10,
+            width,
+            height,
+          }),
+          ...createParticles({
+            amount: 2,
+            originX: 1,
+            originY: 0.3,
+            angle: 205,
+            spread: 55,
+            velocity: 10,
+            width,
+            height,
+          }),
+        )
+      }
+
+      particlesRef.current = particlesRef.current.filter((particle) => {
+        particle.life += 1
+        particle.x += particle.vx
+        particle.y += particle.vy
+        particle.vy += 0.28
+        particle.vx *= 0.992
+        particle.rotation += particle.rotationSpeed
+
+        const opacity = Math.max(0, 1 - particle.life / particle.maxLife)
+        if (opacity <= 0 || particle.y > height + 40) return false
+
+        ctx.save()
+        ctx.globalAlpha = opacity
+        ctx.translate(particle.x, particle.y)
+        ctx.rotate(particle.rotation)
+        ctx.fillStyle = particle.color
+
+        if (particle.shape === 'circle') {
+          ctx.beginPath()
+          ctx.arc(0, 0, particle.size * 0.5, 0, Math.PI * 2)
+          ctx.fill()
+        } else {
+          ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size)
+        }
+
+        ctx.restore()
+        return true
+      })
+
+      if (particlesRef.current.length || now < end) {
+        animationRef.current = requestAnimationFrame(frame)
+      } else {
+        ctx.clearRect(0, 0, width, height)
+        animationRef.current = null
+      }
+    }
+
+    animationRef.current = requestAnimationFrame(frame)
+  }, [confettiDuration, stopAnimation])
+
+  useEffect(() => {
+    if (hasRun.current) return
+    hasRun.current = true
+
+    const timer = window.setTimeout(() => {
+      setVisible(true)
+      if (autoPlayConfetti !== false) fireConfetti()
+    }, 200)
+
+    return () => window.clearTimeout(timer)
+  }, [autoPlayConfetti, fireConfetti])
+
+  useEffect(() => {
+    return () => {
+      stopAnimation()
+      particlesRef.current = []
+    }
+  }, [stopAnimation])
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className={cn(
+        'thanks-confetti-section relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-stone-transparent dark:bg-stone-950 px-4 py-24 text-center hue-rotate-300 invert-100 dark:invert-0',
+        className,
+      )}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        className="pointer-events-none fixed inset-0 z-60 h-screen w-screen"
+      />
+
+      <div className="pointer-events-none absolute inset-0">
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 20% 50%, rgba(16,185,129,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%)',
+          }}
+        />
+        <div
+          className="absolute inset-0 opacity-5"
+          style={{
+            backgroundImage:
+              'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
+            backgroundSize: '60px 60px',
+          }}
+        />
+      </div>
+
+      <div
+        className="relative z-10 flex w-full max-w-lg flex-col items-center px-2"
+        style={{
+          opacity: visible ? 1 : 0,
+          transform: visible ? 'translateY(0) scale(1)' : 'translateY(32px) scale(0.96)',
+          transition:
+            'opacity 0.7s cubic-bezier(0.34,1.56,0.64,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1)',
+        }}
+      >
+        <div className="relative mb-8">
+          <div
+            className="flex h-24 w-24 items-center justify-center rounded-full border border-emerald-500/10"
+            style={{
+              background: 'linear-gradient(135deg, #10b981 0%, #6ee7b7 100%)',
+              boxShadow: '0 0 60px rgba(16,185,129,0.35), 0 0 120px rgba(16,185,129,0.15)',
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'scale(1)' : 'scale(0.5)',
+              transition:
+                'opacity 0.5s ease 0.3s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s',
+            }}
+          >
+            <Check className="h-11 w-11 stroke-[3px] text-emerald-500 dark:text-white" />
+          </div>
+          <div
+            className="absolute inset-0 rounded-full bg-emerald-500/20"
+            style={{
+              animation: visible
+                ? 'thanks-confetti-ping 2s cubic-bezier(0,0,0.2,1) infinite 0.8s'
+                : 'none',
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            opacity: visible ? 1 : 0,
+            transform: visible ? 'translateY(0)' : 'translateY(20px)',
+            transition: 'opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s',
+          }}
+        >
+          {headline && (
+            <h1 className="mb-3 text-4xl font-bold tracking-tight text-white md:text-5xl">
+              {headline}
+            </h1>
+          )}
+
+          {description && (
+            <p className="mb-2 text-lg leading-relaxed text-stone-400">{description}</p>
+          )}
+
+          {subDescription && (
+            <p className="mb-10 text-sm leading-relaxed text-stone-500">{subDescription}</p>
+          )}
+        </div>
+
+        {pills.length > 0 && (
+          <div
+            className="mb-10 flex flex-wrap items-center justify-center gap-3"
+            style={{
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'translateY(0)' : 'translateY(16px)',
+              transition: 'opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s',
+            }}
+          >
+            {pills.map((item, index) => (
+              <div
+                key={
+                  'id' in item ? (item.id ?? `${item.label}-${index}`) : `${item.label}-${index}`
+                }
+                className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2"
+              >
+                <span className="flex h-4 w-4 items-center justify-center text-emerald-400">
+                  <PillIcon icon={item.icon} />
+                </span>
+                <span className="whitespace-nowrap text-sm text-stone-400">{item.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {links.length > 0 && (
+          <div
+            className="flex w-full flex-col gap-3 sm:flex-row"
+            style={{
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'translateY(0)' : 'translateY(16px)',
+              transition: 'opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s',
+            }}
+          >
+            {links.map((link, index) => {
+              const isPrimary =
+                (link.variant ?? (index === 0 ? 'primary' : 'secondary')) === 'primary'
+
+              return (
+                <Link
+                  key={`${link.href}-${index}`}
+                  href={link.href ?? '#'}
+                  className={cn(
+                    'inline-flex flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg px-6 py-3.5 text-sm font-semibold transition-colors',
+                    'backdrop-blur-lg rounded-2xl squircle px-5 py-2.5 text-sm font-medium transition-all duration-300 0 hover:shadow-2xl hover:-translate-y-0.5 hover:transition-all hover:duration-300',
+                    isPrimary
+                      ? 'bg-white text-stone-900 hover:bg-stone-100'
+                      : 'border border-white/15 bg-white/10 text-white hover:bg-white/20',
+                  )}
+                >
+                  <CtaIcon icon={link.icon} />
+                  {link.label}
+                </Link>
+              )
+            })}
+          </div>
+        )}
+
+        {showReplayButton !== false && replayLabel && (
+          <div
+            className="mt-8"
+            style={{
+              opacity: visible ? 1 : 0,
+              transition: 'opacity 0.6s ease 1.1s',
+            }}
+          >
+            <button
+              type="button"
+              onClick={fireConfetti}
+              className="flex cursor-pointer items-center gap-1.5 text-xs text-stone-600 transition-colors hover:text-stone-400"
+            >
+              <Sparkles className="h-3 w-3" />
+              {replayLabel}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {showBrandLabel !== false && brandLabel && (
+        <div
+          className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 text-xs font-black uppercase tracking-[0.35em] text-stone-500"
+          style={{
+            opacity: visible ? 0.4 : 0,
+            transition: 'opacity 0.6s ease 1.2s',
+          }}
+        >
+          {brandLabel}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes thanks-confetti-ping {
+          75%, 100% {
+            transform: scale(2);
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </section>
+  )
+}