/* global React, ReactDOM, Nav, HeroLight, HeroDark, StatsBar, Solutions, Platform, Cases, About, CTA, Footer, DemoModal, scrollToId, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "Light split",
  "accent": ["#2196E3", "#33B5F5", "#1B7CC2"],
  "animations": true
}/*EDITMODE-END*/;

// ── Scroll-to-top button ─────────────────────────────────────────
function ScrollTop() {
  const [show, setShow] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button className={`scrolltop${show ? ' show' : ''}`} aria-label="Scroll to top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
      <Icon name="chevDown" size={22} style={{ transform: 'rotate(180deg)' }}/>
    </button>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [demoSol, setDemoSol] = useStateA(null);

  // apply accent palette
  useEffectA(() => {
    const a = Array.isArray(t.accent) ? t.accent : ['#2196E3', '#33B5F5', '#1B7CC2'];
    const r = document.documentElement.style;
    r.setProperty('--accent', a[0]);
    r.setProperty('--accent-hover', a[1]);
    r.setProperty('--accent-press', a[2]);
  }, [t.accent]);

  // motion toggle
  useEffectA(() => {
    document.documentElement.classList.toggle('no-motion', !t.animations);
  }, [t.animations]);

  const openDemo = (id) => setDemoSol(id);
  const getStarted = () => scrollToId('solutions');
  const Hero = t.hero === 'Dark command' ? HeroDark : HeroLight;

  return (
    <div id="top">
      <Nav onGetStarted={getStarted}/>
      <Hero onGetStarted={getStarted} onSeeDemo={() => openDemo('modernize')}/>
      <StatsBar/>
      <Solutions onLearn={(id) => openDemo(id)} onDemo={openDemo}/>
      <Platform/>
      <Cases/>
      <About/>
      <CTA onGetStarted={getStarted}/>
      <Footer/>

      <DemoModal solId={demoSol} onClose={() => setDemoSol(null)}/>
      <ScrollTop/>

      <TweaksPanel>
        <TweakSection label="Hero direction"/>
        <TweakRadio label="Layout" value={t.hero} options={['Light split', 'Dark command']} onChange={(v) => setTweak('hero', v)}/>
        <TweakSection label="Brand accent"/>
        <TweakColor label="Accent" value={t.accent}
          options={[['#2196E3', '#33B5F5', '#1B7CC2'], ['#2540C7', '#3B5BE0', '#1C30A0'], ['#0EA5E9', '#38BDF8', '#0284C7']]}
          onChange={(v) => setTweak('accent', v)}/>
        <TweakSection label="Motion"/>
        <TweakToggle label="Scroll & counter animations" value={t.animations} onChange={(v) => setTweak('animations', v)}/>
      </TweaksPanel>
    </div>
  );
}

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