/* Saluni Metal Roofing — Tweaks island.
   Mounts only the Tweaks panel; drives the existing vanilla DOM imperatively. */

const SALUNI_TWEAKS = /*EDITMODE-BEGIN*/{
  "bannerImage": "aihero",
  "bannerVisibility": 55,
  "headline": "fit",
  "beforeAfter": "rust",
  "accent": "#19a3df"
}/*EDITMODE-END*/;

const HERO_IMAGES = {
  aihero:    { url: "https://d8j0ntlcm91z4.cloudfront.net/user_3F3AaeFT81NyJUN8OxovDZaKPSy/hf_20260615_121726_a4375905-84a8-4f50-ba8a-17c827dd42a7.png", pos: "center 58%" },
  charcoal:  { url: "assets/saluni/roof-charcoal.jpg", pos: "center 42%" },
  greyroofs: { url: "assets/saluni/proj-3.jpg",        pos: "center 50%" },
  home:      { url: "assets/saluni/hero-home.jpg",     pos: "center 28%" },
};
const BA_PAIRS = {
  rust:     { before: "assets/saluni/ba1-before.jpg", after: "assets/saluni/ba1-after.jpg" },
  charcoal: { before: "assets/saluni/ba5-before.jpg", after: "assets/saluni/ba5-after.jpg" },
};
const HEADLINES = {
  fit:  'Fit once. Forget for <span class="hl">30 years.</span>',
  last: 'The last roof you\'ll <span class="hl">ever</span> worry about.',
  done: 'One roof. Done once.<br/><span class="hl">Done right.</span>',
};

function applySaluniTweaks(t) {
  const bg = document.getElementById('heroBg');
  const img = HERO_IMAGES[t.bannerImage] || HERO_IMAGES.charcoal;
  if (bg) bg.style.background = `url('${img.url}') ${img.pos}/cover no-repeat`;

  const hero = document.querySelector('.hero');
  if (hero) hero.style.setProperty('--hero-shade', (1 - (t.bannerVisibility / 100) * 0.6).toFixed(3));

  const pair = BA_PAIRS[t.beforeAfter] || BA_PAIRS.rust;
  const bEl = document.getElementById('baBefore');
  const aEl = document.getElementById('baAfter');
  if (bEl) bEl.src = pair.before;
  if (aEl) aEl.src = pair.after;

  document.documentElement.style.setProperty('--blue', t.accent);

  const h = document.getElementById('heroHeadline');
  if (h) h.innerHTML = HEADLINES[t.headline] || HEADLINES.fit;
}

function SaluniApp() {
  const [t, setTweak] = useTweaks(SALUNI_TWEAKS);
  React.useEffect(() => { applySaluniTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero banner" />
      <TweakSelect label="Banner photo" value={t.bannerImage}
        options={[
          { value: 'aihero',    label: 'Architectural (AI)' },
          { value: 'charcoal',  label: 'Charcoal Colorbond' },
          { value: 'greyroofs', label: 'Grey roofs' },
          { value: 'home',      label: 'Home & roof' },
        ]}
        onChange={(v) => setTweak('bannerImage', v)} />
      <TweakSlider label="Photo visibility" value={t.bannerVisibility}
        min={20} max={100} step={5} unit="%"
        onChange={(v) => setTweak('bannerVisibility', v)} />
      <TweakRadio label="Headline" value={t.headline}
        options={[
          { value: 'fit',  label: 'Fit once' },
          { value: 'last', label: 'Last roof' },
          { value: 'done', label: 'Done right' },
        ]}
        onChange={(v) => setTweak('headline', v)} />

      <TweakSection label="Before / after" />
      <TweakRadio label="Comparison" value={t.beforeAfter}
        options={[
          { value: 'rust',     label: 'Rust → White' },
          { value: 'charcoal', label: 'Old → Charcoal' },
        ]}
        onChange={(v) => setTweak('beforeAfter', v)} />

      <TweakSection label="Brand accent" />
      <TweakColor label="Accent" value={t.accent}
        options={['#19a3df', '#0d6796', '#2bb4ef', '#3a4b57']}
        onChange={(v) => setTweak('accent', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<SaluniApp />);