/* eslint-disable */
// Unicraft — root app.
// Composes all 13 sections. Wires a tiny Tweaks panel to explore alt accent
// (acid-yellow vs olive) and hero-photo tone.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FDFE78",
  "heroTone": "raking",
  "showCue": true,
  "logoAnim": "settle"
}/*EDITMODE-END*/;

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

  // Apply accent color across the system by overriding --color-acid-yellow.
  useEffect(() => {
    document.documentElement.style.setProperty('--color-acid-yellow', t.accent);
  }, [t.accent]);

  // Pass heroTone down via context override. Simple approach: pass directly.
  // Hero reads window.__ucHeroTone for now to avoid prop-drilling through children.
  useEffect(() => {
    window.__ucHeroTone = t.heroTone;
    window.dispatchEvent(new Event('uc-tweak'));
  }, [t.heroTone]);

  return (
    <>
      <Nav />
      <main>
        <Hero tone={t.heroTone} showCue={t.showCue} logoAnim={t.logoAnim} />
        <About />
        <Services />
        <Projects />
        <Partners />
        <Manifesto />
        <Lifecycle />
        <Promises />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Brand accent"
          value={t.accent}
          options={['#FDFE78', '#9CA938']}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Logo animation"
          value={t.logoAnim}
          options={['settle', 'build', 'none']}
          onChange={(v) => setTweak('logoAnim', v)}
        />
        <TweakRadio
          label="Image tone"
          value={t.heroTone}
          options={['raking', 'detail', 'workshop']}
          onChange={(v) => setTweak('heroTone', v)}
        />
        <TweakToggle
          label="Scroll cue"
          value={t.showCue}
          onChange={(v) => setTweak('showCue', v)}
        />
      </TweaksPanel>
    </>
  );
}

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