// Mercomercio — main app with tweaks
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "emerald",
  "density": "regular",
  "heroLayout": "split",
  "showRouteCard": true,
  "dark": false
}/*EDITMODE-END*/;

function ThemeApplier({ tweaks }) {
  useEffectA(() => {
    const root = document.documentElement;
    const map = {
      emerald: { "--green-500": "#10b981", "--green-600": "#059669", "--green-50": "#ecfdf5", "--green-100": "#d1fae5", "--green-900": "#065f46" },
      cobalt:  { "--green-500": "#2563eb", "--green-600": "#1d4ed8", "--green-50": "#eff6ff", "--green-100": "#dbeafe", "--green-900": "#1e3a8a" },
      amber:   { "--green-500": "#f59e0b", "--green-600": "#d97706", "--green-50": "#fffbeb", "--green-100": "#fef3c7", "--green-900": "#78350f" },
      coral:   { "--green-500": "#f43f5e", "--green-600": "#e11d48", "--green-50": "#fff1f2", "--green-100": "#ffe4e6", "--green-900": "#881337" },
    };
    const palette = map[tweaks.accentHue] || map.emerald;
    Object.entries(palette).forEach(([k, v]) => root.style.setProperty(k, v));

    // density
    if (tweaks.density === "compact") {
      root.style.setProperty("--pad", "24px");
      document.body.style.setProperty("--section-pad", "64px");
      document.body.classList.add("density-compact");
    } else if (tweaks.density === "airy") {
      root.style.setProperty("--pad", "40px");
      document.body.classList.remove("density-compact");
      document.body.classList.add("density-airy");
    } else {
      root.style.setProperty("--pad", "32px");
      document.body.classList.remove("density-compact", "density-airy");
    }

    if (tweaks.dark) {
      document.body.classList.add("dark-mode");
    } else {
      document.body.classList.remove("dark-mode");
    }

    if (tweaks.showRouteCard === false) {
      document.body.classList.add("no-route");
    } else {
      document.body.classList.remove("no-route");
    }
  }, [tweaks]);
  return null;
}

const HUE_TO_HEX = { emerald: "#10b981", cobalt: "#2563eb", amber: "#f59e0b", coral: "#f43f5e" };
const HEX_TO_HUE = Object.fromEntries(Object.entries(HUE_TO_HEX).map(([k, v]) => [v, k]));

function MercomercioTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <ThemeApplier tweaks={t} />
      <TweaksPanel title="Mercomercio · Tweaks">
        <TweakSection label="Acento">
          <TweakColor
            label="Color"
            value={HUE_TO_HEX[t.accentHue] || HUE_TO_HEX.emerald}
            onChange={(v) => setTweak("accentHue", HEX_TO_HUE[v] || "emerald")}
            options={["#10b981", "#2563eb", "#f59e0b", "#f43f5e"]}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Densidad"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={["compact", "regular", "airy"]}
          />
          <TweakToggle
            label="Mapa de ruta"
            value={t.showRouteCard}
            onChange={(v) => setTweak("showRouteCard", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <LangProvider>
      <Header />
      <Hero />
      <HowItWorks />
      <CalculatorSection />
      <Cases />
      <About />
      <Features />
      <Pricing />
      <Contact />
      <FAQ />
      <Footer />
      <MercomercioTweaks />
    </LangProvider>
  );
}

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