/* ============================================================
   App — assembles sections + Tweaks
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout":"split",
  "motif":"network",
  "accent":"blue"
}/*EDITMODE-END*/;

const ACCENTS = {
  blue:  {a:"#0f70d7", d:"#0a55a6", s:"#e7f1fd"},
  teal:  {a:"#2f7d8f", d:"#22606e", s:"#e6f1f3"},
  navy:  {a:"#1a4f86", d:"#123b66", s:"#e8eef6"},
  violet:{a:"#6b5ca5", d:"#534593", s:"#eeebf8"},
};

function useReveal(){
  React.useEffect(()=>{
    const els=document.querySelectorAll('.reveal');
    const io=new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);}});
    },{threshold:.12, rootMargin:'0px 0px -8% 0px'});
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  });
}

function App(){
  const [t,setTweak]=useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{
    const c=ACCENTS[t.accent]||ACCENTS.blue;
    const r=document.documentElement.style;
    r.setProperty('--accent',c.a);
    r.setProperty('--accent-deep',c.d);
    r.setProperty('--accent-soft',c.s);
  },[t.accent]);

  useReveal();

  return (
    <React.Fragment>
      <NavBar/>
      <main>
        <Hero t={t}/>
        <TrustBar/>
        <div className="reveal"><Pillars/></div>
        <div className="reveal"><AIFeatures/></div>
        <div className="reveal"><Events/></div>
        <div className="reveal"><WorkingGroups/></div>
        <div className="reveal"><KnowledgeHub/></div>
        <div className="reveal"><Chapters/></div>
        <div className="reveal"><PartnerBand/></div>
        <div className="reveal"><Membership/></div>
        <div className="reveal"><Team/></div>
        <div className="reveal"><FaqSection/></div>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Hero — key module UX"/>
        <TweakRadio label="Layout" value={t.heroLayout}
          options={[{label:"Split",value:"split"},{label:"Centered",value:"centered"},{label:"Stat",value:"stat"}]}
          onChange={(v)=>setTweak('heroLayout',v)}/>
        <TweakSelect label="Data-viz motif" value={t.motif}
          options={[{label:"Network graph",value:"network"},{label:"Concentric",value:"concentric"},{label:"Grid mesh",value:"grid"}]}
          onChange={(v)=>setTweak('motif',v)}/>
        <TweakSection label="Brand accent"/>
        <TweakColor label="Accent color" value={ACCENTS[t.accent].a}
          options={[ACCENTS.blue.a,ACCENTS.teal.a,ACCENTS.navy.a,ACCENTS.violet.a]}
          onChange={(hex)=>{
            const key=Object.keys(ACCENTS).find(k=>ACCENTS[k].a===hex)||"blue";
            setTweak('accent',key);
          }}/>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);