/* global React, ReactDOM */
const { useState: aUseState, useEffect: aUseEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "pink",
  "noise": true,
  "cursorOn": true,
  "manifesto": "LOUDER"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Apply accent swap
  aUseEffect(() => {
    const root = document.documentElement;
    const map = {
      pink:   ["#FF3B7F", "#FF5A1F", "#E8FF00"],
      blue:   ["#2A4BFF", "#10E5A1", "#E8FF00"],
      lava:   ["#FF5A1F", "#FF3B7F", "#10E5A1"],
      mint:   ["#10E5A1", "#2A4BFF", "#E8FF00"],
    };
    const [p, l, a] = map[tweaks.accent] || map.pink;
    root.style.setProperty("--pink", p);
    root.style.setProperty("--lava", l);
    root.style.setProperty("--acid", a);
  }, [tweaks.accent]);

  // Noise toggle
  aUseEffect(() => {
    document.body.classList.toggle("no-noise", !tweaks.noise);
  }, [tweaks.noise]);

  return (
    <>
      {tweaks.cursorOn && <Cursor />}
      <Nav />
      <Hero />
      <Ticker items={["BRAND IDENTITY", "UI / UX", "WEBSITE DESIGN", "WEBSITE DEV", "MOTION", "DESIGN SYSTEMS"]} variant="ticker--pink" />
      <Services />
      <Ticker items={["LET'S MAKE IT LOUD", "EST. 2020", "BENGALURU", "50+ SHIPPED", "★ ★ ★ ★ ★"]} variant="ticker--acid" />
      <LiveCanvas />
      <Work />
      <PillowTalk />
      <Process />
      <Team />
      <Testimonials />
      <Spotlight />
      <Logos />
      <FAQ />
      <Contact />
      <Footer />
      <StudioPulse />

      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function Tweaks({ tweaks, setTweak }) {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakToggle, TweakRadio } = window;
  return (
    <TweaksPanel>
      <TweakSection label="Accent palette">
        <TweakRadio
          label="Accent"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "pink", label: "Pink" },
            { value: "blue", label: "Blue" },
            { value: "lava", label: "Lava" },
            { value: "mint", label: "Mint" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Texture & cursor">
        <TweakToggle label="Noise overlay" value={tweaks.noise} onChange={(v) => setTweak("noise", v)} />
        <TweakToggle label="Custom cursor" value={tweaks.cursorOn} onChange={(v) => setTweak("cursorOn", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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