// animated-logo.jsx — Octant Systems logo reveal ("the octant lights up")
// Reuses shades, OC_INK, OC_PAPER from cube-color.jsx. CSS keyframes live in the host.

const _AX=[0.8660254,0.5], _AY=[-0.8660254,0.5], _AZ=[0,-1];
function aip(i,j,k,s,ox,oy){return [ox+(i*_AX[0]+j*_AY[0]+k*_AZ[0])*s, oy+(i*_AX[1]+j*_AY[1]+k*_AZ[1])*s];}
function apl(pts){return pts.map(p=>p[0].toFixed(2)+','+p[1].toFixed(2)).join(' ');}
function afaces(i0,j0,k0,d,s,ox,oy){
  const P=(i,j,k)=>aip(i,j,k,s,ox,oy); const i1=i0+d,j1=j0+d,k1=k0+d;
  return {
    top:  apl([P(i0,j0,k1),P(i1,j0,k1),P(i1,j1,k1),P(i0,j1,k1)]),
    right:apl([P(i1,j0,k0),P(i1,j0,k1),P(i1,j1,k1),P(i1,j1,k0)]),
    left: apl([P(i0,j1,k0),P(i0,j1,k1),P(i1,j1,k1),P(i1,j1,k0)]),
  };
}
const A_ACC   = shades(0.585, 0.085, 252);
const A_ACC_D = shades(0.675, 0.085, 252);

function AnimatedMark({ size=210, dark }){
  const s=20.5, ox=60, oy=60;
  const P=(i,j,k)=>aip(i,j,k,s,ox,oy);
  const line  = dark ? 'oklch(1 0 0/0.95)' : OC_INK;
  const acc   = dark ? A_ACC_D : A_ACC;
  const glowC = dark ? 'oklch(0.72 0.11 250)' : 'oklch(0.6 0.12 250)';
  const sil = apl([P(0,0,2),P(2,0,2),P(2,0,0),P(2,2,0),P(0,2,0),P(0,2,2)]);
  const C=P(2,2,2), ya=P(2,0,2), yb=P(0,2,2), yc=P(2,2,0);
  const lit = afaces(1,1,1,1,s,ox,oy);
  const grid=[[P(1,0,2),P(1,2,2)],[P(0,1,2),P(2,1,2)],[P(2,0,1),P(2,2,1)],
              [P(2,1,0),P(2,1,2)],[P(0,2,1),P(2,2,1)],[P(1,2,0),P(1,2,2)]];
  const yl=(a,b,cls)=><line className={cls} x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]}
    stroke={line} strokeWidth={2.4} strokeLinecap="round" pathLength="1"/>;
  return <svg className="amark" viewBox="22 16 76 88" width={Math.round(size*76/88)} height={size}
    style={{overflow:'visible', display:'block'}}>
    <defs><filter id="ogf" x="-120%" y="-120%" width="340%" height="340%"><feGaussianBlur stdDeviation="6.5"/></filter></defs>
    <circle className="glow" cx={60} cy={61} r={22} fill={glowC} filter="url(#ogf)" />
    <g className="grid">
      {grid.map((g,i)=><line key={i} x1={g[0][0]} y1={g[0][1]} x2={g[1][0]} y2={g[1][1]}
        stroke={line} strokeWidth={1.3} opacity={0.16} />)}
    </g>
    <polygon className="sil" points={sil} fill="none" stroke={line} strokeWidth={2.4}
      strokeLinejoin="round" pathLength="1" />
    {yl(C,ya,'ye ye1')}{yl(C,yb,'ye ye2')}{yl(C,yc,'ye ye3')}
    <polygon className="face fL" points={lit.left}  fill={acc.l} />
    <polygon className="face fR" points={lit.right} fill={acc.r} />
    <polygon className="face fT" points={lit.top}   fill={acc.t} />
  </svg>;
}

function AnimatedLockup({ dark, size=210, run=true, tagline=false }){
  const txt = dark ? OC_PAPER : OC_INK;
  return <div className={'alock' + (run?' run':'')}
    style={{display:'inline-flex', alignItems:'center', gap:Math.round(size*0.3)}}>
    <AnimatedMark size={size} dark={dark} />
    <div style={{display:'flex', flexDirection:'column', gap:Math.round(size*0.045)}}>
      <div className="wm" style={{fontFamily:'Sora,sans-serif', fontWeight:700, fontSize:Math.round(size*0.205),
        letterSpacing:'0.01em', color:txt, display:'flex', gap:'0.42em', lineHeight:1}}>
        <span>OCTANT</span><span style={{fontWeight:300}}>SYSTEMS</span>
      </div>
      {tagline && <div className="tag" style={{fontFamily:'"Space Mono",monospace',
        fontSize:Math.round(size*0.052), letterSpacing:'0.2em', color:txt, textTransform:'uppercase',
        lineHeight:1.5}}>The operating system for spatial intelligence</div>}
    </div>
  </div>;
}

Object.assign(window, { AnimatedMark, AnimatedLockup });