/* global React, ReactDOM, window */
const { useEffect } = React;

// Hardcoded direction: Light mode · Split hero · Helvetica · Max motion · Lime accent
const LOCKED = {
  theme: "light",
  hero: "split",
  font: "helvetica",
  motion: "max",
  accent: "lime",
};

const ACCENTS = {
  lime: { color: "#B6FF3B", hover: "#9FE030", ink: "#0f0f0f" },
};
const FONTS = {
  helvetica: {
    head: '"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif',
    body: '"Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif',
  },
};

const applyLocked = () => {
  const root = document.documentElement;
  root.setAttribute("data-theme", LOCKED.theme);
  const a = ACCENTS[LOCKED.accent];
  root.style.setProperty("--accent", a.color);
  root.style.setProperty("--accent-hover", a.hover);
  root.style.setProperty("--accent-ink", a.ink);
  root.style.setProperty("--accent-muted", a.color + "28");
  const f = FONTS[LOCKED.font];
  root.style.setProperty("--font-heading", f.head);
  root.style.setProperty("--font-sans", f.body);
  const scale = { none: 0, subtle: 0.5, medium: 1, max: 1.5 }[LOCKED.motion];
  root.style.setProperty("--motion-scale", scale);
};

const App = () => {
  useEffect(() => { applyLocked(); }, []);

  window.useReveal();

  const {
    Navbar, Hero, PainPoint, BentoServices, Differentiator, Cases,
    About, FAQ, LeadMagnet, Footer, FloatingWhatsApp, CursorGlow,
  } = window;

  return (
    <>
      <CursorGlow />
      <Navbar />
      <Hero variant={LOCKED.hero} />
      <PainPoint />
      <BentoServices />
      <Differentiator />
      <Cases />
      <About />
      <FAQ />
      <LeadMagnet />
      <Footer />
      <FloatingWhatsApp />
    </>
  );
};

// apply immediately so first paint already has tokens set
applyLocked();
ReactDOM.createRoot(document.getElementById("root")).render(<App />);