/* Main app */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f5f2ec", "#1a1815", "#b8623c"],
  "headlineIdx": 0,
  "density": "airy",
  "showAccent": true
}/*EDITMODE-END*/;

function applyPalette(p) {
  const root = document.documentElement;
  root.style.setProperty("--bg", p[0]);
  root.style.setProperty("--ink", p[1]);
  root.style.setProperty("--accent", p[2]);
  // Derive others from bg/ink lightness
  const isLight = parseInt(p[0].slice(1,3), 16) > 128;
  if (isLight) {
    root.style.setProperty("--bg-2", shade(p[0], -6));
    root.style.setProperty("--ink-2", shade(p[1], 18));
    root.style.setProperty("--muted", shade(p[1], 60));
    root.style.setProperty("--line", shade(p[0], -10));
  } else {
    root.style.setProperty("--bg-2", shade(p[0], 8));
    root.style.setProperty("--ink-2", shade(p[1], -22));
    root.style.setProperty("--muted", shade(p[1], -52));
    root.style.setProperty("--line", shade(p[0], 14));
  }
}
function shade(hex, pct) {
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  const adj = (c) => Math.max(0, Math.min(255, c + Math.round((pct / 100) * 255)));
  r = adj(r); g = adj(g); b = adj(b);
  return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
}

function App() {
  const [lang, setLang] = useStateA(navigator.language?.startsWith('pt') ? 'pt' : 'en');
  const [t, setT] = useStateA(window.COPY.en);
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => { setT(window.COPY[lang]); }, [lang]);
  useEffectA(() => { document.documentElement.lang = lang; }, [lang]);
  useEffectA(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  useEffectA(() => {
    document.body.style.fontSize = tweaks.density === "compact" ? "14px" : "15px";
  }, [tweaks.density]);

  return (
    <div id="top" style={{ minHeight: "100vh" }}>
      <Header lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero t={t} headlineIdx={tweaks.headlineIdx} />
        <Partners t={t} />
        <Capabilities t={t} />
        <Catalog t={t} />
        <Process t={t} />
        <About t={t} />
        <Contact t={t} />
      </main>
      <Footer t={t} />
      <ChatWidget lang={lang} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Palette">
          <window.TweakColor label="Theme"
            value={tweaks.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              ["#f5f2ec", "#1a1815", "#b8623c"],
              ["#efece4", "#1a1815", "#3a5a40"],
              ["#f3efe7", "#171614", "#2c5d8a"],
              ["#1a1815", "#f5f2ec", "#b8623c"],
            ]} />
        </window.TweakSection>
        <window.TweakSection label="Hero copy">
          <window.TweakSelect label="Headline variant"
            value={tweaks.headlineIdx}
            onChange={v => setTweak("headlineIdx", Number(v))}
            options={[
              { value: 0, label: "Industry-led" },
              { value: 1, label: "Engineers & banks" },
              { value: 2, label: "Processor → production line" },
            ]} />
        </window.TweakSection>
        <window.TweakSection label="Layout">
          <window.TweakRadio label="Density"
            value={tweaks.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "airy", label: "Airy" },
              { value: "compact", label: "Compact" },
            ]} />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

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