// App router + Tweaks
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "brass",
  "heading_font": "playfair",
  "density": "airy",
  "dark_mode": false
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  brass: { brass: "#8A6A3B", brass_2: "#A68350" },
  rust:  { brass: "#A63A2A", brass_2: "#C25A48" },
  sage:  { brass: "#5C6B4F", brass_2: "#7E8E70" },
  plum:  { brass: "#5E3D5B", brass_2: "#7A5577" },
  gold:  { brass: "#C9A66B", brass_2: "#DBBE8E" },
};

const HEADING_MAP = {
  playfair: '"Playfair Display", Georgia, serif',
  cormorant: '"Cormorant Garamond", Georgia, serif',
  fraunces: '"Fraunces", Georgia, serif',
  inter: '"Inter", sans-serif',
};

function App() {
  const [route, setRoute] = React.useState("home");
  const [tweaks, setTweaks] = (window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, () => {}]);

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    const acc = ACCENT_MAP[tweaks.accent] || ACCENT_MAP.brass;
    root.style.setProperty("--brass", acc.brass);
    root.style.setProperty("--brass-2", acc.brass_2);
    root.style.setProperty("--serif", HEADING_MAP[tweaks.heading_font] || HEADING_MAP.playfair);
    if (tweaks.dark_mode) {
      root.style.setProperty("--bg", "#141414");
      root.style.setProperty("--bg-2", "#1B1B1B");
      root.style.setProperty("--bg-3", "#222");
      root.style.setProperty("--paper", "#1A1A1A");
      root.style.setProperty("--ink", "#EFEAE0");
      root.style.setProperty("--ink-2", "#C9C2B4");
      root.style.setProperty("--mute", "#8C857A");
      root.style.setProperty("--rule", "#2A2A2A");
      root.style.setProperty("--rule-2", "#3A3A3A");
      root.style.setProperty("--navy", "#EFEAE0");
      root.style.setProperty("--navy-2", "#C9C2B4");
    } else {
      root.style.setProperty("--bg", "#F5F2EC");
      root.style.setProperty("--bg-2", "#EFEAE0");
      root.style.setProperty("--bg-3", "#E8E1D3");
      root.style.setProperty("--paper", "#FBF9F4");
      root.style.setProperty("--ink", "#1A1A1A");
      root.style.setProperty("--ink-2", "#3A3A3A");
      root.style.setProperty("--mute", "#6B6257");
      root.style.setProperty("--rule", "#CDC6B8");
      root.style.setProperty("--rule-2", "#B8B0A0");
      root.style.setProperty("--navy", "#0E2A3D");
      root.style.setProperty("--navy-2", "#1C3E56");
    }
    root.style.setProperty("--gutter", tweaks.density === "compact" ? "clamp(16px, 3vw, 40px)" : "clamp(20px, 4vw, 56px)");
  }, [tweaks]);

  const pages = {
    home: <Home setRoute={setRoute} />,
    attorneys: <Attorneys />,
    practice: <Practice />,
    contact: <Contact />,
  };

  return (
    <>
      <Nav route={route} setRoute={setRoute} />
      {pages[route]}
      <Footer setRoute={setRoute} />
      <ScrollTop />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Aesthetic">
            <window.TweakRadio label="Accent color" value={tweaks.accent} onChange={(v) => setTweaks({ accent: v })}
              options={[
                { value: "brass", label: "Brass" },
                { value: "rust", label: "Rust" },
                { value: "sage", label: "Sage" },
                { value: "plum", label: "Plum" },
                { value: "gold", label: "Gold" },
              ]} />
            <window.TweakSelect label="Heading font" value={tweaks.heading_font} onChange={(v) => setTweaks({ heading_font: v })}
              options={[
                { value: "playfair", label: "Playfair Display (default)" },
                { value: "cormorant", label: "Cormorant Garamond" },
                { value: "fraunces", label: "Fraunces" },
                { value: "inter", label: "Inter (sans-serif)" },
              ]} />
            <window.TweakRadio label="Density" value={tweaks.density} onChange={(v) => setTweaks({ density: v })}
              options={[
                { value: "airy", label: "Airy" },
                { value: "compact", label: "Compact" },
              ]} />
            <window.TweakToggle label="Dark mode" value={tweaks.dark_mode} onChange={(v) => setTweaks({ dark_mode: v })} />
          </window.TweakSection>
          <window.TweakSection title="Navigate">
            <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8}}>
              <window.TweakButton onClick={() => { setRoute("home"); window.scrollTo({top: 0}); }}>Home</window.TweakButton>
              <window.TweakButton onClick={() => { setRoute("attorneys"); window.scrollTo({top: 0}); }}>Attorneys</window.TweakButton>
              <window.TweakButton onClick={() => { setRoute("practice"); window.scrollTo({top: 0}); }}>Practice</window.TweakButton>
              <window.TweakButton onClick={() => { setRoute("contact"); window.scrollTo({top: 0}); }}>Contact</window.TweakButton>
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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