/* ===========================================================
   app.jsx — root, palette tokens, Tweaks panel
   =========================================================== */

/* ----- Palettes (wafu-modern: washi paper, sumi ink, tea/aizome accents) ----- */
const PALETTES = {
  moss: {
    label: "茶と和",
    cssVars: {
      "--bg": "#f1ece0",
      "--bg-2": "#e7e0d0",
      "--ink": "#171410",
      "--ink-2": "#2c2820",
      "--muted": "#6f6a5c",
      "--line": "rgba(23, 20, 16, 0.13)",
      "--accent": "#3a4a30",
      "--accent-2": "#5b6a45",
      "--accent-3": "#9aa57e",
    },
    tonesLight: ["#dcd3bd", "#c2b899", "#a0a07c", "#76805b", "#4a5535"],
    tonesDark: ["#1c1a14", "#2a2820", "#3a4030", "#525f43", "#717f5c"],
  },
  noir: {
    label: "墨と紙",
    cssVars: {
      "--bg": "#f1eee6",
      "--bg-2": "#e8e3d6",
      "--ink": "#100f0d",
      "--ink-2": "#231f1a",
      "--muted": "#6c685e",
      "--line": "rgba(16, 15, 13, 0.13)",
      "--accent": "#2a2620",
      "--accent-2": "#4b4639",
      "--accent-3": "#8d8675",
    },
    tonesLight: ["#dad4c4", "#bbb29c", "#928b76", "#615b4d", "#363229"],
    tonesDark: ["#161410", "#23201a", "#363025", "#4f4636", "#6e624a"],
  },
  navy: {
    label: "藍と砂",
    cssVars: {
      "--bg": "#efebde",
      "--bg-2": "#e3dccc",
      "--ink": "#0d1320",
      "--ink-2": "#1d273b",
      "--muted": "#5f6675",
      "--line": "rgba(13, 19, 32, 0.13)",
      "--accent": "#1f3050",
      "--accent-2": "#3d527b",
      "--accent-3": "#7e8ba8",
    },
    tonesLight: ["#d6d0bc", "#aea58a", "#7a8298", "#384866", "#1a2540"],
    tonesDark: ["#0e1322", "#1b2740", "#2c3c5d", "#445574", "#697792"],
  },
};

const CAMO_VARIANTS = {
  organic: "Organic Blobs",
  topo: "Topographic",
  dots: "Halftone Dots",
};

/* ----- Default tweak values (persisted block) ----- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "moss",
  "camoStyle": "organic",
  "darkSections": true
}/*EDITMODE-END*/;

/* ----- Apply CSS vars on body ----- */
function applyPalette(p) {
  const pal = PALETTES[p] || PALETTES.moss;
  const root = document.documentElement;
  Object.entries(pal.cssVars).forEach(([k, v]) => root.style.setProperty(k, v));
}

/* =================== TWEAKS PANEL =================== */
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="色調  —  Palette">
        <TweakRadio
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "moss", label: "茶和" },
            { value: "noir", label: "墨紙" },
            { value: "navy", label: "藍砂" },
          ]}
        />
      </TweakSection>
      <TweakSection label="迷彩柄  —  Pattern">
        <TweakRadio
          value={t.camoStyle}
          onChange={(v) => setTweak("camoStyle", v)}
          options={[
            { value: "organic", label: "幻" },
            { value: "topo", label: "層" },
            { value: "dots", label: "霧" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* =================== APP =================== */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const pal = PALETTES[t.palette] || PALETTES.moss;

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const lightTones = pal.tonesLight;
  const darkTones = pal.tonesDark;

  return (
    <React.Fragment>
      <Header />
      <Cover camoVariant={t.camoStyle} tones={darkTones} />
      <Mission />
      <About />
      <Services camoVariant={t.camoStyle} tones={darkTones} />
      <Company />
      <Contact camoVariant={t.camoStyle} tones={darkTones} />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

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