/** @jsx React.createElement */
/* tweaks-panel.jsx — minimal edit-mode panel for Aprena landing page */
(function () {
  var _state = window.__APRENA_DEFAULTS || {};

  function useTweaks(defaults) {
    _state = Object.assign({}, defaults, _state);
    function setTweak(key, val) {
      _state[key] = val;
      renderApp();
    }
    return [_state, setTweak];
  }

  /* --- simple UI --- */
  var panel, appRoot;

  function renderApp() {
    if (!appRoot) return;
    var state = _state;
    var setTweak = function(key, val) {
      _state[key] = val;
      renderApp();
    };

    var selectedTheme = state.theme || 'warm';
    var selectedType = state.type || 'sans';
    var selectedDensity = state.density || 'airy';
    var selectedHeadline = state.headline || 'default';
    var ctaLabel = state.ctaLabel || 'Book a 30-min call';

    appRoot.innerHTML = '';

    /* container */
    var container = document.createElement('div');
    container.style.cssText = 'font-family:system-ui,sans-serif;font-size:13px;color:#333;padding:16px;background:#f8f9fa;border-top:1px solid #ddd;';

    var title = document.createElement('strong');
    title.textContent = 'Aprena Tweaks Panel';
    title.style.cssText = 'display:block;margin-bottom:12px;font-size:14px;';
    container.appendChild(title);

    function makeSection(label) {
      var s = document.createElement('div');
      s.style.cssText = 'margin-bottom:14px;';
      var lbl = document.createElement('div');
      lbl.textContent = label;
      lbl.style.cssText = 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px;';
      s.appendChild(lbl);
      return s;
    }

    function makeRadioGroup(options, current, onChange) {
      var g = document.createElement('div');
      g.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;';
      options.forEach(function(opt) {
        var btn = document.createElement('button');
        btn.textContent = opt.label;
        btn.style.cssText = 'padding:4px 10px;border-radius:999px;border:1px solid ' + (current === opt.value ? '#555' : '#ccc') + ';background:' + (current === opt.value ? '#333' : '#fff') + ';color:' + (current === opt.value ? '#fff' : '#333') + ';cursor:pointer;font-size:12px;';
        btn.onclick = function() { onChange(opt.value); };
        g.appendChild(btn);
      });
      return g;
    }

    function makeTextInput(value, onChange) {
      var inp = document.createElement('input');
      inp.type = 'text';
      inp.value = value;
      inp.style.cssText = 'width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;';
      inp.onchange = function() { onChange(inp.value); };
      return inp;
    }

    /* Headline */
    var hs = makeSection('Headline Variant');
    hs.appendChild(makeRadioGroup([
      { value: 'default', label: 'Org chart' },
      { value: 'blind',   label: 'Blind' },
      { value: 'weeks',   label: 'In weeks' },
      { value: 'ai',      label: 'For AI' }
    ], selectedHeadline, function(v) { setTweak('headline', v); }));
    container.appendChild(hs);

    /* Theme */
    var ts = makeSection('Color Theme');
    ts.appendChild(makeRadioGroup([
      { value: 'warm', label: 'Warm' },
      { value: 'cool', label: 'Cool' },
      { value: 'mono', label: 'Mono' }
    ], selectedTheme, function(v) { setTweak('theme', v); }));
    container.appendChild(ts);

    /* Type */
    var tps = makeSection('Typography');
    tps.appendChild(makeRadioGroup([
      { value: 'mixed', label: 'Mixed' },
      { value: 'serif', label: 'Serif' },
      { value: 'sans',  label: 'Sans' }
    ], selectedType, function(v) { setTweak('type', v); }));
    container.appendChild(tps);

    /* Density */
    var ds = makeSection('Density');
    ds.appendChild(makeRadioGroup([
      { value: 'airy',    label: 'Airy' },
      { value: 'compact', label: 'Compact' }
    ], selectedDensity, function(v) { setTweak('density', v); }));
    container.appendChild(ds);

    /* CTA Label */
    var cs = makeSection('CTA Button Label');
    cs.appendChild(makeTextInput(ctaLabel, function(v) { setTweak('ctaLabel', v); }));
    container.appendChild(cs);

    appRoot.appendChild(container);
  }

  /* expose to window */
  window.useTweaks = useTweaks;
  window.TweaksPanel = { title: 'Tweaks' };
  window.TweakSection = { title: '' };
  window.TweakRadio = {};
  window.TweakText = {};

  /* render into #tweaks-root */
  window.addEventListener('DOMContentLoaded', function() {
    appRoot = document.getElementById('tweaks-root');
    if (appRoot) renderApp();
  });
})();