/* =====================================================================
   ATLAS CORE — Main app shell + Tweaks
   ===================================================================== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#6E8CFF",
  "headline": "evolucao",
  "showProcess": true
}/*EDITMODE-END*/;

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

  // Apply theme to body + accent var on :root
  React.useEffect(() => {
    const body = document.body;
    body.classList.toggle("theme-dark", tweaks.theme !== "light");
    body.classList.toggle("theme-light", tweaks.theme === "light");
    if (tweaks.theme === "light") {
      body.classList.add("on-paper");
    } else {
      body.classList.remove("on-paper");
    }
  }, [tweaks.theme]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // derive soft + glow from accent at runtime
    document.documentElement.style.setProperty("--accent-glow", hexToRgba(tweaks.accent, 0.35));
    document.documentElement.style.setProperty("--accent-tint", hexToRgba(tweaks.accent, 0.10));
    document.documentElement.style.setProperty("--accent-soft", lighten(tweaks.accent, 0.18));
  }, [tweaks.accent]);

  return (
    <React.Fragment>
      <SiteHeader />
      <main>
        <Hero headlineVariant={tweaks.headline} />
        <TrustStrip />
        <About />
        <Solutions />
        <AtlasVisual />
        <Edge />
        {tweaks.showProcess && <Process />}
        <CTAFinal />
      </main>
      <SiteFooter />

      <TweaksPanel title="Tweaks · Atlas Core">
        <TweakSection label="Aparência">
          <TweakRadio
            label="Tema"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "dark",  label: "Dark"  },
              { value: "light", label: "Paper" },
            ]}
          />
          <TweakColor
            label="Cor de acento"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#6E8CFF", "#4861E8", "#88A8FF", "#A4F0A4", "#F5C26B", "#FF7A59"]}
          />
        </TweakSection>

        <TweakSection label="Conteúdo">
          <TweakRadio
            label="Headline"
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            options={[
              { value: "evolucao",     label: "Evolução"  },
              { value: "inteligencia", label: "Inteligência" },
              { value: "operacao",     label: "Operação" },
            ]}
          />
          <TweakToggle
            label="Mostrar 'Como trabalhamos'"
            value={tweaks.showProcess}
            onChange={(v) => setTweak("showProcess", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

/* ----- color helpers ------------------------------------------------ */
function hexToRgba(hex, a) {
  const c = hex.replace("#", "");
  const n = parseInt(c.length === 3 ? c.split("").map(x => x + x).join("") : c, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function lighten(hex, amt) {
  const c = hex.replace("#", "");
  const n = parseInt(c.length === 3 ? c.split("").map(x => x + x).join("") : c, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r + (255 - r) * amt);
  g = Math.round(g + (255 - g) * amt);
  b = Math.round(b + (255 - b) * amt);
  return `#${[r, g, b].map(x => x.toString(16).padStart(2, "0")).join("")}`;
}

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