/* global React, ReactDOM,
   TopBar, Nav, Hero, Partners,
   Pillars, Solutions, Stats, Capabilities, WeWorkOn,
   IntegrationServices, WeDeliver, BignmsSection,
   Method, Industries, Testimonials,
   WhyStrip, CTA, Contact, Footer,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor
*/

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "blueOrange",
  "density": "comfortable",
  "monoEyebrow": true
}/*EDITMODE-END*/;

const PALETTES = {
  blueOrange: { orange: "#EF6A1F", blue: "#7845E9", blueDeep: "#5523BD" },
  navyOrange: { orange: "#F2761F", blue: "#1B2A4E", blueDeep: "#0F1A33" },
  tealOrange: { orange: "#F0732A", blue: "#0E7E8C", blueDeep: "#075963" },
  purpleOrange: { orange: "#EF6A1F", blue: "#6A1FCB", blueDeep: "#4C13A1" },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.blueOrange;
  const r = document.documentElement.style;
  r.setProperty("--bel-orange", p.orange);
  r.setProperty("--bel-blue", p.blue);
  r.setProperty("--bel-blue-deep", p.blueDeep);
}

function applyDensity(d) {
  const r = document.documentElement.style;
  if (d === "compact") {
    r.setProperty("--pad-x", "clamp(18px, 3vw, 40px)");
  } else if (d === "spacious") {
    r.setProperty("--pad-x", "clamp(28px, 5.5vw, 72px)");
  } else {
    r.setProperty("--pad-x", "clamp(20px, 4vw, 56px)");
  }
}

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

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

  // Scroll reveal
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -50px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <TopBar />
      <Nav />
      <main>
        <Hero />
        <Partners />
        <Pillars />
        <Solutions />
        <Stats />
        <Capabilities />
        <WeWorkOn />
        <IntegrationServices />
        <WeDeliver />
        <Method />
        <BignmsSection />
        <WhyStrip />
        <Industries />
        <Testimonials />
        <CTA />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Brand"
            value={t.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              { label: "Blue · Orange", value: "blueOrange" },
              { label: "Navy · Orange", value: "navyOrange" },
              { label: "Teal · Orange", value: "tealOrange" },
              { label: "Purple · Orange", value: "purpleOrange" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            label="Padding"
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={[
              { label: "Compact", value: "compact" },
              { label: "Comfortable", value: "comfortable" },
              { label: "Spacious", value: "spacious" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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