/* ============================================================
   app.jsx — top-level shell + tweaks panel wiring
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#A855F7",
  "theme": "dark",
  "fontMode": "modern",
  "glitch": 1,
  "layout": "grid",
  "headline": "Estratégias que se moldam. <span class=\"glitch-word\" data-text=\"Resultados\">Resultados</span> que aparecem.",
  "sub": "Ajudamos marcas a crescer com estratégia, conteúdo de alto impacto e campanhas que geram resultado real."
}/*EDITMODE-END*/;

// hex -> "r, g, b" string
function hexToRgbStr(hex) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex || "");
  if (!m) return "168, 85, 247";
  return `${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}`;
}

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

  // apply theme + font + glitch + primary to documentElement
  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.theme;
    root.dataset.fontMode = t.fontMode;
    root.style.setProperty("--primary", t.primary);
    root.style.setProperty("--primary-rgb", hexToRgbStr(t.primary));
    root.style.setProperty("--glitch", String(t.glitch));
  }, [t.theme, t.fontMode, t.glitch, t.primary]);

  // build the headline node — process the editable HTML and re-apply glitch effect class
  const heroHeadline = t.headline;
  const heroSub = t.sub;

  return (
    <>
      <ScrollProgress />
      <Nav />
      <main>
        <Hero headline={heroHeadline} sub={heroSub} />
        <LogosStrip />
        <Services layout={t.layout} />
        <Process />
        <About />
        <Testimonials />
        <FAQ />
        <CtaFinal />
      </main>
      <Footer />
      <PixelMascot />

      <TweaksPanel>
        <TweakSection label="Tema" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Cor primária"
          value={t.primary}
          options={["#A855F7", "#22D3EE", "#EC4899", "#D9F441", "#F97316"]}
          onChange={(v) => setTweak("primary", v)}
        />

        <TweakSection label="Tipografia" />
        <TweakRadio
          label="Fonte"
          value={t.fontMode}
          options={["modern", "pixel"]}
          onChange={(v) => setTweak("fontMode", v)}
        />

        <TweakSection label="Visual" />
        <TweakSlider
          label="Glitch"
          value={t.glitch}
          min={0}
          max={2}
          step={0.1}
          onChange={(v) => setTweak("glitch", v)}
        />

        <TweakSection label="Serviços" />
        <TweakSelect
          label="Layout dos cards"
          value={t.layout}
          options={[
            { value: "grid",  label: "Grid (5 colunas)" },
            { value: "stack", label: "Stack (2 colunas)" },
            { value: "list",  label: "Lista horizontal" },
          ]}
          onChange={(v) => setTweak("layout", v)}
        />

        <TweakSection label="Copy" />
        <TweakText
          label="Headline (HTML)"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakText
          label="Subheadline"
          value={t.sub}
          onChange={(v) => setTweak("sub", v)}
        />
      </TweaksPanel>
    </>
  );
}

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