/* global React, ReactDOM, Nav, Footer, HomePage, AboutPage, ServicesPage, ContactPage */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "headlineStyle": "editorial"
}/*EDITMODE-END*/;

// Palette name -> data-palette attr value (null means default forest)
const PALETTE_ATTR = {
  forest: null,
  sage: "sage",
  stone: "stone",
  blue: "bluegrey",
};

const PALETTE_SWATCHES = {
  forest: ["#1F3A2F", "#F2ECDD", "#B5552E"],
  sage:   ["#2C4A3B", "#EFEAD9", "#A85633"],
  stone:  ["#2B2A26", "#F0EBE2", "#9C5A2C"],
  blue:   ["#243648", "#ECE9E2", "#B25A35"],
};

function PaletteSwatchPicker({ value, onChange }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(2, 1fr)",
      gap: 8,
      padding: "0 4px"
    }}>
      {Object.keys(PALETTE_SWATCHES).map((name) => {
        const colors = PALETTE_SWATCHES[name];
        const active = value === name;
        return (
          <button
            key={name}
            type="button"
            onClick={() => onChange(name)}
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              padding: 6,
              background: active ? "rgba(255,255,255,0.06)" : "transparent",
              border: active ? "1px solid rgba(255,255,255,0.35)" : "1px solid rgba(255,255,255,0.12)",
              borderRadius: 6,
              cursor: "pointer",
              textAlign: "left",
            }}
          >
            <div style={{ display: "flex", height: 28, borderRadius: 3, overflow: "hidden" }}>
              {colors.map((c, i) => (
                <div key={i} style={{ flex: i === 0 ? 2 : 1, background: c }} />
              ))}
            </div>
            <span style={{
              fontSize: 11,
              textTransform: "capitalize",
              color: active ? "#fff" : "rgba(255,255,255,0.6)",
              letterSpacing: "0.02em",
            }}>
              {name}
            </span>
          </button>
        );
      })}
    </div>
  );
}

function App() {
  const [page, setPage] = useStateApp("home");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    const attr = PALETTE_ATTR[tweaks.palette];
    if (attr) {
      document.documentElement.setAttribute("data-palette", attr);
    } else {
      document.documentElement.removeAttribute("data-palette");
    }
  }, [tweaks.palette]);

  useEffectApp(() => {
    document.documentElement.classList.toggle("style--strong", tweaks.headlineStyle === "strong");
  }, [tweaks.headlineStyle]);

  let Page = HomePage;
  if (page === "about") Page = AboutPage;
  else if (page === "services") Page = ServicesPage;
  else if (page === "contact") Page = ContactPage;

  return (
    <>
      <Nav page={page} setPage={setPage} />
      <main data-screen-label={pageLabel(page)} key={page}>
        <Page setPage={setPage} />
      </main>
      <Footer setPage={setPage} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <PaletteSwatchPicker
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection title="Headlines">
          <TweakRadio
            label="Display"
            value={tweaks.headlineStyle}
            onChange={(v) => setTweak("headlineStyle", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "strong", label: "Strong" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function pageLabel(page) {
  return ({
    home: "Home",
    about: "About",
    services: "Services",
    contact: "Contact",
  })[page] || page;
}

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