/* AI Edge v2 — composition + Tweaks + mount. Loads last. */
(function(){
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "oklch(0.80 0.15 158)",
  "heroFx": "flow",
  "boot": true,
  "display": "Space Grotesk",
  "motion": true
}/*EDITMODE-END*/;

const ACCENTS = [
  "oklch(0.80 0.15 158)", // 翡翠绿 (默认)
  "oklch(0.80 0.12 195)", // 青 teal
  "oklch(0.76 0.13 233)", // 天蓝 azure
  "oklch(0.68 0.16 272)", // 靛蓝 indigo
  "oklch(0.72 0.16 305)", // 雪青 violet
  "oklch(0.85 0.16 135)"  // 青柠 lime
];
const FX_OPTS = { "向量流场":"flow", "向量粒子场":"particles", "数据流网格":"grid", "极简":"off" };
const FX_LABEL = { flow:"向量流场", particles:"向量粒子场", grid:"数据流网格", off:"极简" };

function App(){
  const [t,setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [booted,setBooted] = useState(()=> !TWEAK_DEFAULTS.boot);
  const [lang,setLangState] = useState(window.__lang||"zh");
  const [swap,setSwap] = useState(false);
  useEffect(()=>{ window.__toggleLang=()=>{ const nl=(window.__lang==="en")?"zh":"en"; window.setAELang(nl); try{localStorage.setItem("ae_lang",nl);}catch(e){} setLangState(nl); setSwap(true); setTimeout(()=>setSwap(false),320); }; },[]);

  useEffect(()=>{
    const r=document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--font-display", `'${t.display}', system-ui, sans-serif`);
    r.dataset.heroFx = t.heroFx;
    r.dataset.motion = t.motion ? "on" : "off";
  },[t]);

  useEffect(()=>{ if(!t.boot) setBooted(true); },[t.boot]);

  const showBoot = t.boot && !booted;
  useEffect(()=>{ document.body.classList.toggle("booting", showBoot); },[showBoot]);
  const finish=()=>{ setBooted(true); };

  const {
    BootSequence, CursorGlow, TopProgress, ParticleHero, CapabilitiesV2, ScrollFlow,
    Nav, VideoSection, Metrics, DocQA, NL2SQL, Trust, About, Footer,
    TweaksPanel, TweakSection, TweakColor, TweakSelect, TweakToggle
  } = window;

  return (
    <>
      {showBoot && <BootSequence onDone={finish}/>}
      <TopProgress/>
      <CursorGlow/>
      <div className={swap?"lang-swap":""}>
      <Nav/>
      <ParticleHero booted={booted} fx={t.heroFx}/>
      <VideoSection/>
      <CapabilitiesV2/>
      <ScrollFlow/>
      <Metrics/>
      <DocQA/>
      <NL2SQL/>
      <Trust/>
      <About/>
      <Footer/>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="开场" />
        <TweakToggle label="终端开场动画" value={t.boot} onChange={(v)=>setTweak("boot",v)} />
        <TweakSection label="Hero 特效" />
        <TweakSelect label="背景" value={FX_LABEL[t.heroFx]} options={Object.keys(FX_OPTS)}
          onChange={(v)=>setTweak("heroFx",FX_OPTS[v])} />
        <TweakColor label="强调色" value={t.accent} options={ACCENTS}
          onChange={(v)=>setTweak("accent",v)} />
        <TweakSection label="动效 & 字体" />
        <TweakToggle label="动效 / 微交互" value={t.motion} onChange={(v)=>setTweak("motion",v)} />
        <TweakSelect label="标题字体" value={t.display} options={["Space Grotesk","Sora"]}
          onChange={(v)=>setTweak("display",v)} />
      </TweaksPanel>
    </>
  );
}

document.documentElement.dataset.heroFx = TWEAK_DEFAULTS.heroFx;
document.documentElement.dataset.motion = TWEAK_DEFAULTS.motion ? "on" : "off";
if(TWEAK_DEFAULTS.boot) document.body.classList.add("booting");

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