// app.jsx — renders the chosen wireframe (B · The Calendar) as the landing page

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "annotations": true,
    "accent": "#ffd84d",
    "paper": "#f6f3ec"
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [openEv, setOpenEv] = React.useState(null);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--paper", t.paper);
    document.documentElement.style.setProperty("--paper-2", shade(t.paper, -0.05));
    document.body.classList.toggle("no-anno", !t.annotations);
  }, [t.accent, t.paper, t.annotations]);

  return (
    <div data-screen-label="Shifters — landing (B · Calendar)" style={{ minHeight: "100vh" }}>
      <WireframeB onOpen={setOpenEv} showAnno={t.annotations} />
      <EventModal ev={openEv} onClose={() => setOpenEv(null)} />

      <TweaksPanel title="Landing tweaks">
        <TweakSection label="Display" />
        <TweakToggle label="Annotations" value={t.annotations} onChange={(v) => setTweak("annotations", v)} />

        <TweakSection label="Color" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#ffd84d", "#ff8a3d", "#a3e635", "#6ec1ff", "#ff7ab8"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakColor
          label="Paper"
          value={t.paper}
          options={["#f6f3ec", "#efe9d8", "#eef2ee", "#f4ecec", "#e8e6df"]}
          onChange={(v) => setTweak("paper", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function shade(hex, amt) {
  const h = hex.replace("#", "");
  const num = parseInt(h, 16);
  let r = (num >> 16) + Math.round(255 * amt);
  let g = ((num >> 8) & 0xff) + Math.round(255 * amt);
  let b = (num & 0xff) + Math.round(255 * amt);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
}

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