/* ===================================================================
   ROVIA — App assembly + Tweaks
   =================================================================== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#D99041", "#E8B583"],
  "surface": "warm",
  "blueprint": "standard"
}/*EDITMODE-END*/;

/* Curated accent identities — [accent, accent-soft] */
const ACCENT_OPTIONS = [
  ["#D99041", "#E8B583"], // Amber (default)
  ["#C2603F", "#E0A48C"], // Terracotta
  ["#2E8B7F", "#8AC7BF"], // Nordic teal
  ["#6E5A93", "#B8A6CE"], // Plum
];

/* Surface atmospheres — full warm/cool/crisp palettes */
const SURFACES = {
  warm:  { p: "#F3F1EC", s: "#ECE9E3", t: "#F7F5F1", c: "#FCFBF8", line: "#D8DAD6", ls: "#C4C7C0" },
  slate: { p: "#EDEEF1", s: "#E4E7EB", t: "#F5F6F8", c: "#FCFCFD", line: "#D6DAE0", ls: "#C2C7CE" },
  crisp: { p: "#F6F6F4", s: "#EDEDEA", t: "#FFFFFF", c: "#FFFFFF", line: "#E4E4DE", ls: "#CFCFC8" },
};

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

  useEffect(() => {
    const r = document.documentElement;
    const acc = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
    r.style.setProperty("--accent", acc[0]);
    r.style.setProperty("--accent-soft", acc[1] || acc[0]);

    const sf = SURFACES[t.surface] || SURFACES.warm;
    r.style.setProperty("--bg-primary", sf.p);
    r.style.setProperty("--bg-secondary", sf.s);
    r.style.setProperty("--bg-tertiary", sf.t);
    r.style.setProperty("--surface-card", sf.c);
    r.style.setProperty("--line", sf.line);
    r.style.setProperty("--line-strong", sf.ls);

    r.setAttribute("data-bp", t.blueprint);
  }, [t]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <Services />
        <WhyChoose />
        <Process />
        <Solutions />
        <Projects />
        <About />
        <Quote />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Highlight identity" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Atmosphere" />
        <TweakRadio
          label="Surface mood"
          value={t.surface}
          options={[
            { value: "warm", label: "Warm" },
            { value: "slate", label: "Slate" },
            { value: "crisp", label: "Crisp" },
          ]}
          onChange={(v) => setTweak("surface", v)}
        />

        <TweakSection label="Engineering character" />
        <TweakRadio
          label="Blueprint detail"
          value={t.blueprint}
          options={[
            { value: "clean", label: "Clean" },
            { value: "standard", label: "Standard" },
            { value: "technical", label: "Technical" },
          ]}
          onChange={(v) => setTweak("blueprint", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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