// SHINAI Design System — Component Library

// ─── TOKENS ────────────────────────────────────────────────────────────────
const GOLD='#C9A050',GOLD_L='#E2C470',GOLD_D='#8B6A22';
const BLUE='#3AAEE8',BLUE_D='#1872B8';
const PLAT='#A6AEBB',COPPER='#C47038';
const BG_D='#090A0E',SF_D='#111219',SF_D2='#191A24',BR_D='#242530';
const TX_P='#EBE7DF',TX_S='#888294';
const BG_L='#F5F2EB',SF_L='#FFFFFF',BR_L='#DDD8CE';
const TX_DK='#19170F',TX_DKS='#68624F';
const FD="'Cormorant Garamond', Georgia, serif";
const FU="'Space Grotesk', system-ui, sans-serif";

// ─── HELPERS ───────────────────────────────────────────────────────────────
function mkRand(s){let x=(s^0xcafe)>>>0;return()=>{x^=x<<13;x^=x>>>17;x^=x<<5;return(x>>>0)/0xffffffff;}}
function ptD(pts){return pts.map(([x,y],i)=>`${i?'L':'M'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');}
function lerp(a,b,t){return a+(b-a)*t;}
function hx(h){return[parseInt(h.slice(1,3),16),parseInt(h.slice(3,5),16),parseInt(h.slice(5,7),16)];}
function lerpCol(c1,c2,t){const [r1,g1,b1]=hx(c1),[r2,g2,b2]=hx(c2);return`rgb(${Math.round(lerp(r1,r2,t))},${Math.round(lerp(g1,g2,t))},${Math.round(lerp(b1,b2,t))})`;}

// ─── MESH DECORATION ───────────────────────────────────────────────────────
function MeshDeco({seed=1,n=35,w,h,c,alpha=0.12,maxD,st={}}){
  const col=c||GOLD;
  const md=maxD||Math.min(w,h)*0.28;
  const r=mkRand(seed);
  const pts=Array.from({length:n},()=>[r()*w,r()*h]);
  const lines=[];
  for(let i=0;i<pts.length;i++)
    for(let j=i+1;j<pts.length;j++){
      const d=Math.hypot(pts[j][0]-pts[i][0],pts[j][1]-pts[i][1]);
      if(d<md)lines.push([i,j]);
    }
  return(
    <svg style={{position:'absolute',inset:0,pointerEvents:'none',...st}} width={w} height={h}>
      {lines.map(([i,j],k)=>(
        <line key={k} x1={pts[i][0]} y1={pts[i][1]} x2={pts[j][0]} y2={pts[j][1]} stroke={col} strokeWidth="0.6" opacity={alpha}/>
      ))}
      {pts.map(([cx,cy],i)=>(
        <circle key={i} cx={cx} cy={cy} r="1.8" fill={col} opacity={alpha*1.6}/>
      ))}
    </svg>
  );
}

// ─── LINE / AREA CHART ─────────────────────────────────────────────────────
function ShinaiLineChart({dark=true,w=680,h=390}){
  const bg=dark?SF_D:SF_L,bor=dark?BR_D:BR_L,gc=dark?'#1C1D28':'#ECE7DC';
  const ac=dark?TX_S:TX_DKS,lc=dark?TX_P:TX_DK;
  const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const acc=[87,89,91,88,92,94,93,95,94,96,97,98];
  const spd=[72,75,74,78,81,80,84,85,87,88,90,92];
  const pl=65,pr=25,pt=58,pb=50;
  const pw=w-pl-pr,ph=h-pt-pb;
  const yMn=65,yMx=100;
  const xOf=i=>pl+i/11*pw;
  const yOf=v=>pt+ph-(v-yMn)/(yMx-yMn)*ph;
  const aPts=acc.map((v,i)=>[xOf(i),yOf(v)]);
  const sPts=spd.map((v,i)=>[xOf(i),yOf(v)]);
  const bl=pt+ph;
  const uid=`lc${dark?1:2}`;
  return(
    <div style={{width:w,height:h,background:bg,borderRadius:12,overflow:'hidden',position:'relative',border:`1px solid ${bor}`,fontFamily:FU}}>
      <MeshDeco seed={3} n={28} w={w} h={h} alpha={dark?0.08:0.05}/>
      <div style={{position:'absolute',top:16,left:pl,right:pr,display:'flex',justifyContent:'space-between',alignItems:'flex-start',zIndex:1}}>
        <div>
          <div style={{fontFamily:FD,fontSize:20,color:lc,letterSpacing:'0.02em',lineHeight:1}}>AI Processing Performance</div>
          <div style={{fontSize:10,color:ac,marginTop:3,letterSpacing:'0.07em',textTransform:'uppercase'}}>12-Month Trend · SHINAI Platform</div>
        </div>
        <div style={{display:'flex',gap:14,fontSize:10,color:ac,alignItems:'center'}}>
          <span style={{display:'flex',alignItems:'center',gap:5}}><span style={{width:18,height:2,background:GOLD,display:'inline-block',borderRadius:1}}/> Accuracy</span>
          <span style={{display:'flex',alignItems:'center',gap:5}}><span style={{width:18,height:2,background:BLUE,display:'inline-block',borderRadius:1}}/> Speed Index</span>
        </div>
      </div>
      <svg width={w} height={h} style={{position:'absolute',inset:0}}>
        <defs>
          <filter id={`gw${uid}`}><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          <linearGradient id={`ag${uid}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={GOLD} stopOpacity="0.28"/>
            <stop offset="100%" stopColor={GOLD} stopOpacity="0.01"/>
          </linearGradient>
          <linearGradient id={`bg${uid}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={BLUE} stopOpacity="0.18"/>
            <stop offset="100%" stopColor={BLUE} stopOpacity="0.01"/>
          </linearGradient>
        </defs>
        {[70,75,80,85,90,95,100].map(v=>(
          <g key={v}>
            <line x1={pl} y1={yOf(v)} x2={pl+pw} y2={yOf(v)} stroke={gc} strokeWidth="1"/>
            <text x={pl-8} y={yOf(v)+4} textAnchor="end" fontSize="10" fill={ac} fontFamily={FU}>{v}</text>
          </g>
        ))}
        {months.map((m,i)=>(
          <text key={m} x={xOf(i)} y={bl+18} textAnchor="middle" fontSize="10" fill={ac} fontFamily={FU}>{m}</text>
        ))}
        <path d={`${ptD(sPts)} L${xOf(11).toFixed(1)},${bl} L${xOf(0).toFixed(1)},${bl} Z`} fill={`url(#bg${uid})`}/>
        <path d={`${ptD(aPts)} L${xOf(11).toFixed(1)},${bl} L${xOf(0).toFixed(1)},${bl} Z`} fill={`url(#ag${uid})`}/>
        <path d={ptD(sPts)} fill="none" stroke={BLUE} strokeWidth="1.5" filter={`url(#gw${uid})`} opacity="0.9"/>
        <path d={ptD(aPts)} fill="none" stroke={GOLD} strokeWidth="2" filter={`url(#gw${uid})`}/>
        {aPts.map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="3" fill={GOLD} stroke={bg} strokeWidth="1.5"/>
        ))}
        <line x1={pl} y1={pt} x2={pl} y2={bl} stroke={bor} strokeWidth="1"/>
        <line x1={pl} y1={bl} x2={pl+pw} y2={bl} stroke={bor} strokeWidth="1"/>
      </svg>
      <div style={{position:'absolute',bottom:8,right:pr+4,fontSize:9,color:BR_D,letterSpacing:'0.12em',fontFamily:FU,zIndex:1}}>SHINAI®</div>
    </div>
  );
}

// ─── BAR CHART ─────────────────────────────────────────────────────────────
function ShinaiBarChart({dark=true,w=680,h=390}){
  const bg=dark?SF_D:SF_L,bor=dark?BR_D:BR_L,gc=dark?'#1C1D28':'#ECE7DC';
  const ac=dark?TX_S:TX_DKS,lc=dark?TX_P:TX_DK;
  const cats=['LiDAR','NeRF','Gaussian','Photogrammetry'];
  const vals=[94,89,96,82];
  const cols=[GOLD,BLUE,GOLD_L,PLAT];
  const pl=68,pr=28,pt=60,pb=52;
  const pw=w-pl-pr,ph=h-pt-pb;
  const bw=pw/cats.length;
  const bPad=bw*0.22;
  const uid=`bc${dark?1:2}`;
  return(
    <div style={{width:w,height:h,background:bg,borderRadius:12,overflow:'hidden',position:'relative',border:`1px solid ${bor}`,fontFamily:FU}}>
      <MeshDeco seed={7} n={24} w={w} h={h} alpha={dark?0.07:0.05}/>
      <div style={{position:'absolute',top:16,left:pl,right:pr,zIndex:1}}>
        <div style={{fontFamily:FD,fontSize:20,color:lc,letterSpacing:'0.02em',lineHeight:1}}>3D Scan Quality by Method</div>
        <div style={{fontSize:10,color:ac,marginTop:3,letterSpacing:'0.07em',textTransform:'uppercase'}}>Composite Quality Score · 0–100</div>
      </div>
      <svg width={w} height={h} style={{position:'absolute',inset:0}}>
        <defs>
          <filter id={`gw${uid}`}><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          {cols.map((c,i)=>(
            <linearGradient key={i} id={`bg${uid}${i}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={c} stopOpacity="1"/>
              <stop offset="100%" stopColor={c} stopOpacity="0.45"/>
            </linearGradient>
          ))}
        </defs>
        {[0,20,40,60,80,100].map(v=>(
          <g key={v}>
            <line x1={pl} y1={pt+ph-(v/100)*ph} x2={pl+pw} y2={pt+ph-(v/100)*ph} stroke={gc} strokeWidth="1"/>
            <text x={pl-8} y={pt+ph-(v/100)*ph+4} textAnchor="end" fontSize="10" fill={ac} fontFamily={FU}>{v}</text>
          </g>
        ))}
        {vals.map((v,i)=>{
          const bh=(v/100)*ph,bx=pl+i*bw+bPad,bWidth=bw-bPad*2,by=pt+ph-bh;
          return(
            <g key={i}>
              <rect x={bx} y={by} width={bWidth} height={bh} fill={`url(#bg${uid}${i})`} rx="3" filter={`url(#gw${uid})`} opacity="0.92"/>
              <text x={bx+bWidth/2} y={by-9} textAnchor="middle" fontSize="12" fill={cols[i]} fontFamily={FU} fontWeight="600">{v}</text>
              <text x={bx+bWidth/2} y={pt+ph+18} textAnchor="middle" fontSize="10" fill={ac} fontFamily={FU}>{cats[i]}</text>
            </g>
          );
        })}
        <line x1={pl} y1={pt} x2={pl} y2={pt+ph} stroke={bor} strokeWidth="1"/>
        <line x1={pl} y1={pt+ph} x2={pl+pw} y2={pt+ph} stroke={bor} strokeWidth="1"/>
      </svg>
    </div>
  );
}

// ─── SCATTER / POINT CLOUD ──────────────────────────────────────────────────
function ShinaiScatterChart({w=680,h=390}){
  const uid='scat';
  const r=mkRand(99);
  const n=72;
  const pl=62,pr=28,pt=60,pb=52;
  const pw=w-pl-pr,ph=h-pt-pb;
  const pts=Array.from({length:n},()=>{
    const depth=r();
    let x=r(),y=r();
    // slight clustering
    x=x*0.85+0.08; y=y*0.82+0.09;
    return{x,y,depth,sz:1.8+r()*3.2};
  });
  return(
    <div style={{width:w,height:h,background:SF_D,borderRadius:12,overflow:'hidden',position:'relative',border:`1px solid ${BR_D}`,fontFamily:FU}}>
      <div style={{position:'absolute',top:16,left:pl,right:pr,display:'flex',justifyContent:'space-between',alignItems:'flex-start',zIndex:1}}>
        <div>
          <div style={{fontFamily:FD,fontSize:20,color:TX_P,letterSpacing:'0.02em',lineHeight:1}}>Point Cloud Density Analysis</div>
          <div style={{fontSize:10,color:TX_S,marginTop:3,letterSpacing:'0.07em',textTransform:'uppercase'}}>Spatial Distribution · Depth Mapping</div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:3,alignItems:'flex-end'}}>
          <div style={{fontSize:9,color:TX_S,letterSpacing:'0.07em',textTransform:'uppercase'}}>Depth</div>
          <svg width={80} height={10} style={{borderRadius:2}}>
            <defs>
              <linearGradient id="depLeg" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor={GOLD}/><stop offset="100%" stopColor={BLUE}/>
              </linearGradient>
            </defs>
            <rect width="80" height="10" fill="url(#depLeg)" rx="2"/>
          </svg>
          <div style={{display:'flex',justifyContent:'space-between',width:80,fontSize:9,color:TX_S}}>
            <span>Near</span><span>Far</span>
          </div>
        </div>
      </div>
      <svg width={w} height={h} style={{position:'absolute',inset:0}}>
        <defs>
          <filter id={`gw${uid}`}><feGaussianBlur stdDeviation="1.8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        </defs>
        {/* Grid */}
        {Array.from({length:9},(_,i)=><line key={`h${i}`} x1={pl} y1={pt+i/8*ph} x2={pl+pw} y2={pt+i/8*ph} stroke="#181924" strokeWidth="1"/>)}
        {Array.from({length:9},(_,i)=><line key={`v${i}`} x1={pl+i/8*pw} y1={pt} x2={pl+i/8*pw} y2={pt+ph} stroke="#181924" strokeWidth="1"/>)}
        {/* Mesh connections */}
        {pts.map((p1,i)=>pts.slice(i+1,i+5).map((p2,j)=>{
          const d=Math.hypot((p1.x-p2.x)*pw,(p1.y-p2.y)*ph);
          if(d>65)return null;
          return <line key={`${i}${j}`} x1={pl+p1.x*pw} y1={pt+(1-p1.y)*ph} x2={pl+p2.x*pw} y2={pt+(1-p2.y)*ph} stroke={GOLD} strokeWidth="0.4" opacity="0.12"/>;
        }))}
        {/* Points */}
        {pts.map((p,i)=>{
          const cx=pl+p.x*pw,cy=pt+(1-p.y)*ph;
          return <circle key={i} cx={cx} cy={cy} r={p.sz} fill={lerpCol(GOLD,BLUE,p.depth)} opacity="0.88" filter={`url(#gw${uid})`}/>;
        })}
        <line x1={pl} y1={pt} x2={pl} y2={pt+ph} stroke={BR_D} strokeWidth="1"/>
        <line x1={pl} y1={pt+ph} x2={pl+pw} y2={pt+ph} stroke={BR_D} strokeWidth="1"/>
        {['0','0.2','0.4','0.6','0.8','1.0'].map((v,i)=>(
          <text key={v} x={pl+i/5*pw} y={pt+ph+16} textAnchor="middle" fontSize="10" fill={TX_S} fontFamily={FU}>{v}</text>
        ))}
        {['0','0.2','0.4','0.6','0.8','1.0'].map((v,i)=>(
          <text key={v} x={pl-8} y={pt+ph-i/5*ph+4} textAnchor="end" fontSize="10" fill={TX_S} fontFamily={FU}>{v}</text>
        ))}
        <text x={pl+pw/2} y={h-8} textAnchor="middle" fontSize="9" fill={TX_S} fontFamily={FU} letterSpacing="3">SCAN WIDTH (m)</text>
        <text x={14} y={pt+ph/2} textAnchor="middle" fontSize="9" fill={TX_S} fontFamily={FU} transform={`rotate(-90,14,${pt+ph/2})`} letterSpacing="3">SCAN HEIGHT (m)</text>
      </svg>
    </div>
  );
}

// ─── RADAR CHART ────────────────────────────────────────────────────────────
function ShinaiRadarChart({w=680,h=390}){
  const dims=['Accuracy','Speed','Resolution','Coverage','Portability'];
  const N=dims.length;
  const shinai=[95,88,97,82,79];
  const avg=[74,76,70,80,75];
  const cx=w/2,cy=(h+20)/2;
  const R=Math.min(w,h)*0.31;
  const ang=i=>Math.PI/2-i*(2*Math.PI/N);
  const pol=(v,i)=>{const a=ang(i),r2=(v/100)*R;return[cx+r2*Math.cos(a),cy-r2*Math.sin(a)];};
  const sPts=shinai.map((v,i)=>pol(v,i));
  const aPts=avg.map((v,i)=>pol(v,i));
  return(
    <div style={{width:w,height:h,background:SF_D,borderRadius:12,overflow:'hidden',position:'relative',border:`1px solid ${BR_D}`,fontFamily:FU}}>
      <MeshDeco seed={12} n={18} w={w} h={h} alpha={0.07}/>
      <div style={{position:'absolute',top:16,left:30,right:30,display:'flex',justifyContent:'space-between',alignItems:'flex-start',zIndex:1}}>
        <div>
          <div style={{fontFamily:FD,fontSize:20,color:TX_P,letterSpacing:'0.02em',lineHeight:1}}>Technology Capability Matrix</div>
          <div style={{fontSize:10,color:TX_S,marginTop:3,letterSpacing:'0.07em',textTransform:'uppercase'}}>Comparative Analysis · 5 Dimensions</div>
        </div>
        <div style={{display:'flex',gap:14,fontSize:10,color:TX_S,alignItems:'center'}}>
          <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:10,height:10,background:GOLD,display:'inline-block',borderRadius:'50%',opacity:0.8}}/> SHINAI AI</span>
          <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:10,height:10,background:PLAT,display:'inline-block',borderRadius:'50%',opacity:0.5}}/> Industry Avg</span>
        </div>
      </div>
      <svg width={w} height={h} style={{position:'absolute',inset:0}}>
        <defs>
          <filter id="gwRadar"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        </defs>
        {[20,40,60,80,100].map(v=>(
          <polygon key={v} points={dims.map((_,i)=>pol(v,i).join(',')).join(' ')} fill="none" stroke={BR_D} strokeWidth={v===100?'1':'0.6'} opacity={v===100?1:0.7}/>
        ))}
        {dims.map((_,i)=>{const [x2,y2]=pol(100,i);return <line key={i} x1={cx} y1={cy} x2={x2} y2={y2} stroke={BR_D} strokeWidth="0.8"/>;} )}
        <polygon points={aPts.map(p=>p.join(',')).join(' ')} fill={PLAT} fillOpacity="0.08" stroke={PLAT} strokeWidth="1.5" opacity="0.5"/>
        <polygon points={sPts.map(p=>p.join(',')).join(' ')} fill={GOLD} fillOpacity="0.14" stroke={GOLD} strokeWidth="2" filter="url(#gwRadar)"/>
        {sPts.map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="4" fill={GOLD} stroke={SF_D} strokeWidth="1.5"/>
        ))}
        {dims.map((d,i)=>{
          const a=ang(i),lr=R+30,lx=cx+lr*Math.cos(a),ly=cy-lr*Math.sin(a);
          const ta=Math.abs(Math.cos(a))<0.15?'middle':Math.cos(a)>0?'start':'end';
          return <text key={i} x={lx} y={ly+4} textAnchor={ta} fontSize="11" fill={TX_P} fontFamily={FU} letterSpacing="0.03em">{d}</text>;
        })}
        {[20,40,60,80,100].map(v=>(
          <text key={v} x={cx+5} y={cy-(v/100)*R-3} fontSize="9" fill={TX_S} fontFamily={FU}>{v}</text>
        ))}
      </svg>
    </div>
  );
}

// ─── KPI CARDS ─────────────────────────────────────────────────────────────
function ShinaiKPICards({dark=true,w=720,h=215}){
  const bg=dark?SF_D:SF_L,bor=dark?BR_D:BR_L,lc=dark?TX_P:TX_DK,sc=dark?TX_S:TX_DKS;
  const cards=[
    {label:'Scan Accuracy',value:'98.7',unit:'%',sub:'+1.3pp vs prior quarter',col:GOLD,spark:[82,85,84,87,89,91,93,92,95,97,98,98.7]},
    {label:'Point Throughput',value:'2.3M',unit:'/sec',sub:'Peak sustained rate',col:BLUE,spark:[1.1,1.3,1.5,1.6,1.8,1.9,2.0,2.0,2.1,2.2,2.25,2.3]},
    {label:'Spatial Precision',value:'0.4',unit:'mm',sub:'Sub-millimeter grade',col:PLAT,spark:[1.2,1.1,0.9,0.85,0.8,0.75,0.7,0.65,0.6,0.55,0.45,0.4]},
    {label:'Platform Uptime',value:'99.2',unit:'%',sub:'vs 99.0% SLA target',col:COPPER,spark:[98,98.5,97.8,98.8,99,99.1,99.2,99.0,99.1,99.3,99.2,99.2]},
  ];
  function Spark({data,col}){
    const mn=Math.min(...data),mx=Math.max(...data);
    const W=76,H=36;
    const pts=data.map((v,i)=>[i/(data.length-1)*W,(1-(v-mn)/(mx-mn))*H]);
    const ckey=col.replace('#','');
    return(
      <svg width={W} height={H+4} style={{overflow:'visible'}}>
        <defs>
          <linearGradient id={`spk${ckey}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={col} stopOpacity="0.3"/>
            <stop offset="100%" stopColor={col} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={`${ptD(pts)} L${W},${H+4} L0,${H+4} Z`} fill={`url(#spk${ckey})`}/>
        <path d={ptD(pts)} fill="none" stroke={col} strokeWidth="1.5" opacity="0.95"/>
        <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.5" fill={col}/>
      </svg>
    );
  }
  return(
    <div style={{width:w,height:h,display:'flex',gap:10,fontFamily:FU}}>
      {cards.map((c,i)=>(
        <div key={i} style={{flex:1,background:bg,border:`1px solid ${bor}`,borderRadius:10,padding:'16px 18px',position:'relative',overflow:'hidden'}}>
          <div style={{position:'absolute',top:0,right:0,width:55,height:55,borderRadius:'0 10px 0 55px',background:c.col,opacity:0.07}}/>
          <div style={{fontSize:9,color:sc,letterSpacing:'0.09em',textTransform:'uppercase',marginBottom:7}}>{c.label}</div>
          <div style={{display:'flex',alignItems:'baseline',gap:3,marginBottom:6}}>
            <span style={{fontFamily:FD,fontSize:30,color:lc,lineHeight:1}}>{c.value}</span>
            <span style={{fontSize:12,color:c.col,fontWeight:500}}>{c.unit}</span>
          </div>
          <Spark data={c.spark} col={c.col}/>
          <div style={{fontSize:9,color:sc,marginTop:6}}>{c.sub}</div>
          <div style={{position:'absolute',bottom:10,right:12,width:5,height:5,borderRadius:'50%',background:c.col,opacity:0.9}}/>
        </div>
      ))}
    </div>
  );
}

// ─── COLOR PALETTE ──────────────────────────────────────────────────────────
function ShinaiColorPalette({w=860,h=300}){
  const swatches=[
    {name:'Gold',hex:'#C9A050',role:'Primary accent'},
    {name:'Gold Light',hex:'#E2C470',role:'Highlight'},
    {name:'Electric Blue',hex:'#3AAEE8',role:'Secondary / Data'},
    {name:'Platinum',hex:'#A6AEBB',role:'Tertiary'},
    {name:'Copper',hex:'#C47038',role:'Warning'},
    {name:'Obsidian',hex:'#090A0E',role:'Dark BG'},
    {name:'Surface',hex:'#111219',role:'Dark Card'},
    {name:'Border',hex:'#242530',role:'Dark Stroke'},
    {name:'Cream',hex:'#F5F2EB',role:'Light BG'},
    {name:'White',hex:'#FFFFFF',role:'Light Card'},
  ];
  return(
    <div style={{width:w,height:h,background:SF_D2,borderRadius:12,overflow:'hidden',border:`1px solid ${BR_D}`,fontFamily:FU,padding:'28px 32px',position:'relative'}}>
      <MeshDeco seed={5} n={20} w={w} h={h} alpha={0.07}/>
      <div style={{position:'relative',zIndex:1}}>
        <div style={{fontFamily:FD,fontSize:24,color:TX_P,marginBottom:4,letterSpacing:'0.02em'}}>Color Palette</div>
        <div style={{fontSize:10,color:TX_S,letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:22}}>SHINAI Brand Design System</div>
        <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
          {swatches.map(s=>(
            <div key={s.hex} style={{display:'flex',flexDirection:'column',gap:7}}>
              <div style={{width:60,height:60,borderRadius:8,background:s.hex,border:`1px solid ${BR_D}`,boxShadow:`0 4px 14px ${s.hex}40`}}/>
              <div style={{fontSize:11,color:TX_P,fontWeight:500,lineHeight:1}}>{s.name}</div>
              <div style={{fontSize:9,color:TX_S,fontFamily:'monospace',letterSpacing:'0.04em'}}>{s.hex}</div>
              <div style={{fontSize:9,color:TX_S}}>{s.role}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── TYPOGRAPHY ─────────────────────────────────────────────────────────────
function ShinaiTypography({w=860,h=370}){
  return(
    <div style={{width:w,height:h,background:SF_D2,borderRadius:12,overflow:'hidden',border:`1px solid ${BR_D}`,fontFamily:FU,padding:'28px 32px',position:'relative'}}>
      <MeshDeco seed={9} n={18} w={w} h={h} alpha={0.07}/>
      <div style={{position:'relative',zIndex:1,height:'100%',display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
        <div>
          <div style={{fontSize:10,color:TX_S,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:16}}>Display — Cormorant Garamond</div>
          <div style={{fontFamily:FD,fontSize:44,color:TX_P,lineHeight:1.02,marginBottom:10}}>The Future<br/><span style={{color:GOLD}}>Is Spatial.</span></div>
          <div style={{fontFamily:FD,fontSize:26,color:TX_P,marginBottom:8,opacity:0.7}}>Precision at Scale</div>
          <div style={{fontFamily:FD,fontSize:18,color:TX_S,marginBottom:20}}>SHINAI 3D Intelligence Platform</div>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            {['44px Display','28px H1','20px H2','16px H3','14px Body'].map(s=>(
              <span key={s} style={{fontSize:9,color:TX_S,border:`1px solid ${BR_D}`,borderRadius:4,padding:'2px 7px',letterSpacing:'0.04em'}}>{s}</span>
            ))}
          </div>
        </div>
        <div>
          <div style={{fontSize:10,color:TX_S,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:16}}>UI / Data — Space Grotesk</div>
          <div style={{fontFamily:FU,fontSize:30,color:TX_P,marginBottom:8,fontWeight:300,letterSpacing:'-0.01em'}}>98.7% Accuracy</div>
          <div style={{fontFamily:FU,fontSize:18,color:GOLD,marginBottom:10,fontWeight:500}}>AI Processing Performance</div>
          <div style={{fontFamily:FU,fontSize:13,color:TX_P,marginBottom:8,lineHeight:1.65,opacity:0.82}}>SHINAI's neural mesh engine delivers industry-leading point cloud reconstruction with sub-millimeter precision.</div>
          <div style={{fontFamily:FU,fontSize:10,color:TX_S,letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:18}}>Scan Method · LiDAR · 2.3M pts/sec</div>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            {['30px Metric','18px Label','13px Body','10px Caption','9px Tag'].map(s=>(
              <span key={s} style={{fontSize:9,color:TX_S,border:`1px solid ${BR_D}`,borderRadius:4,padding:'2px 7px',letterSpacing:'0.04em'}}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── SLIDE TITLE ────────────────────────────────────────────────────────────
function ShinaiSlideTitle({dark=true,w=1280,h=720}){
  const bg=dark?BG_D:BG_L,tc=dark?TX_P:TX_DK,ac=dark?TX_S:TX_DKS,bor=dark?BR_D:BR_L;
  return(
    <div style={{width:w,height:h,background:bg,position:'relative',overflow:'hidden',fontFamily:FU}}>
      <MeshDeco seed={22} n={22} w={w*0.45} h={h*0.45} alpha={dark?0.2:0.13} c={GOLD} st={{width:w*0.45,height:h*0.45}}/>
      <MeshDeco seed={33} n={18} w={w*0.38} h={h*0.38} alpha={dark?0.13:0.09} c={BLUE} st={{position:'absolute',bottom:0,right:0,top:'auto',left:'auto',width:w*0.38,height:h*0.38}}/>
      {/* Gold accent line */}
      <div style={{position:'absolute',left:'8%',top:'37%',width:64,height:2,background:GOLD}}/>
      {/* Main text */}
      <div style={{position:'absolute',left:'8%',top:'40%',right:'18%'}}>
        <div style={{fontFamily:FD,fontSize:76,color:tc,lineHeight:1.04,marginBottom:18,letterSpacing:'-0.01em'}}>
          The Future of<br/><span style={{color:GOLD}}>3D Intelligence</span>
        </div>
        <div style={{fontFamily:FU,fontSize:16,color:ac,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:32}}>SHINAI AI Platform · Q2 2026</div>
        <div style={{display:'flex',alignItems:'center',gap:16}}>
          <div style={{width:40,height:40,borderRadius:'50%',border:`1.5px solid ${GOLD}55`}}/>
          <div style={{fontFamily:FU,fontSize:13,color:ac}}>shinai3d.com</div>
        </div>
      </div>
      {/* Right accent line */}
      <div style={{position:'absolute',right:'11%',top:'18%',bottom:'18%',width:1,background:`linear-gradient(to bottom, transparent, ${GOLD}40, transparent)`}}/>
      {/* Footer */}
      <div style={{position:'absolute',bottom:0,left:0,right:0,padding:'18px 8%',borderTop:`1px solid ${bor}`,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{fontFamily:FD,fontSize:20,color:GOLD,letterSpacing:'0.1em'}}>SHINAI®</div>
        <div style={{fontFamily:FU,fontSize:10,color:ac,letterSpacing:'0.07em',textTransform:'uppercase'}}>Confidential · 2026</div>
        <div style={{fontFamily:FU,fontSize:10,color:ac}}>01</div>
      </div>
    </div>
  );
}

// ─── SLIDE CONTENT ──────────────────────────────────────────────────────────
function ShinaiSlideContent({dark=true,w=1280,h=720}){
  const bg=dark?BG_D:BG_L,tc=dark?TX_P:TX_DK,ac=dark?TX_S:TX_DKS,sf=dark?SF_D:SF_L,bor=dark?BR_D:BR_L;
  return(
    <div style={{width:w,height:h,background:bg,position:'relative',overflow:'hidden',fontFamily:FU}}>
      <MeshDeco seed={55} n={14} w={w} h={h} alpha={dark?0.06:0.04} c={GOLD}/>
      {/* Header */}
      <div style={{position:'absolute',top:0,left:0,right:0,padding:'30px 72px 22px',borderBottom:`1px solid ${bor}`,display:'flex',justifyContent:'space-between',alignItems:'flex-end'}}>
        <div>
          <div style={{fontFamily:FD,fontSize:40,color:tc,lineHeight:1,marginBottom:4}}>3D Scan Performance</div>
          <div style={{fontSize:10,color:ac,letterSpacing:'0.08em',textTransform:'uppercase'}}>Q2 2026 · Comparative Analysis</div>
        </div>
        <div style={{fontFamily:FD,fontSize:18,color:GOLD,letterSpacing:'0.06em'}}>SHINAI®</div>
      </div>
      {/* Body */}
      <div style={{position:'absolute',top:115,left:72,right:72,bottom:72,display:'grid',gridTemplateColumns:'220px 1fr',gap:24}}>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          {[['98.7%','Accuracy','vs 82% industry avg'],['2.3M','Points/sec','Peak throughput'],['0.4mm','Precision','Sub-mm grade']].map(([v,l,s])=>(
            <div key={l} style={{background:sf,border:`1px solid ${bor}`,borderRadius:8,padding:'16px 18px',flex:1}}>
              <div style={{fontFamily:FD,fontSize:38,color:GOLD,lineHeight:1}}>{v}</div>
              <div style={{fontFamily:FU,fontSize:12,color:tc,marginTop:4,fontWeight:500}}>{l}</div>
              <div style={{fontFamily:FU,fontSize:10,color:ac,marginTop:2}}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{background:sf,border:`1px solid ${bor}`,borderRadius:10,position:'relative',overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
          <MeshDeco seed={77} n={22} w={800} h={500} alpha={0.09}/>
          <div style={{textAlign:'center',color:ac,position:'relative',zIndex:1}}>
            <div style={{fontFamily:'monospace',fontSize:11,marginBottom:6,opacity:0.45}}>[ chart area ]</div>
            <div style={{fontSize:10,letterSpacing:'0.06em',textTransform:'uppercase',opacity:0.35}}>Drop chart component here</div>
          </div>
        </div>
      </div>
      {/* Footer */}
      <div style={{position:'absolute',bottom:0,left:0,right:0,padding:'14px 72px',borderTop:`1px solid ${bor}`,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{fontFamily:FU,fontSize:10,color:ac,letterSpacing:'0.06em'}}>shinai3d.com</div>
        <div style={{display:'flex',gap:7}}>
          {[1,2,3,4,5].map(i=>(<div key={i} style={{width:6,height:6,borderRadius:'50%',background:i===2?GOLD:bor}}/>))}
        </div>
        <div style={{fontFamily:FU,fontSize:10,color:ac}}>02 / 05</div>
      </div>
    </div>
  );
}

// ─── DOCUMENT HEADER ────────────────────────────────────────────────────────
function ShinaiDocHeader({w=1000,h=280}){
  return(
    <div style={{width:w,height:h,background:BG_D,position:'relative',overflow:'hidden',fontFamily:FU,borderRadius:10}}>
      <MeshDeco seed={66} n={28} w={w} h={h} alpha={0.13} c={GOLD}/>
      <div style={{position:'absolute',bottom:0,left:0,right:0,height:3,background:`linear-gradient(to right, transparent 5%, ${GOLD} 30%, ${BLUE} 70%, transparent 95%)`}}/>
      <div style={{position:'absolute',inset:0,padding:'44px 64px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
          <div style={{fontFamily:FD,fontSize:48,color:TX_P,marginBottom:8,lineHeight:1}}>Technical Report</div>
          <div style={{fontFamily:FD,fontSize:26,color:GOLD,marginBottom:16}}>3D Scan Accuracy Benchmarks — 2026</div>
          <div style={{fontFamily:FU,fontSize:11,color:TX_S,letterSpacing:'0.07em',display:'flex',gap:22}}>
            <span>SHINAI AI PLATFORM</span>
            <span style={{color:BR_D}}>·</span>
            <span>Q2 2026</span>
            <span style={{color:BR_D}}>·</span>
            <span>CONFIDENTIAL</span>
          </div>
        </div>
        <div style={{width:96,height:96,borderRadius:'50%',border:`1.5px solid ${GOLD}55`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <div style={{width:74,height:74,borderRadius:'50%',border:`1px solid ${GOLD}30`,display:'flex',alignItems:'center',justifyContent:'center'}}>
            <span style={{fontFamily:FD,fontSize:14,color:GOLD,letterSpacing:'0.1em'}}>SHINAI</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── DOCUMENT DATA SECTION ──────────────────────────────────────────────────
function ShinaiDocDataSection({w=1000,h=430}){
  const rows=[
    ['SHINAI AI','98.7%','2.3M/s','0.4mm',true],
    ['LiDAR Direct','94.0%','1.8M/s','0.6mm',false],
    ['NeRF-based','89.0%','0.4M/s','0.8mm',false],
    ['Photogrammetry','82.0%','0.2M/s','1.2mm',false],
  ];
  return(
    <div style={{width:w,height:h,background:SF_D,position:'relative',overflow:'hidden',fontFamily:FU,borderRadius:10,border:`1px solid ${BR_D}`}}>
      <MeshDeco seed={88} n={18} w={w} h={h} alpha={0.06}/>
      <div style={{position:'absolute',inset:0,padding:'32px 50px'}}>
        <div style={{fontFamily:FD,fontSize:28,color:TX_P,marginBottom:8}}>Section 3: Comparative Analysis</div>
        <div style={{height:1,background:BR_D,marginBottom:22}}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:26,height:'calc(100% - 74px)'}}>
          <div>
            <div style={{fontSize:10,color:TX_S,letterSpacing:'0.09em',textTransform:'uppercase',marginBottom:14}}>Key Findings</div>
            {[
              ['1.','SHINAI AI achieves 98.7% spatial accuracy — 16.7pp above the industry average of 82%.'],
              ['2.','Gaussian Splatting integration reduces post-processing time by 43% vs. traditional pipelines.'],
              ['3.','Sub-millimeter precision maintained at scan distances up to 50 meters in field conditions.'],
            ].map(([n,t])=>(
              <div key={n} style={{display:'flex',gap:14,alignItems:'flex-start',marginBottom:16}}>
                <span style={{color:GOLD,fontFamily:FD,fontSize:20,lineHeight:1.4,minWidth:18}}>{n}</span>
                <span style={{fontSize:13,color:TX_P,lineHeight:1.65,opacity:0.84}}>{t}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{fontSize:10,color:TX_S,letterSpacing:'0.09em',textTransform:'uppercase',marginBottom:14}}>Benchmark Data</div>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
              <thead>
                <tr style={{borderBottom:`1px solid ${BR_D}`}}>
                  {['Method','Accuracy','Throughput','Precision'].map(h=>(
                    <th key={h} style={{textAlign:'left',padding:'6px 8px',color:TX_S,fontWeight:400,letterSpacing:'0.04em',fontSize:10,textTransform:'uppercase'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map(([m,a,s,p,hi])=>(
                  <tr key={m} style={{borderBottom:`1px solid ${BR_D}55`,background:hi?`${GOLD}0A`:'transparent'}}>
                    <td style={{padding:'9px 8px',color:hi?GOLD:TX_P,fontWeight:hi?600:400,fontSize:12}}>{m}</td>
                    <td style={{padding:'9px 8px',color:TX_P,fontSize:12}}>{a}</td>
                    <td style={{padding:'9px 8px',color:TX_P,fontSize:12}}>{s}</td>
                    <td style={{padding:'9px 8px',color:TX_P,fontSize:12}}>{p}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── EXPORTS ────────────────────────────────────────────────────────────────
Object.assign(window, {
  ShinaiLineChart, ShinaiBarChart, ShinaiScatterChart, ShinaiRadarChart,
  ShinaiKPICards, ShinaiColorPalette, ShinaiTypography,
  ShinaiSlideTitle, ShinaiSlideContent,
  ShinaiDocHeader, ShinaiDocDataSection,
  MeshDeco,
  GOLD, BLUE, PLAT, COPPER, BG_D, SF_D, SF_D2, BR_D, TX_P, TX_S,
  BG_L, SF_L, BR_L, TX_DK, TX_DKS, FD, FU
});