/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakText */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#bd9f63", "#d8bd86", "#9c7f47"],
  "mood": "Dark",
  "displayFont": "Marcellus",
  "density": "Regular",
  "heroImage": "Poolside deck",
  "headline": "Fine timber for Bali's finest homes.",
  "tagline": "Trusted quality for timeless living."
}/*EDITMODE-END*/;

const _R = (typeof window !== 'undefined' && window.__resources) || {};
const HERO_SRC = {
  "Poolside deck": _R.heroDeck || "img/hero-deck.jpg",
  "Merbau floor": _R.heroMerbau || "img/merbau-floor.jpg",
  "Feature wall": _R.heroFeature || "img/feature-wall.jpg"
};

// deep espresso variant for the "Warm" mood
const MOODS = {
  "Dark":  { ink:"#14110d", ink2:"#1b1711", ink3:"#231e17" },
  "Warm":  { ink:"#241a12", ink2:"#2c2017", ink3:"#36281d" }
};

function applyTweaks(t){
  const r = document.documentElement.style;
  // accent
  const a = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent, t.accent];
  r.setProperty('--brass', a[0]);
  r.setProperty('--brass-2', a[1] || a[0]);
  r.setProperty('--brass-deep', a[2] || a[0]);
  // mood
  const m = MOODS[t.mood] || MOODS.Dark;
  r.setProperty('--ink', m.ink);
  r.setProperty('--ink-2', m.ink2);
  r.setProperty('--ink-3', m.ink3);
  // font
  r.setProperty('--font-display', t.displayFont === 'Jost (Sans)' ? "'Jost', sans-serif" : `'${t.displayFont}', serif`);
  // density
  const dens = { Compact:"clamp(4rem,8vw,7rem)", Regular:"clamp(5.5rem,11vw,9.5rem)", Spacious:"clamp(7rem,14vw,13rem)" };
  r.setProperty('--sec', dens[t.density] || dens.Regular);
  // hero image
  const img = document.getElementById('heroImg');
  if (img && HERO_SRC[t.heroImage] && !img.src.endsWith(HERO_SRC[t.heroImage])) img.src = HERO_SRC[t.heroImage];
  // text (skip on default so the styled <em> accent in the HTML is preserved)
  const ht = document.getElementById('heroTitle');
  if (ht && t.headline != null && t.headline !== TWEAK_DEFAULTS.headline) ht.textContent = t.headline;
  const tg = document.getElementById('heroTagline');
  if (tg && t.tagline != null && t.tagline !== TWEAK_DEFAULTS.tagline) tg.textContent = t.tagline;
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    React.createElement(TweaksPanel, null,
      React.createElement(TweakSection, { label: "Brand" }),
      React.createElement(TweakColor, {
        label: "Accent", value: t.accent,
        options: [
          ["#bd9f63","#d8bd86","#9c7f47"],
          ["#c0894b","#dca768","#9a6531"],
          ["#c9b079","#e2cd9c","#a88c4f"],
          ["#b8943f","#d5b35f","#917130"]
        ],
        onChange: v => setTweak('accent', v)
      }),
      React.createElement(TweakRadio, {
        label: "Base mood", value: t.mood, options: ["Dark","Warm"],
        onChange: v => setTweak('mood', v)
      }),
      React.createElement(TweakSection, { label: "Typography" }),
      React.createElement(TweakSelect, {
        label: "Display font", value: t.displayFont,
        options: ["Marcellus","Cormorant Garamond","Playfair Display","EB Garamond","Jost (Sans)"],
        onChange: v => setTweak('displayFont', v)
      }),
      React.createElement(TweakSection, { label: "Layout" }),
      React.createElement(TweakRadio, {
        label: "Spacing", value: t.density, options: ["Compact","Regular","Spacious"],
        onChange: v => setTweak('density', v)
      }),
      React.createElement(TweakSection, { label: "Hero" }),
      React.createElement(TweakSelect, {
        label: "Image", value: t.heroImage,
        options: ["Poolside deck","Merbau floor","Feature wall"],
        onChange: v => setTweak('heroImage', v)
      }),
      React.createElement(TweakText, {
        label: "Headline", value: t.headline,
        onChange: v => setTweak('headline', v)
      }),
      React.createElement(TweakText, {
        label: "Tagline", value: t.tagline,
        onChange: v => setTweak('tagline', v)
      })
    )
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(React.createElement(App));