/* global React, ReactDOM */
const { useEffect, useState, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#d68b4a",
  "champagne": "#c9a982",
  "lang": "en",
  "motion": true,
  "density": "default",
  "headline": "LiraQuant",
  "tagEN": "Where insight meets precision.",
  "tagID": "Tempat wawasan bertemu presisi."
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.body;
  root.dataset.theme = t.theme;
  root.dataset.lang = t.lang;
  root.dataset.motion = t.motion ? "on" : "off";
  root.dataset.density = t.density;
  document.documentElement.style.setProperty("--copper", t.accent);
  document.documentElement.style.setProperty("--champagne", t.champagne);

  // Headline + tagline sync
  const h1 = document.querySelector(".hero h1");
  if (h1 && t.headline) {
    // split: first 4 chars normal, rest italic
    const word = t.headline;
    const split = Math.max(2, Math.floor(word.length / 2));
    h1.innerHTML = `${word.slice(0, split)}<span class="ital">${word.slice(split)}</span>.`;
  }
  const tagEN = document.querySelector(".hero-tag .en");
  const tagID = document.querySelector(".hero-tag .id");
  if (tagEN) tagEN.textContent = t.tagEN;
  if (tagID) tagID.textContent = t.tagID;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakColor label="Accent (copper)" value={t.accent}
        onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="Champagne" value={t.champagne}
        onChange={(v) => setTweak("champagne", v)} />

      <TweakSection label="Language" />
      <TweakRadio label="Display" value={t.lang} options={["en", "id"]}
        onChange={(v) => setTweak("lang", v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={["dense", "default", "airy"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakToggle label="Motion" value={t.motion}
        onChange={(v) => setTweak("motion", v)} />

      <TweakSection label="Copy" />
      <TweakText label="Headline" value={t.headline}
        onChange={(v) => setTweak("headline", v)} />
      <TweakText label="Tag · EN" value={t.tagEN}
        onChange={(v) => setTweak("tagEN", v)} />
      <TweakText label="Tag · ID" value={t.tagID}
        onChange={(v) => setTweak("tagID", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-mount")).render(<App />);