/* app.jsx — 斜杠码官网主入口 */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1E40FF",
  "density": "normal",
  "showStatsInHero": true,
  "showSlashBg": true
}/*EDITMODE-END*/;

function applyAccent(hex) {
  document.documentElement.style.setProperty('--brand-3', hex);
}

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

  // apply accent live
  React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  React.useEffect(() => {
    document.documentElement.style.setProperty('--section-y',
      t.density === 'tight' ? 'clamp(56px, 8vw, 96px)' :
      t.density === 'loose' ? 'clamp(120px, 14vw, 180px)' :
      'clamp(80px, 11vw, 140px)'
    );
  }, [t.density]);

  useRevealOnScroll();

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <div className="wrap"><div className="divider" /></div>
        <About />
        <Timeline />
        <Products />
        <Miniprograms />
        <KPI />
        <Honors />
        <Partners />
        <WhyUs />
        <Org />
        <CoreAbilities />
      </main>
      <Contact />

      <TweaksPanel title="网站 Tweaks">
        <TweakSection label="品牌强调色">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#1E40FF', '#1E90FF', '#16C8F7', '#0A1430', '#5B21B6']}
            label="主色"
          />
        </TweakSection>
        <TweakSection label="布局密度">
          <TweakRadio
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'tight',  label: '紧凑' },
              { value: 'normal', label: '默认' },
              { value: 'loose',  label: '宽松' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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