// CLOUDEX — main app
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#a3ff12",
  "palette": "Lime",
  "font": "Space Grotesk",
  "headline": "We turn ad spend into profit, not vanity metrics."
}/*EDITMODE-END*/;

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

  // Apply tweaks to CSS vars
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    // pick readable ink color
    const ink = isDark(t.accent) ? "#f4f4f1" : "#0a0a0a";
    root.style.setProperty("--accent-ink", ink);
    root.style.setProperty("--font-display", `"${t.font}", ui-sans-serif, system-ui, sans-serif`);
    root.style.setProperty("--font-body", `"${t.font}", ui-sans-serif, system-ui, sans-serif`);

    // Load google font dynamically if needed
    if (t.font && !document.querySelector(`link[data-font="${t.font}"]`)) {
      const l = document.createElement("link");
      l.rel = "stylesheet";
      l.href = `https://fonts.googleapis.com/css2?family=${t.font.replace(/ /g, "+")}:wght@400;500;600;700&display=swap`;
      l.setAttribute("data-font", t.font);
      document.head.appendChild(l);
    }
  }, [t.accent, t.font]);

  // Reveal-on-scroll
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <ImageBand />
      <Marquee />
      <Services />
      <Why />
      <Atmosphere />
      <Process />
      <CaseStudies />
      <Studio />
      <Testimonials />
      <FAQ />
      <CTA />
      <Footer />
      <Ticker />

      <TweaksPanel title="CLOUDEX Tweaks" defaultOpen={false}>
        <TweakSection title="Accent color">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak({ accent: v, palette: paletteName(v) })}
            options={["#a3ff12", "#ff5b2e", "#7c5cff", "#00d4ff", "#ffd400", "#ff3eb5"]}
          />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakSelect
            label="Display font"
            value={t.font}
            onChange={(v) => setTweak({ font: v })}
            options={["Space Grotesk", "Geist", "Manrope", "DM Sans", "Bricolage Grotesque", "Instrument Serif"]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function isDark(hex) {
  const c = hex.replace("#","");
  const r = parseInt(c.substr(0,2),16), g = parseInt(c.substr(2,2),16), b = parseInt(c.substr(4,2),16);
  const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
  return lum < 0.55;
}
function paletteName(hex) {
  const map = { "#a3ff12":"Lime", "#ff5b2e":"Ember", "#7c5cff":"Violet", "#00d4ff":"Cyan", "#ffd400":"Solar", "#ff3eb5":"Hot Pink" };
  return map[hex] || "Custom";
}

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