Finish Tier Pricing

"use client";

import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";

/**
 * FinishTierPricing — pricing where each tier is a material, shown on the object.
 *
 * The dial stands on a dark mirror floor in the chosen finish (WebGL2, its
 * reflection and soft shadow under it); pick another tier and it changes
 * material in ~400ms, hops and settles, and its ring clicks round to that
 * tier's detent. The tiers are a radio group with arrow keys.
 *
 * Part of the Spatial 3D kit: a dark studio (#0a0a0d, panels #101114 and
 * #16171b, ink #f2f1ee) with anodised copper #ff7a3d only as light, and
 * one object in three finishes (titanium, ceramic, soft-touch polymer) under
 * one rig: key, fill and rim, soft shadows, occlusion and a softbox
 * reflection. Hanken Grotesk through var(--font-hanken) for display over

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}