/* eslint-disable */
// ARHIVAR — main app entry, screen router, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "density": "comfortable",
  "startScreen": "landing"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  amber:    { primary: "#B85C20", soft: "#F5E5D2", strong: "#D77B33" }, // default Romanian sienna
  cobalt:   { primary: "#1E5489", soft: "#E4ECF4", strong: "#2E6FB0" }, // blue
  forest:   { primary: "#1F6B4A", soft: "#DAEADF", strong: "#2D8A62" }, // green
  ink:      { primary: "#0B0F14", soft: "#E6E0CF", strong: "#232B33" }, // monochrome
};

function App() {
  const initialLang = "ro";
  return (
    <I18nProvider initialLang={initialLang}>
      <Inner />
    </I18nProvider>
  );
}

function Inner() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const params = new URLSearchParams(window.location.search);
  const requestedView = params.get("view");
  const requestedScreen = params.get("screen") || "dashboard";
  const [view, setView] = React.useState(requestedView || tweaks.startScreen || "landing");

  // Apply accent + density CSS vars to :root
  React.useEffect(() => {
    const pal = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.amber;
    document.documentElement.style.setProperty("--amber",      pal.primary);
    document.documentElement.style.setProperty("--amber-2",    pal.strong);
    document.documentElement.style.setProperty("--amber-soft", pal.soft);
  }, [tweaks.accent]);

  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.density === "compact") {
      root.style.setProperty("--r-lg", "10px");
    } else {
      root.style.setProperty("--r-lg", "16px");
    }
  }, [tweaks.density]);

  return (
    <>
      {view === "landing" ? (
        <>
          <NavBar onGotoApp={() => setView("app")} />
          <Hero onGotoApp={() => setView("app")} />
          <HowItWorks />
          <Features />
          <Insights />
          <Compliance />
          <Pricing onGotoApp={() => setView("app")} />
          <FAQ />
          <Footer />
        </>
      ) : (
        <Dashboard initialScreen={requestedScreen} onGotoLanding={() => setView("landing")} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="View">
          <TweakRadio
            label="Screen"
            value={view}
            options={[
              { value: "landing", label: "Landing" },
              { value: "app",     label: "App" },
            ]}
            onChange={(v) => setView(v)}
          />
        </TweakSection>

        <TweakSection label="Brand accent">
          <TweakColor
            label="Color"
            value={tweaks.accent}
            options={[
              { value: "amber",  label: "Sienna",   color: ACCENT_PALETTES.amber.primary  },
              { value: "cobalt", label: "Cobalt",   color: ACCENT_PALETTES.cobalt.primary },
              { value: "forest", label: "Forest",   color: ACCENT_PALETTES.forest.primary },
              { value: "ink",    label: "Ink",      color: ACCENT_PALETTES.ink.primary    },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            options={[
              { value: "comfortable", label: "Comfortable" },
              { value: "compact",     label: "Compact" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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