/* App root + Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1389CD",
  "headline": "",
  "grid": false
}/*EDITMODE-END*/;

const ACCENTS = {
  "#1389CD": { deep: "#0E6CA1", bright: "#46B4EE" }, // brand azure
  "#0C39C4": { deep: "#06239A", bright: "#5E84FF" }, // cobalt
  "#E08A1E": { deep: "#B36C0C", bright: "#F6B24A" }, // safety amber
};

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

  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#1389CD"];
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-deep", a.deep);
    r.setProperty("--accent-bright", a.bright);
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle("gridlines", !!t.grid);
  }, [t.grid]);

  useEnhance([]);

  const onEnquire = () => {
    const el = document.getElementById("enquire");
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 12;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <React.Fragment>
      <Header onEnquire={onEnquire} />
      <main>
        <Hero headlineOverride={t.headline && t.headline.trim() ? t.headline : null} />
        <Stats />
        <Products />
        <About />
        <Projects />
        <Sustainability />
        <Clients />
        <Insights />
        <EnquiryCTA />
      </main>
      <Footer />
      <StickyCTA onEnquire={onEnquire} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#1389CD", "#0C39C4", "#E08A1E"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakText label="Headline override" value={t.headline}
          placeholder="Leave blank for default"
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="12-column grid overlay" value={t.grid}
          onChange={(v) => setTweak("grid", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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