// app.jsx — Root component. TWEAK_DEFAULTS is host-managed.
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e8dec8",
  "skylineOpacity": 14,
  "officeFocalX": 25,
  "showKavGlyph": true,
  "showSkyline": true,
  "showBench": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#e8dec8", // cream (default brand)
  "#d4a574", // warm amber
  "#9fb8a1", // soft sage
  "#c8b8d4", // pale lavender
  "#e8e8e8", // neutral grey
];

function App() {
  const [introDone, setIntroDone] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--skyline-opacity", String(t.skylineOpacity / 100));
    root.style.setProperty("--office-focal-x", t.officeFocalX + "%");
    document.body.classList.toggle("hide-kav-glyph", !t.showKavGlyph);
    document.body.classList.toggle("hide-skyline",   !t.showSkyline);
    document.body.classList.toggle("hide-bench",     !t.showBench);
  }, [t]);

  return (
    <>
      <CinematicIntro onDone={() => setIntroDone(true)} />
      <SideRail />
      <main className="page">
        <Hero introDone={introDone} />
        <Platform />
        {t.showBench && (
          <Interlude
            id="bench"
            src="assets/office.png"
            eyebrow="The bench"
            caption="Over two hundred collaborators work across the network, spread across multiple offices and remote locations. A new company launches with operators and engineers already in place."
            meta="São Paulo · operations"
          />
        )}
        <Pillars />
        <Network />
        <Speak />
        <EndSlate />
      </main>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS}
                      onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSlider label="Skyline opacity" value={t.skylineOpacity}
                       min={0} max={50} step={1} unit="%"
                       onChange={(v) => setTweak("skylineOpacity", v)} />
          <TweakToggle label="Show skyline"   value={t.showSkyline}
                       onChange={(v) => setTweak("showSkyline", v)} />
          <TweakToggle label='Show "Kav." glyph' value={t.showKavGlyph}
                       onChange={(v) => setTweak("showKavGlyph", v)} />
        </TweakSection>
        <TweakSection label="The bench">
          <TweakToggle label="Show interlude" value={t.showBench}
                       onChange={(v) => setTweak("showBench", v)} />
          <TweakSlider label="Photo focal point" value={t.officeFocalX}
                       min={0} max={100} step={1} unit="%"
                       onChange={(v) => setTweak("officeFocalX", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);