/* app.jsx — landing page entry */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "atlantic",
  "hero": "full",
  "density": "regular"
}/*EDITMODE-END*/;

const PALETTES = {
  atlantic: {
    label: "Atlantic",
    swatch: ["#0a1f3d", "#1456b8", "#6fb6e6"],
    css: {
      "--bg":        "#f4f7fb",
      "--bg-soft":   "#e9eff7",
      "--ink":       "#0a1f3d",
      "--ink-soft":  "#3a4d6b",
      "--line":      "#d6e0ec",
      "--primary":   "#1456b8",
      "--primary-d": "#0d3f8a",
      "--accent":    "#6fb6e6",
      "--accent-2":  "#b5d7f0",
    }
  },
  glacier: {
    label: "Glacier",
    swatch: ["#06283d", "#0a8aa8", "#84d5dc"],
    css: {
      "--bg":        "#f1f8fa",
      "--bg-soft":   "#dcecf0",
      "--ink":       "#06283d",
      "--ink-soft":  "#395467",
      "--line":      "#cfe1e7",
      "--primary":   "#0a8aa8",
      "--primary-d": "#066b86",
      "--accent":    "#84d5dc",
      "--accent-2":  "#c5e8ec",
    }
  },
  cobalt: {
    label: "Cobalt",
    swatch: ["#0a0f3a", "#3b3bf0", "#7aa8ff"],
    css: {
      "--bg":        "#f5f6fb",
      "--bg-soft":   "#e8eafb",
      "--ink":       "#0a0f3a",
      "--ink-soft":  "#3e4170",
      "--line":      "#d9dcf0",
      "--primary":   "#3b3bf0",
      "--primary-d": "#2828c2",
      "--accent":    "#7aa8ff",
      "--accent-2":  "#b8c9ff",
    }
  },
  abyss: {
    label: "Abyss (dark)",
    swatch: ["#0a1626", "#5ea6e8", "#a0d4f5"],
    css: {
      "--bg":        "#0a1626",
      "--bg-soft":   "#0f2138",
      "--ink":       "#e9eff7",
      "--ink-soft":  "#9ab0c8",
      "--line":      "#1c3149",
      "--primary":   "#5ea6e8",
      "--primary-d": "#3b85cf",
      "--accent":    "#a0d4f5",
      "--accent-2":  "#cee5f4",
    }
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.atlantic;
  const root = document.documentElement;
  Object.entries(p.css).forEach(([k, v]) => root.style.setProperty(k, v));
  // dark-mode reads: invert some neutrals subtly
  if (name === "abyss") {
    root.style.setProperty("--bg-soft", "#0f2138");
  }
}

function applyDensity(d) {
  document.documentElement.classList.remove("density-compact", "density-comfy", "density-regular");
  document.documentElement.classList.add("density-" + d);
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyDensity(t.density); }, [t.density]);

  const paletteOptions = Object.keys(PALETTES).map(k => PALETTES[k].swatch);
  const paletteKeyByValue = (val) => {
    if (typeof val === "string") return val;
    // value comes back as an array swatch from TweakColor — match back to key
    const match = Object.entries(PALETTES).find(([_, p]) =>
      JSON.stringify(p.swatch) === JSON.stringify(val)
    );
    return match ? match[0] : "atlantic";
  };

  return (
    <React.Fragment>
      <Nav />
      <Hero variant={t.hero} />
      <Problem />
      <Breaker />
      <Case />
      <Offer />
      <Process />
      <Why />
      <FAQ />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta" />
        <TweakColor
          label="Kolory"
          value={PALETTES[t.palette]?.swatch || PALETTES.atlantic.swatch}
          options={paletteOptions}
          onChange={(v) => setTweak('palette', paletteKeyByValue(v))}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Wariant"
          value={t.hero}
          options={[
            { value: "split", label: "Split" },
            { value: "full", label: "Full" },
            { value: "manifesto", label: "Manifest" },
          ]}
          onChange={(v) => setTweak('hero', v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Gęstość"
          value={t.density}
          options={[
            { value: "compact", label: "Zwarta" },
            { value: "regular", label: "Standard" },
            { value: "comfy", label: "Luźna" },
          ]}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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