// clinno-tweaks.jsx — Clinno Tweaks Panel
// Requires: React, ReactDOM, tweaks-panel.jsx loaded first

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tema": "Natural",
  "acento": "#20a050",
  "fonte": "Inter"
}/*EDITMODE-END*/;

// ── Full color scale per accent ──
const PALETTES = {
  '#20a050': { g:'#20a050', gl:'#4aba72', gd:'#1a8a44', gdd:'#146638', g50:'#f0faf4', g100:'#dcf5e7', g200:'#bbebcf' },
  '#2060c8': { g:'#2060c8', gl:'#4a88e0', gd:'#184ea0', gdd:'#103a78', g50:'#eff4ff', g100:'#dce8ff', g200:'#b8d0ff' },
  '#c4502a': { g:'#c4502a', gl:'#d97757', gd:'#a04022', gdd:'#7a301a', g50:'#fff3ee', g100:'#ffe4d8', g200:'#ffd0b8' }
};

// ── Visual theme configs ──
const THEMES = {
  Natural: {
    warm:'#f7f4f0', warm50:'#fdfaf6', warmalt:'#faf9f7',
    t1:'#1a1a1a', t2:'#525252', t3:'#9a9a9a', bw:'#ede7e1',
    ink:'#0a0a0a', ink2:'#111111', ink3:'#1a1a1a',
    heroBackground:'#f7f4f0', sectionBorder:'rgba(0,0,0,0.07)'
  },
  Clínico: {
    warm:'#ffffff', warm50:'#f8f9fa', warmalt:'#f2f4f6',
    t1:'#0a0a0a', t2:'#3c3c3c', t3:'#7a7a7a', bw:'#e0e0e0',
    ink:'#0f0f14', ink2:'#15151e', ink3:'#1e1e28',
    heroBackground:'#ffffff', sectionBorder:'rgba(0,0,0,0.06)'
  },
  Escuro: {
    warm:'#101010', warm50:'#141414', warmalt:'#181818',
    t1:'#f0ede8', t2:'rgba(240,237,232,0.7)', t3:'rgba(240,237,232,0.4)', bw:'rgba(255,255,255,0.1)',
    ink:'#050505', ink2:'#0c0c0c', ink3:'#111111',
    heroBackground:'#101010', sectionBorder:'rgba(255,255,255,0.07)'
  }
};

// ── Font families ──
const FONT_MAP = {
  'Inter':     { family:'Inter',            gfonts:'Inter:ital,wght@0,400;0,700;0,800;0,900' },
  'Editorial': { family:'Playfair Display', gfonts:'Playfair+Display:ital,wght@0,700;0,800;1,700;1,800' },
  'Humana':    { family:'Plus Jakarta Sans',gfonts:'Plus+Jakarta+Sans:wght@400;600;700;800' }
};

const HEAD_SELECTORS = [
  '.text-hero', '.text-sec', '.text-sec-sm',
  'h1', 'h2', 'h3',
  '.step-num', '.pc-price', '.f-inter',
  '.logo', '.nav-logo', '[class*="logo"]'
];

function loadGoogleFont(gfonts) {
  const id = 'gf-' + gfonts.slice(0, 20).replace(/[^a-z]/gi, '');
  if (!document.getElementById(id)) {
    const l = document.createElement('link');
    l.id = id; l.rel = 'stylesheet';
    l.href = 'https://fonts.googleapis.com/css2?family=' + gfonts + '&display=swap';
    document.head.appendChild(l);
  }
}

function applyFont(fontKey) {
  const fd = FONT_MAP[fontKey] || FONT_MAP['Inter'];
  loadGoogleFont(fd.gfonts);
  const ff = "'" + fd.family + "', system-ui, sans-serif";
  HEAD_SELECTORS.forEach(function(sel) {
    document.querySelectorAll(sel).forEach(function(el) {
      el.style.fontFamily = ff;
    });
  });
  // Also update the logo text specifically
  document.querySelectorAll('.logo').forEach(function(el) {
    el.style.fontFamily = ff;
  });
}

function applyTheme(themeKey) {
  const th = THEMES[themeKey] || THEMES['Natural'];
  const root = document.documentElement.style;
  Object.keys(th).forEach(function(k) {
    root.setProperty('--' + k, th[k]);
  });
  // Update background on hero and warm sections
  document.querySelectorAll('#hero').forEach(function(el) {
    el.style.backgroundColor = th.heroBackground;
  });
  document.querySelectorAll('.bg-warm').forEach(function(el) {
    el.style.backgroundColor = th.warm;
  });
  // Escuro: flip card/dash backgrounds
  if (themeKey === 'Escuro') {
    document.querySelectorAll('.step-card, .faq-body-inner, .math-box, .dash-mockup').forEach(function(el) {
      el.style.background = '#1a1a1a';
      el.style.borderColor = 'rgba(255,255,255,0.08)';
    });
    document.querySelectorAll('.step-card h3, .faq-q, .math-row span').forEach(function(el) {
      el.style.color = 'rgba(255,255,255,0.9)';
    });
  } else {
    document.querySelectorAll('.step-card, .faq-body-inner, .math-box, .dash-mockup').forEach(function(el) {
      el.style.background = '';
      el.style.borderColor = '';
    });
    document.querySelectorAll('.step-card h3, .faq-q, .math-row span').forEach(function(el) {
      el.style.color = '';
    });
  }
}

function applyPalette(color) {
  const pal = PALETTES[color] || PALETTES['#20a050'];
  const root = document.documentElement.style;
  Object.keys(pal).forEach(function(k) {
    root.setProperty('--' + k, pal[k]);
  });
  // Update marquee background
  const mq = document.getElementById('marquee');
  if (mq) mq.style.backgroundColor = pal.g;
  // Update logo dot
  document.querySelectorAll('.logo-dot, .clinno-mark path').forEach(function(el) {
    el.style.fill = pal.g;
  });
}

function ClinnoTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(function() { applyTheme(t.tema); }, [t.tema]);
  React.useEffect(function() { applyPalette(t.acento); }, [t.acento]);
  React.useEffect(function() { applyFont(t.fonte); }, [t.fonte]);

  return React.createElement(window.TweaksPanel, { title: 'Clinno Tweaks' },
    React.createElement(window.TweakSection, { label: 'Atmosfera' }),
    React.createElement(window.TweakRadio, {
      label: 'Tema visual',
      value: t.tema,
      options: ['Natural', 'Clínico', 'Escuro'],
      onChange: function(v) { setTweak('tema', v); }
    }),
    React.createElement(window.TweakSection, { label: 'Identidade' }),
    React.createElement(window.TweakColor, {
      label: 'Cor de acento',
      value: t.acento,
      options: ['#20a050', '#2060c8', '#c4502a'],
      onChange: function(v) { setTweak('acento', v); }
    }),
    React.createElement(window.TweakSection, { label: 'Tipografia' }),
    React.createElement(window.TweakRadio, {
      label: 'Display font',
      value: t.fonte,
      options: ['Inter', 'Editorial', 'Humana'],
      onChange: function(v) { setTweak('fonte', v); }
    })
  );
}

(function mount() {
  var container = document.createElement('div');
  container.id = 'clinno-tweaks-root';
  document.body.appendChild(container);
  ReactDOM.createRoot(container).render(React.createElement(ClinnoTweaks));
})();