// teaser-mark.jsx — backdrop octant for Direction B (World Engine).
// FAITHFUL to the canonical brand mark (matches Logos/SVG/octant-mark-color.svg
// and the OctantCube component): full-strength white cube wireframe, the front
// octant lit in the brand blues, colored faces drawn UNDER the linework.
//
// Two fixes over the stock AnimatedMark (which the teaser previously used):
//   1. AnimatedMark paints the faces ON TOP of the white lines — so the Y-edges
//      vanish under the blue. The canonical OctantCube paints faces UNDERNEATH.
//      We follow the canonical order.
//   2. On a DARK bg the lit octant's top edges are only the 0.15 grid (which
//      reads as grey-on-white in the real logo but disappears as white-on-dark)
//      → the blue top face gaps open at its apex. We close the octant with a
//      crisp white outline so the front cube reads solid and gap-free.
const _MX=[0.8660254,0.5], _MY=[-0.8660254,0.5], _MZ=[0,-1];
function mip(i,j,k,s,ox,oy){ return [ox+(i*_MX[0]+j*_MY[0]+k*_MZ[0])*s, oy+(i*_MX[1]+j*_MY[1]+k*_MZ[1])*s]; }
function mpl(pts){ return pts.map(p=>p[0].toFixed(2)+','+p[1].toFixed(2)).join(' '); }

function BackdropOctant({ size=320, variant='solid' }){
  const s=20.5, ox=60, oy=60;
  const P=(i,j,k)=>mip(i,j,k,s,ox,oy);

  const lit   = variant==='luminous';
  // brand blues, brightened for a dark ground (canonical hues: #779FC9/#557FAD/#416392)
  const acc   = lit ? shades(0.745, 0.115, 250) : shades(0.67, 0.088, 252);
  const line  = 'oklch(1 0 0/0.95)';                 // full-strength white (faithful)
  const gridOp= 0.16;                                 // faint subdivisions (faithful)
  const glowC = lit ? 'oklch(0.80 0.15 250)' : 'oklch(0.72 0.11 250)';
  const showHidden = variant==='depth';
  // how strongly the front octant is outlined: 'faithful' keeps it whisper-subtle
  // (just enough to close on dark); the others outline it crisply.
  const ringOp = variant==='faithful' ? 0.42 : 0.95;
  const ringW  = variant==='faithful' ? 1.7  : 2.3;

  // ---- geometry (identical projection to the canonical mark) ----
  // silhouette starts at the BOTTOM vertex so the intro-draw dash seam never
  // lands on the top apex (apex stays a sealed mid-path point).
  const sil  = mpl([P(2,2,0),P(0,2,0),P(0,2,2),P(0,0,2),P(2,0,2),P(2,0,0)]);
  const C    = P(2,2,2);                                    // near corner = centre
  const yeTo = [P(2,0,2),P(0,2,2),P(2,2,0)];                // 3 bright cube edges
  const hidTo= [P(2,0,0),P(0,2,0),P(0,0,2)];                // hidden far-corner edges
  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)]];
  // lit front octant — three visible faces (canonical colours: top lightest)
  const fTop  = mpl([P(1,1,2),P(2,1,2),P(2,2,2),P(1,2,2)]);
  const fRight= mpl([P(2,1,1),P(2,1,2),P(2,2,2),P(2,2,1)]);
  const fLeft = mpl([P(1,2,1),P(1,2,2),P(2,2,2),P(2,2,1)]);
  // its outer silhouette (6 edges); the 3 inner edges are already the bright Y
  const ring  = mpl([P(1,2,2),P(1,1,2),P(2,1,2),P(2,1,1),P(2,2,1),P(1,2,1)]);
  const inner = [P(1,2,2),P(2,1,2),P(2,2,1)];

  return <svg className="amark bdoct" viewBox="22 16 76 88"
    width={Math.round(size*76/88)} height={size} style={{ overflow:'visible', display:'block' }}>
    <defs>
      <filter id="bdGlow" x="-120%" y="-120%" width="340%" height="340%"><feGaussianBlur stdDeviation="7"/></filter>
      <filter id="bdEdge" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="2.4"/></filter>
    </defs>

    <circle className="glow" cx={60} cy={61} r={lit?25:22} fill={glowC} filter="url(#bdGlow)" />

    {/* hidden back edges (depth) — under everything */}
    {showHidden && <g className="ohid">
      {hidTo.map((p,i)=><line key={i} x1={C[0]} y1={C[1]} x2={p[0]} y2={p[1]}
        stroke={line} strokeWidth={1.1} opacity={0.22} strokeDasharray="2.2 3.4" strokeLinecap="round"/>)}
    </g>}

    {/* faint subdivisions — UNDER the faces (canonical) */}
    <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={gridOp} />)}
    </g>

    {/* lit octant faces — UNDER the bright linework (canonical order) */}
    <polygon className="face fL" points={fLeft}  fill={acc.l} />
    <polygon className="face fR" points={fRight} fill={acc.r} />
    <polygon className="face fT" points={fTop}   fill={acc.t} />

    {/* luminous: soft accent glow tracing the octant edges */}
    {lit && <g filter="url(#bdEdge)" opacity={0.9}>
      <polygon points={ring} fill="none" stroke={glowC} strokeWidth={4.5} strokeLinejoin="round"/>
      {inner.map((p,i)=><line key={i} x1={C[0]} y1={C[1]} x2={p[0]} y2={p[1]} stroke={glowC} strokeWidth={4.5} strokeLinecap="round"/>)}
    </g>}

    {/* full-strength white cube — ON TOP of the faces (faithful) */}
    <polygon className="sil" points={sil} fill="none" stroke={line} strokeWidth={2.4}
      strokeLinejoin="round" pathLength="1" />
    {yeTo.map((p,i)=><line key={i} className={'ye ye'+(i+1)} x1={C[0]} y1={C[1]} x2={p[0]} y2={p[1]}
      stroke={line} strokeWidth={2.4} strokeLinecap="round" pathLength="1"/>)}

    {/* THE FIX: close the front octant so its top can't gap */}
    <polygon className="oring" points={ring} fill="none" stroke={line} strokeWidth={ringW}
      opacity={ringOp} strokeLinejoin="round" strokeLinecap="round" pathLength="1"/>
  </svg>;
}

Object.assign(window, { BackdropOctant });