// main.jsx — bootstrap aplikacji: routing (/kalkulator | /realizacje | /kontakt) + Tweaks
const { useState: mUseState, useEffect: mUseEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "greens": ["#1F3D2B", "#2E5D3A"],
  "accent": "#F0A92E",
  "radius": 20,
  "fonts": "Bricolage + Figtree"
}/*EDITMODE-END*/;

const FONT_SETS = {
  "Bricolage + Figtree": { head: '"Bricolage Grotesque", "Figtree", system-ui, sans-serif', body: '"Figtree", system-ui, sans-serif' },
  "Inter": { head: '"Inter", system-ui, sans-serif', body: '"Inter", system-ui, sans-serif' },
  "Space Grotesk + Figtree": { head: '"Space Grotesk", "Figtree", system-ui, sans-serif', body: '"Figtree", system-ui, sans-serif' },
};

function parseRoute() {
  const p = (location.pathname || "/").replace(/^\/+|\/+$/g, "");
  return ["kalkulator", "realizacje", "kontakt"].includes(p) ? p : "start";
}

function App() {
  const [route, setRoute] = mUseState(parseRoute);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  mUseEffect(() => {
    const onPop = () => setRoute(parseRoute());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Tytuł + meta description per trasa (SEO + lepsze udostępnianie).
  mUseEffect(() => {
    const META = {
      start: ["Twój Kalkulator OZE — kalkulator fotowoltaiki i magazynów energii",
        "Policz cenę instalacji fotowoltaicznej wprost od instalatora, bez marży handlowca. Kalkulator fotowoltaiki i magazynów energii. Działamy w całej Polsce, głównie Łódź i okolice."],
      kalkulator: ["Kalkulator fotowoltaiki — policz cenę instalacji | Twój Kalkulator OZE",
        "Dobierz panele, falownik i magazyn energii i poznaj realną cenę instalacji fotowoltaicznej wprost od instalatora, bez marży handlowca."],
      realizacje: ["Nasze realizacje fotowoltaiki — przykłady instalacji | Twój Kalkulator OZE",
        "Zobacz nasze realizacje instalacji fotowoltaicznych i magazynów energii w Łodzi i całej Polsce — projekt i montaż własną ekipą."],
      kontakt: ["Kontakt — fotowoltaika Łódź i cała Polska | Twój Kalkulator OZE",
        "Skontaktuj się z Twój Kalkulator OZE — fotowoltaika i magazyny energii wprost od instalatora. Telefon 798-040-369, pn–pt 10:00–16:00."],
    };
    const [title, desc] = META[route] || META.start;
    document.title = title;
    let m = document.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", desc);
    let c = document.querySelector('link[rel="canonical"]');
    if (c) c.setAttribute("href", "https://twoj-kalkulator-oze.vercel.app" + (route === "start" ? "/" : "/" + route));
  }, [route]);

  const go = (id) => {
    const path = id === "start" ? "/" : "/" + id;
    if (location.pathname !== path) history.pushState(null, "", path);
    setRoute(parseRoute());
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Zastosuj tweaki jako zmienne CSS
  mUseEffect(() => {
    const r = document.documentElement.style;
    const [g900, g700] = Array.isArray(t.greens) ? t.greens : TWEAK_DEFAULTS.greens;
    r.setProperty("--green-900", g900);
    r.setProperty("--green-700", g700);
    r.setProperty("--amber", t.accent);
    r.setProperty("--r-lg", Math.round(t.radius) + "px");
    r.setProperty("--r-md", Math.round(t.radius * 0.7) + "px");
    r.setProperty("--r-sm", Math.round(t.radius * 0.5) + "px");
    const fs = FONT_SETS[t.fonts] || FONT_SETS["Bricolage + Figtree"];
    r.setProperty("--font-head", fs.head);
    r.setProperty("--font-body", fs.body);
  }, [t]);

  return (
    <React.Fragment>
      <a href="#main" className="skip-link">Przejdź do treści</a>
      <Header route={route} go={go} />
      <main id="main">
        {route === "start" ? <Landing go={go} /> : null}
        {route === "kalkulator" ? <Wizard go={go} /> : null}
        {route === "realizacje" ? <RealizacjePage /> : null}
        {route === "kontakt" ? <KontaktPage /> : null}
      </main>
      <Footer go={go} />

      <TweaksPanel>
        <TweakSection label="Kolory" />
        <TweakColor label="Zieleń marki" value={t.greens}
                    options={[["#1F3D2B", "#2E5D3A"], ["#173B2C", "#256D46"], ["#24403A", "#3A6B5E"]]}
                    onChange={(v) => setTweak("greens", v)} />
        <TweakColor label="Akcent (bursztyn)" value={t.accent}
                    options={["#F0A92E", "#E8C547", "#DD8B2A"]}
                    onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Styl" />
        <TweakSlider label="Zaokrąglenia" value={t.radius} min={8} max={28} unit="px"
                     onChange={(v) => setTweak("radius", v)} />
        <TweakSelect label="Typografia" value={t.fonts}
                     options={Object.keys(FONT_SETS)}
                     onChange={(v) => setTweak("fonts", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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