/* global React, Reveal, Rule, Star, Counter, Glyph, Magnetic */
const { useRef:useRefA, useEffect:useEffectA } = React;

/* ---------- WHO WE ARE ---------- */
function WhoWeAre(){
  const stats=[
    {n:9,suf:'+',l:'Core Platforms'},
    {n:100,suf:'+',l:'Future Modules'},
    {t:'AI',l:'Native Intelligence'},
    {t:'1:1',l:'Precision Medicine'},
  ];
  return React.createElement('section',{className:'section marble veined grain',id:'who'},
    React.createElement('div',{className:'wrap who-grid'},
      React.createElement(Reveal,{variant:'r-left',className:'who-visual'},
        React.createElement('div',{className:'who-disc'},
          React.createElement('div',{className:'who-ring'}),
          React.createElement('div',{className:'who-ring r2'}),
          React.createElement('img',{src:'assets/logo-marble.png',alt:'AetherCore Labs carved marble emblem',className:'who-img'}),
          React.createElement('div',{className:'who-glow'})
        )
      ),
      React.createElement('div',{className:'who-copy'},
        React.createElement(Reveal,{as:'span',className:'kicker'},'Who We Are'),
        React.createElement(Reveal,{as:'h2',className:'display h-lg',delay:80},'A biological intelligence company.'),
        React.createElement(Reveal,{as:'p',className:'body',delay:160},
          'We build the infrastructure to understand, predict, prevent, and restore disease.'),
        React.createElement(Reveal,{as:'p',className:'body',delay:240},
          'Every platform is a layer. Together, they form an operating system for biology.'),
        React.createElement(Reveal,{className:'who-stats',delay:300},
          stats.map((s,i)=>React.createElement('div',{key:i,className:'who-stat'},
            React.createElement('div',{className:'who-stat-n gild'},
              s.n!=null?React.createElement(Counter,{to:s.n,suffix:s.suf}):s.t),
            React.createElement('div',{className:'who-stat-l'},s.l)
          ))
        )
      )
    )
  );
}

/* ---------- OUR MISSION ---------- */
function Mission(){
  const wrapRef=useRefA(null), videoRef=useRefA(null);
  useEffectA(()=>{
    const v=videoRef.current; if(v){ v.muted=true; v.volume=0; v.play&&v.play().catch(()=>{}); }
  },[]);
  const pillars=[
    {t:'Predict',icon:'graph',d:'See disease before a single symptom appears.'},
    {t:'Prevent',icon:'shield',d:'Intervene before progression ever begins.'},
    {t:'Restore',icon:'leaf',d:'Return biological systems to a healthy state.'},
  ];
  return React.createElement('section',{className:'section marble-deep veined mission',id:'mission',ref:wrapRef},
    React.createElement('div',{className:'mission-aura'}),
    React.createElement('div',{className:'wrap'},
      React.createElement(Reveal,{variant:'r-scale',className:'mission-stage'},
        React.createElement('span',{className:'mission-frame-ring'}),
        React.createElement('span',{className:'mission-frame-tick tl'}),
        React.createElement('span',{className:'mission-frame-tick br'}),
        React.createElement('video',{ref:videoRef,className:'mission-video',src:'assets/hero-carve-4k.mp4',
          muted:true,loop:true,autoPlay:true,playsInline:true,preload:'auto',disablePictureInPicture:true,controls:false}),
        React.createElement('span',{className:'mission-video-veil'})
      ),
      React.createElement('div',{className:'eyebrow-row'},React.createElement(Reveal,{as:'span',className:'kicker center greek'},'Our Mission')),
      React.createElement(Reveal,{as:'h2',className:'greek mission-head center',delay:80},
        'To ',React.createElement('span',{className:'gild'},'predict, prevent,'),
        React.createElement('br'),' and ',React.createElement('span',{className:'gild'},'restore'),' disease.'),
      React.createElement('div',{className:'mission-pillars'},
        pillars.map((p,i)=>React.createElement(Reveal,{key:p.t,variant:'r-scale',className:'card-marble pillar',delay:120+i*130},
          React.createElement('div',{className:'pillar-num stat-num'},'0'+(i+1)),
          React.createElement('div',{className:'pillar-icon'},
            React.createElement('span',{className:'pillar-icon-ring'}),
            React.createElement(Glyph,{name:p.icon,width:28,height:28})),
          React.createElement('h3',{className:'greek pillar-t'},p.t),
          React.createElement('p',{className:'pillar-d'},p.d),
          React.createElement('div',{className:'pillar-line'})
        ))
      )
    )
  );
}

Object.assign(window,{ WhoWeAre, Mission });