const ORBIT_RINGS=[
  {r:118,dur:46,rev:false,o:.1,so:.6,label:"Brand",w:96,href:"#model",desc:"Strategy & creative"},
  {r:182,dur:72,rev:true,o:.42,so:.05,label:"Demand",w:110,href:"#channels",desc:"Acquisition & retention"},
  {r:248,dur:104,rev:false,o:.74,so:.3,label:"Commerce",w:126,href:"#model",desc:"Operations & intelligence"},
];
function OrbitSystem(){
  const [hot,setHot]=React.useState(-1);
  const tiltRef=React.useRef(null);
  const spinRef=React.useRef(null);
  React.useEffect(()=>{
    if(!MOTION_OK)return;
    const el=tiltRef.current;if(!el)return;
    const mm=e=>{const r=el.getBoundingClientRect();const x=(e.clientX-r.left)/r.width-.5;const y=(e.clientY-r.top)/r.height-.5;el.style.transform="perspective(1100px) rotateX("+(y*-7)+"deg) rotateY("+(x*7)+"deg)";};
    const ml=()=>{el.style.transform="perspective(1100px)";};
    el.addEventListener("mousemove",mm);el.addEventListener("mouseleave",ml);
    let raf=0;
    const sc=()=>{raf=0;const g=spinRef.current;if(g)g.style.transform="rotate("+(window.scrollY*.03)+"deg)";};
    const req=()=>{if(!raf)raf=requestAnimationFrame(sc);};
    window.addEventListener("scroll",req,{passive:true});
    return()=>{el.removeEventListener("mousemove",mm);el.removeEventListener("mouseleave",ml);window.removeEventListener("scroll",req);};
  },[]);
  return <div style={{position:"relative"}}>
    <div aria-hidden="true" style={{position:"absolute",inset:"-12%",background:"radial-gradient(circle, color-mix(in oklab, var(--ember) 9%, transparent), transparent 62%)",pointerEvents:"none"}}></div>
    <div ref={tiltRef} style={{transition:"transform .6s var(--e-rev)",willChange:"transform"}}>
      <svg viewBox="0 0 660 660" fill="none" style={{width:"100%",height:"auto",display:"block",overflow:"visible"}}>
        <g ref={spinRef} style={{transformBox:"view-box",transformOrigin:"330px 330px",willChange:"transform"}}>
          {ORBIT_RINGS.map((rg,i)=>{
            const c=(2*Math.PI*rg.r).toFixed(1);
            return <g key={rg.label} className={"og"+(hot===i?" hot":"")}>
              <circle className="oringc" cx="330" cy="330" r={rg.r} stroke="var(--hairline)" strokeWidth="1.5" strokeDasharray={c} strokeDashoffset="0" style={{"--c":c+"px","--dd":(.25+i*.22)+"s",transition:"stroke .35s var(--ease-out)"}}></circle>
              <g className="oring" style={{"--d":rg.dur+"s","--o":rg.so,animationDirection:rg.rev?"reverse":"normal"}}>
                <circle cx={330+rg.r} cy="330" r="3" fill="var(--ember)" opacity=".8"></circle>
              </g>
              <g className="oring" style={{"--d":rg.dur+"s","--o":rg.o,animationDirection:rg.rev?"reverse":"normal"}}>
                <g transform={"translate("+(330+rg.r)+",330)"}>
                  <g className="onode" style={{"--d":rg.dur+"s","--o":rg.o,animationDirection:rg.rev?"normal":"reverse"}}>
                    <g className="npop" style={{"--dd":(1+i*.22)+"s"}}>
                      <a href={rg.href} style={{cursor:"pointer"}} onMouseEnter={()=>setHot(i)} onMouseLeave={()=>setHot(-1)} aria-label={rg.label+": "+rg.desc}>
                        <rect className="npill" x={-rg.w/2} y="-19" width={rg.w} height="38" rx="19" fill="var(--paper-1)" stroke="var(--hairline)" strokeWidth="1.5" style={{transition:"stroke .3s var(--ease-out)"}}></rect>
                        <circle cx={-rg.w/2+19} cy="0" r="3.5" fill="var(--ember)"></circle>
                        <text className="ntxt" x="7" y="4.5" textAnchor="middle" fill="var(--ink-1)" style={{fontFamily:"var(--font-sans)",fontSize:"13.5px",fontWeight:600,transition:"fill .3s var(--ease-out)"}}>{rg.label}</text>
                      </a>
                    </g>
                  </g>
                </g>
              </g>
            </g>;
          })}
          <circle cx="330" cy="330" r="82" fill="var(--ink-1)"></circle>
          <circle cx="330" cy="330" r="82" stroke="color-mix(in oklab, var(--ember) 55%, transparent)" strokeWidth="1.5" fill="none"></circle>
        </g>
        {hot<0
          ?<text x="330" y="337" textAnchor="middle" fill="var(--paper-1)" style={{fontFamily:"var(--font-display)",fontSize:"21px"}}>Your brand</text>
          :<g><text x="330" y="323" textAnchor="middle" fill="var(--ember)" letterSpacing="2.5" style={{fontFamily:"var(--font-mono)",fontSize:"10px"}}>{ORBIT_RINGS[hot].label.toUpperCase()}</text>
          <text x="330" y="345" textAnchor="middle" fill="var(--paper-1)" style={{fontFamily:"var(--font-sans)",fontSize:"13px"}}>{ORBIT_RINGS[hot].desc}</text></g>}
      </svg>
    </div>
    <div style={{textAlign:"center",marginTop:"18px",fontFamily:"var(--font-mono)",fontSize:"10.5px",letterSpacing:".2em",color:"var(--ink-3)"}}>HOVER A DISCIPLINE · CLICK TO EXPLORE</div>
  </div>;
}
Object.assign(window,{OrbitSystem});