// site-tweaks.jsx
// Wires the Tweaks panel to the Clean Suite Co. home page.

(function () {
  const root = document.getElementById('tweaks-root');
  if (!root) return;

  const DEFAULTS = window.CSC_TWEAK_DEFAULTS || {};

  function setText(sel, value) {
    const el = document.querySelector(sel);
    if (el) el.textContent = value;
  }
  function setHTML(sel, value) {
    const el = document.querySelector(sel);
    if (el) el.innerHTML = value;
  }
  function setVisible(sel, on) {
    const el = document.querySelector(sel);
    if (!el) return;
    el.style.display = on ? '' : 'none';
  }
  function setStyle(varName, value) {
    document.documentElement.style.setProperty(varName, value);
  }

  function shade(hex, amt) {
    const h = hex.replace('#', '');
    const n = parseInt(h, 16);
    let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    r = Math.max(0, Math.min(255, r + amt));
    g = Math.max(0, Math.min(255, g + amt));
    b = Math.max(0, Math.min(255, b + amt));
    return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
  }

  function escapeHTML(s) {
    return String(s).replace(/[&<>"']/g, c =>
      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  }

  function applyAll(t) {
    setText('[data-tweak="hero_eyebrow"]', t.hero_eyebrow);
    setHTML('[data-tweak="hero_title"]',
      `${escapeHTML(t.hero_title_line1)}<br/><em>${escapeHTML(t.hero_title_line2)}</em>`);
    setText('[data-tweak="hero_sub"]', t.hero_sub);
    setText('[data-tweak="statement"]', t.statement);

    document.querySelectorAll('a[href^="tel:"]').forEach(a => {
      a.textContent = t.phone;
      a.href = 'tel:' + t.phone.replace(/[^+\d]/g, '');
    });
    document.querySelectorAll('a[href^="mailto:"]').forEach(a => {
      a.textContent = t.email;
      a.href = 'mailto:' + t.email;
    });

    setStyle('--bronze', t.accent);
    setStyle('--bronze-light', shade(t.accent, 38));
    setStyle('--ivory', t.ivory_bg);
    setStyle('--ivory-deep', shade(t.ivory_bg, -10));

    const scrim = document.querySelector('.hero__scrim');
    if (scrim) {
      const a = Math.max(0, Math.min(1, t.hero_overlay));
      scrim.style.background =
        `linear-gradient(90deg, rgba(20,16,12,${a.toFixed(2)}) 0%, rgba(20,16,12,${(a*0.55).toFixed(2)}) 38%, transparent 70%),` +
        `linear-gradient(180deg, rgba(20,16,12,${(a*0.7).toFixed(2)}) 0%, transparent 30%, transparent 70%, rgba(20,16,12,${(a*0.85).toFixed(2)}) 100%)`;
    }

    const v = document.querySelector('.hero__video');
    if (v) {
      if (t.hero_video_on) {
        v.style.display = '';
        try { v.play().catch(() => {}); } catch (e) {}
      } else {
        if (v.pause) v.pause();
        v.style.display = 'none';
      }
    }

    setVisible('.gallery', t.show_gallery);
    setVisible('.standard', t.show_standard);
    setVisible('.founder-note', t.show_founder_note);
    setVisible('.contact-band', t.show_phone_band);
    setVisible('.hero__credentials', t.show_certs_band);
    setVisible('.topbar__status', t.show_status_pulse);

    document.body.dataset.imgStyle = t.img_style;

    setStyle('--title-scale', String(t.title_size));
    setStyle('--section-density', String(t.section_density));

    const cards = document.querySelector('.cards');
    if (cards) {
      cards.classList.toggle('cards--photo', t.card_layout === 'photo');
      cards.classList.toggle('cards--minimal', t.card_layout === 'minimal');
    }

    setStyle('--eyebrow-ls', `${t.letterspacing_eyebrow}em`);
  }

  function App() {
    const [t, setTweak] = useTweaks(DEFAULTS);
    React.useEffect(() => { applyAll(t); }, [t]);

    return (
      <TweaksPanel title="Site tweaks">

        <TweakSection label="Hero — copy" />
        <TweakText label="Eyebrow" value={t.hero_eyebrow}
          onChange={v => setTweak('hero_eyebrow', v)} />
        <TweakText label="Title line 1" value={t.hero_title_line1}
          onChange={v => setTweak('hero_title_line1', v)} />
        <TweakText label="Title line 2 (italic)" value={t.hero_title_line2}
          onChange={v => setTweak('hero_title_line2', v)} />
        <TweakText label="Sub-headline" value={t.hero_sub}
          onChange={v => setTweak('hero_sub', v)} />

        <TweakSection label="Hero — visuals" />
        <TweakToggle label="Background video" value={t.hero_video_on}
          onChange={v => setTweak('hero_video_on', v)} />
        <TweakSlider label="Overlay darkness" value={Math.round(t.hero_overlay * 100)}
          min={0} max={100} unit="%"
          onChange={v => setTweak('hero_overlay', v / 100)} />
        <TweakToggle label="Status pulse" value={t.show_status_pulse}
          onChange={v => setTweak('show_status_pulse', v)} />
        <TweakToggle label="Certifications band" value={t.show_certs_band}
          onChange={v => setTweak('show_certs_band', v)} />

        <TweakSection label="Brand colors" />
        <TweakColor label="Accent (bronze)" value={t.accent}
          onChange={v => setTweak('accent', v)} />
        <TweakColor label="Ivory background" value={t.ivory_bg}
          onChange={v => setTweak('ivory_bg', v)} />

        <TweakSection label="Typography" />
        <TweakSlider label="Title scale" value={Math.round(t.title_size * 100)}
          min={70} max={130} unit="%"
          onChange={v => setTweak('title_size', v / 100)} />
        <TweakSlider label="Eyebrow tracking" value={Math.round(t.letterspacing_eyebrow * 100)}
          min={0} max={40} unit=""
          onChange={v => setTweak('letterspacing_eyebrow', v / 100)} />

        <TweakSection label="Imagery" />
        <TweakRadio label="Photo treatment" value={t.img_style}
          options={['natural', 'warm', 'sepia', 'bw']}
          onChange={v => setTweak('img_style', v)} />
        <TweakRadio label="Service cards" value={t.card_layout}
          options={['photo', 'minimal']}
          onChange={v => setTweak('card_layout', v)} />

        <TweakSection label="Content" />
        <TweakText label="Brand statement" value={t.statement}
          onChange={v => setTweak('statement', v)} />
        <TweakToggle label="Editorial gallery" value={t.show_gallery}
          onChange={v => setTweak('show_gallery', v)} />
        <TweakToggle label="The standard" value={t.show_standard}
          onChange={v => setTweak('show_standard', v)} />
        <TweakToggle label="Team note" value={t.show_founder_note}
          onChange={v => setTweak('show_founder_note', v)} />
        <TweakToggle label="Contact band" value={t.show_phone_band}
          onChange={v => setTweak('show_phone_band', v)} />

        <TweakSection label="Contact" />
        <TweakText label="Phone" value={t.phone}
          onChange={v => setTweak('phone', v)} />
        <TweakText label="Email" value={t.email}
          onChange={v => setTweak('email', v)} />

        <TweakSection label="Reset" />
        <TweakButton label="Restore defaults"
          onClick={() => setTweak(DEFAULTS)} />

      </TweaksPanel>
    );
  }

  ReactDOM.createRoot(root).render(<App />);
})();