'use client';
import {useId} from 'react';
type Paint = (name:string)=>string;
const palettes = [
['#b7fff0','#35debd','#03957c','#075d60'],
['#c8e7ff','#6baaff','#3665e9','#16378b'],
['#ecdbff','#bb8cff','#8650e5','#49318f'],
['#fff0c1','#ffc56d','#e79438','#875123'],
['#c3fff9','#56ded8','#14a9b6','#116079'],
] as const;
function Platform({x,y,width=188,paint}:{x:number;y:number;width?:number;paint:Paint}){
const h=width*.24;
return ;
}
function Coin({x,y,r=28,paint,logo=false,className}:{x:number;y:number;r?:number;paint:Paint;logo?:boolean;className?:string}){
return {logo?:};
}
function TokenStack({x,y,paint,levels=3}:{x:number;y:number;paint:Paint;levels?:number}){
return {Array.from({length:levels},(_,i)=>)};
}
function SelectionScene({paint}:{paint:Paint}){
return <>
{[0,1,2,3,4].map(row=>)}
;
}
function VerificationScene({paint}:{paint:Paint}){
return <>
{[{x:214,y:78},{x:458,y:67},{x:510,y:236}].map(({x,y},i)=>)}
;
}
function MintingScene({paint}:{paint:Paint}){
return <>
{[28,56,84].map((y,i)=>)}
{[{x:157,y:82,r:15},{x:448,y:64,r:16},{x:534,y:137,r:11},{x:221,y:270,r:9}].map(({x,y,r},i)=>)}
;
}
function MarketPortal({x,y,paint,type=0}:{x:number;y:number;paint:Paint;type?:number}){
return {type===0?:type===1?:};
}
function DistributionScene({paint}:{paint:Paint}){
return <>
{[0,1,2,3,4].map(i=>)}
;
}
function ManagementScene({paint}:{paint:Paint}){
return <>
;
}
/** Five separate editorial scenes; decorative, never a real issuance/status display. */
export function TokenizationStageScene({stage}:{stage:number}){
const id=`tz-scene-${useId().replace(/[^a-zA-Z0-9_-]/g,'')}`;
const current=Math.max(0,Math.min(4,Math.floor(Number.isFinite(stage)?stage:0)));
const [light,bright,accent,deep]=palettes[current];
const paint:Paint=name=>`url(#${id}-${name})`;
const scenes=[SelectionScene,VerificationScene,MintingScene,DistributionScene,ManagementScene];
const Scene=scenes[current];
return ;
}