// App entry — wires all sections, scroll-reveal, and Tweaks

const ACCENT_PRESETS = {
  lime:    { accent: "#d4ff3a", warm: "#ff5c2a", label: "acid lime" },
  electric:{ accent: "#a78bff", warm: "#ff5c2a", label: "electric purple" },
  neon:    { accent: "#39ff88", warm: "#ff5c2a", label: "neon green" },
  warm:    { accent: "#ff7a3d", warm: "#ffd166", label: "warm orange" },
  ice:     { accent: "#7ad9ff", warm: "#ff5c2a", label: "ice blue" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lime",
  "showGrain": true,
  "headline": "Content that converts. Social that scales.",
  "darkness": 8
}/*EDITMODE-END*/;

function useScrollReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.lime;

  // Apply theme vars to :root
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent.accent);
    document.documentElement.style.setProperty("--warm", accent.warm);
    const dk = Math.max(4, Math.min(18, tweaks.darkness || 8));
    document.documentElement.style.setProperty("--bg", `oklch(0.${dk < 10 ? "0"+dk : dk} 0.005 260)`);
    document.documentElement.style.setProperty("--bg-2", `oklch(0.${(dk+4) < 10 ? "0"+(dk+4) : (dk+4)} 0.006 260)`);
    document.body.classList.toggle("grain", !!tweaks.showGrain);
  }, [tweaks, accent.accent, accent.warm]);

  useScrollReveal();

  return (
    <>
      <Nav />
      <main>
        <Hero accent={accent.accent} headline={tweaks.headline} />
        <Services />
        <Process />
        <Work />
        <Stats />
        <Testimonials />
        <Plans />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Theme color"
          value={ACCENT_PRESETS[tweaks.accent].accent}
          onChange={hex => {
            const key = Object.keys(ACCENT_PRESETS).find(k => ACCENT_PRESETS[k].accent === hex) || "lime";
            setTweak("accent", key);
          }}
          options={Object.values(ACCENT_PRESETS).map(p => p.accent)}
        />
        <TweakSection label="Surface" />
        <TweakSlider label="Background depth" min={4} max={16} step={1} value={tweaks.darkness} onChange={v => setTweak("darkness", v)} />
        <TweakToggle label="Film grain" value={tweaks.showGrain} onChange={v => setTweak("showGrain", v)} />
      </TweaksPanel>
    </>
  );
};

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