/* global React, PLATFORMS, Reveal, Star, Glyph, Rule */
const { useState:useStateE, useRef:useRefE, useEffect:useEffectE } = React;

function Ecosystem(){
  const [sel,setSel]=useStateE(null);
  const N=PLATFORMS.length;
  const R=300; // base radius in svg units
  const platform = sel!=null ? PLATFORMS[sel] : null;

  useEffectE(()=>{
    if(sel==null) return;
    const previousOverflow=document.body.style.overflow;
    const closeOnEscape=(event)=>{
      if(event.key==='Escape') setSel(null);
    };
    document.body.style.overflow='hidden';
    window.addEventListener('keydown',closeOnEscape);
    return ()=>{
      document.body.style.overflow=previousOverflow;
      window.removeEventListener('keydown',closeOnEscape);
    };
  },[sel]);

  return React.createElement('section',{className:'section marble veined grain eco',id:'ecosystem'},
    React.createElement('div',{className:'wrap'},
      React.createElement('div',{className:'eyebrow-row'},React.createElement(Reveal,{as:'span',className:'kicker center'},'The AetherCore Ecosystem')),
      React.createElement(Reveal,{as:'h2',className:'display h-lg center',delay:80,style:{marginTop:'18px'}},
        'Nine platforms. ',React.createElement('span',{className:'gild italic'},'One biological mind.')),
      React.createElement(Reveal,{as:'p',className:'serif-lead center mx-auto',delay:140,style:{maxWidth:'660px',marginTop:'22px'}},
        'Each engine sees a different dimension of biology. JANUS-X binds them into one mind.'),
      React.createElement(Reveal,{className:'eco-hint',delay:200},'Tap a platform to explore')
    ),
    React.createElement(Reveal,{variant:'r-scale',className:'eco-stage-wrap'},
      React.createElement('div',{className:`eco-stage ${sel!=null?'paused':''}`},
        React.createElement('div',{className:'eco-rings'},
          React.createElement('span',{className:'eco-ring e1'}),
          React.createElement('span',{className:'eco-ring e2'}),
          React.createElement('span',{className:'eco-ring e3'})
        ),
        // radial connectors
        React.createElement('div',{className:'eco-orbit eco-lines'},
          React.createElement('svg',{viewBox:'-360 -360 720 720',className:'eco-svg'},
            PLATFORMS.map((p,i)=>{
              const a=(i/N)*Math.PI*2 - Math.PI/2;
              return React.createElement('line',{key:p.id,x1:0,y1:0,x2:Math.cos(a)*R,y2:Math.sin(a)*R,
                className:`eco-line ${sel===i?'on':''}`});
            })
          )
        ),
        // core
        React.createElement('button',{className:`eco-core ${sel!=null?'dim':''}`,onClick:()=>setSel(null)},
          React.createElement('span',{className:'eco-core-glow'}),
          React.createElement(Star,{size:22}),
          React.createElement('span',{className:'eco-core-t'},'AetherCore'),
          React.createElement('span',{className:'eco-core-s'},'CORE')
        ),
        // orbiting nodes
        React.createElement('div',{className:'eco-orbit'},
          PLATFORMS.map((p,i)=>{
            const deg=(i/N)*360;
            return React.createElement('div',{key:p.id,className:'eco-node',style:{'--a':deg+'deg'}},
              React.createElement('button',{className:`eco-node-inner ${sel===i?'sel':''} ${sel!=null&&sel!==i?'fade':''}`,
                onClick:()=>{window.location.href='platforms/'+p.id+'.html';}},
                React.createElement('span',{className:'eco-disc'},
                  React.createElement(Glyph,{name:p.icon,width:26,height:26})),
                React.createElement('span',{className:'eco-node-label'},p.name)
              )
            );
          })
        )
      )
    ),
    // detail panel
    React.createElement('div',{className:`eco-panel ${platform?'open':''}`,onClick:(e)=>{if(e.target.classList.contains('eco-panel'))setSel(null);}},
      platform && React.createElement('div',{className:'eco-card glass'},
        React.createElement('button',{className:'eco-close',onClick:()=>setSel(null),'aria-label':'Close'},'\u00D7'),
        React.createElement('div',{className:'eco-card-icon'},React.createElement(Glyph,{name:platform.icon,width:34,height:34})),
        React.createElement('div',{className:'eco-card-name display'},platform.name),
        React.createElement('div',{className:'eco-card-tag'},platform.tag),
        React.createElement('div',{className:'eco-card-rule'}),
        React.createElement('p',{className:'eco-card-desc'},platform.desc),
        React.createElement('div',{className:'eco-card-caps-t'},'Capabilities'),
        React.createElement('div',{className:'eco-card-caps'},
          platform.caps.map(c=>React.createElement('span',{key:c,className:'eco-cap'},
            React.createElement(Star,{size:9}),c))
        ),
        React.createElement('div',{className:'eco-card-nav'},
          React.createElement('button',{onClick:()=>setSel((sel-1+N)%N)},'\u2190 Prev'),
          React.createElement('span',null,(sel+1)+' / '+N),
          React.createElement('button',{onClick:()=>setSel((sel+1)%N)},'Next \u2192')
        ),
        React.createElement('button',{className:'eco-back',onClick:()=>setSel(null)},
          '\u2190 Back to all platforms')
      )
    )
  );
}

Object.assign(window,{ Ecosystem });