/* app.jsx — root App, tweaks, accent + hero treatment control */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "C",
  "accent": "#FF7A45",
  "grid": true
}/*EDITMODE-END*/;

const ACCENTS = ["#F4F3F0", "#C9F24B", "#6E9BF2", "#FF7A45", "#C9A227"];

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

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

  // apply accent
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-soft", hexToRgba(t.accent, 0.12));
    // white accent keeps dark ink; colored accents also read on dark text
    root.style.setProperty("--accent-ink", "#0A0A0B");
  }, [t.accent]);

  // hero grid toggle
  useEffect(() => {
    document.documentElement.style.setProperty("--hero-grid-display", t.grid ? "block" : "none");
  }, [t.grid]);

  const goContact = useCallback(() => {
    const el = document.getElementById("contact");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  // re-run reveal when hero treatment changes layout
  useEffect(() => { window.scrollTo({ top: 0 }); }, [t.hero]);

  return (
    <React.Fragment>
      <Nav onStart={goContact} />
      <main>
        <Hero treatment={t.hero} onStart={goContact} key={t.hero} />
        <Services />
        <Process />
        <Contact />
        <Faq />
      </main>
      <Footer onStart={goContact} />

      <TweaksPanel>
        <TweakSection label="Hero treatment" />
        <TweakRadio
          label="Layout"
          value={t.hero}
          options={[
            { value: "A", label: "Editorial" },
            { value: "B", label: "Split" },
            { value: "C", label: "Centered" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakToggle label="Hero grid" value={t.grid} onChange={(v) => setTweak("grid", v)} />
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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