/* ZestPlus — App composition + Tweaks panel */

const { useEffect: useE, useState: useS } = React;

const ZEST_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#c7ff3d",
  "density": "spacious",
  "reduceMotion": false
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#c7ff3d", "#22c55e", "#a78bfa", "#f59e0b"];

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

  // Apply theme
  useE(()=>{
    document.documentElement.setAttribute("data-theme", t.theme);
  },[t.theme]);

  // Apply accent — overrides the --accent CSS var
  useE(()=>{
    const style = document.documentElement.style;
    if (t.accent && t.accent !== "#c7ff3d") {
      style.setProperty("--accent", t.accent);
      // derive a darker variant
      style.setProperty("--accent-2", shade(t.accent, -0.15));
      style.setProperty("--accent-glow", hexA(t.accent, 0.5));
    } else {
      style.removeProperty("--accent");
      style.removeProperty("--accent-2");
      style.removeProperty("--accent-glow");
    }
  },[t.accent]);

  // Density toggle adjusts CSS var on html
  useE(()=>{
    document.documentElement.style.setProperty("--section-pad", t.density==="cozy"?"4.5rem":"7rem");
  },[t.density]);

  // Reduce motion
  useE(()=>{
    document.documentElement.classList.toggle("reduce-motion", !!t.reduceMotion);
  },[t.reduceMotion]);

  const onThemeToggle = () => setTweak("theme", t.theme==="dark"?"light":"dark");

  return (
    <>
      <Nav theme={t.theme} onThemeToggle={onThemeToggle}/>
      <main>
        <Hero/>
        <Stats/>
        <Features/>
        <AppShowcase/>
        <Community/>
        <Apparel/>
        <PullQuote/>
        <Testimonials/>
        <FinalCTA/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance">
          <TweakRadio
            label="Theme"
            value={t.theme}
            onChange={(v)=>setTweak("theme", v)}
            options={[{value:"dark", label:"Dark"}, {value:"light", label:"Light"}]}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v)=>setTweak("accent", v)}
            options={ACCENT_OPTIONS}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            onChange={(v)=>setTweak("density", v)}
            options={[{value:"spacious", label:"Spacious"}, {value:"cozy", label:"Cozy"}]}
          />
          <TweakToggle
            label="Reduce motion"
            value={t.reduceMotion}
            onChange={(v)=>setTweak("reduceMotion", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ---------------------------- Color helpers --------------------------- */
function hex2rgb(hex){
  const h = hex.replace("#","");
  const n = parseInt(h.length===3 ? h.split("").map(c=>c+c).join("") : h, 16);
  return { r:(n>>16)&255, g:(n>>8)&255, b:n&255 };
}
function rgb2hex({r,g,b}){
  const c = (v)=>v.toString(16).padStart(2,"0");
  return "#"+c(r)+c(g)+c(b);
}
function shade(hex, pct){
  const {r,g,b} = hex2rgb(hex);
  const adj = (v)=> Math.max(0, Math.min(255, Math.round(v + (pct<0?v:255-v)*pct)));
  return rgb2hex({r:adj(r),g:adj(g),b:adj(b)});
}
function hexA(hex, a){
  const {r,g,b} = hex2rgb(hex);
  return `rgba(${r},${g},${b},${a})`;
}

/* ---------------------------- Reduce-motion guard --------------------- */
const _styleTag = document.createElement("style");
_styleTag.textContent = `
  .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reduce-motion .animate-float-slow,
  .reduce-motion .animate-float-med,
  .reduce-motion .animate-float-fast { animation:none !important; transform:none !important; }
`;
document.head.appendChild(_styleTag);

/* ---------------------------- Mount ----------------------------------- */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);