/* ============================================================
   FLOREA GRUP — App shell + router
   ============================================================ */
function Stub({ name }) {
  return (
    <main className="section" style={{ paddingTop: 160, minHeight: "60vh" }}>
      <div className="wrap"><Eyebrow plain>Florea Grup</Eyebrow>
        <h1 className="h-xl" style={{ marginTop: ".4em" }}>{name}</h1>
        <p className="lead" style={{ marginTop: "1em" }}>În curând.</p>
      </div>
    </main>
  );
}

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("fg_lang") || "ro");
  useEffect(() => {
    localStorage.setItem("fg_lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);
  const route = useHashRoute();

  // ---- Tweaks ----
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#b50f1a",
    "headingFont": "Manrope",
    "motion": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const ACCENTS = {
    "#b50f1a": ["#b50f1a", "#c91d2b", "#8e0c14"],
    "#9e2a2b": ["#9e2a2b", "#b5413f", "#7a1d1e"],
    "#a8141e": ["#a8141e", "#c01f2a", "#820f17"],
    "#c2410c": ["#c2410c", "#dc5a1f", "#9a330a"],
  };
  useEffect(() => {
    const r = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS["#b50f1a"];
    r.style.setProperty("--red", a[0]);
    r.style.setProperty("--red-bright", a[1]);
    r.style.setProperty("--red-dark", a[2]);
    r.style.setProperty("--display", `"${t.headingFont}", system-ui, sans-serif`);
    r.setAttribute("data-motion", t.motion ? "on" : "off");
  }, [t.accent, t.headingFont, t.motion]);

  const map = {
    home: window.Home,
    about: window.About,
    divisions: route.id ? window.DivisionDetail : window.Divisions,
    projects: window.Projects,
    sustainability: window.Sustainability,
    hospitality: window.Hospitality,
    careers: window.Careers,
    news: window.News,
    contact: window.Contact,
  };
  const Page = map[route.page];

  return (
    <LangCtx.Provider value={lang}>
      <Nav lang={lang} setLang={setLang} />
      {Page ? <Page id={route.id} /> : <Stub name={route.page} />}
      <Footer />
      <CookieConsent />
      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#b50f1a", "#9e2a2b", "#a8141e", "#c2410c"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Heading font" value={t.headingFont}
          options={["Manrope", "Archivo", "Space Grotesk", "Sora"]}
          onChange={(v) => setTweak("headingFont", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Scroll animations" value={t.motion}
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </LangCtx.Provider>
  );
}

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