/* TaxTraces — interactions + Tweaks island */

/* ---------- Form validation + simulated confirmation ---------- */
(function () {
  function initForm() {
    var form = document.getElementById('demoForm');
    if (!form) return;
    var card = document.getElementById('demoCard');
    var consentField = document.getElementById('consentField');

    function fieldOf(input) { return input.closest('.field'); }
    function setInvalid(input, bad) {
      var f = fieldOf(input); if (f) f.classList.toggle('invalid', bad);
    }
    var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    function validate() {
      var ok = true;
      ['f-name', 'f-company'].forEach(function (id) {
        var el = document.getElementById(id);
        var bad = !el.value.trim();
        setInvalid(el, bad); if (bad) ok = false;
      });
      var email = document.getElementById('f-email');
      var emailBad = !emailRe.test(email.value.trim());
      setInvalid(email, emailBad); if (emailBad) ok = false;

      var consent = document.getElementById('f-consent');
      var consentBad = !consent.checked;
      consentField.classList.toggle('invalid', consentBad);
      if (consentBad) ok = false;
      return ok;
    }

    form.querySelectorAll('input, select, textarea').forEach(function (el) {
      el.addEventListener('input', function () {
        if (el.id === 'f-consent') { consentField.classList.remove('invalid'); return; }
        var f = fieldOf(el); if (f && f.classList.contains('invalid')) validate();
      });
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (!validate()) {
        var firstBad = form.querySelector('.field.invalid input, .field.invalid select, .field.invalid textarea');
        if (firstBad) firstBad.focus();
        return;
      }
      card.classList.add('is-sent');
      card.scrollTop = 0;
    });

    var reset = document.getElementById('resetForm');
    if (reset) reset.addEventListener('click', function () {
      form.reset();
      form.querySelectorAll('.invalid').forEach(function (f) { f.classList.remove('invalid'); });
      card.classList.remove('is-sent');
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initForm);
  else initForm();
})();

/* ---------- Tweaks island ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e8463a",
  "serif": "Source Serif 4",
  "ambiance": "Bleu nuit",
  "hero": "A — Centralisez"
}/*EDITMODE-END*/;

const AMBIANCE = {
  "Bleu nuit": { "--navy-deep": "#081020", "--navy": "#0c1a31", "--navy-2": "#122643", "--navy-3": "#18304f" },
  "Encre":     { "--navy-deep": "#05080f", "--navy": "#0a1424", "--navy-2": "#0f1d33", "--navy-3": "#152740" }
};
const HERO_MAP = { "A — Centralisez": "a", "B — Automatisez": "b", "C — Fiabilisez": "c" };

function hexLum(hex) {
  var h = hex.replace('#', '');
  if (h.length === 3) h = h.split('').map(function (c) { return c + c; }).join('');
  var r = parseInt(h.slice(0, 2), 16) / 255, g = parseInt(h.slice(2, 4), 16) / 255, b = parseInt(h.slice(4, 6), 16) / 255;
  var f = function (c) { return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(function () {
    var root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-ink', hexLum(t.accent) > 0.45 ? '#06231a' : '#ffffff');
    root.style.setProperty('--serif', '"' + t.serif + '", Georgia, "Times New Roman", serif');
    var amb = AMBIANCE[t.ambiance] || AMBIANCE['Bleu nuit'];
    Object.keys(amb).forEach(function (k) { root.style.setProperty(k, amb[k]); });
    root.setAttribute('data-hero', HERO_MAP[t.hero] || 'a');
  }, [t.accent, t.serif, t.ambiance, t.hero]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marque" />
      <TweakColor label="Couleur d'accent" value={t.accent}
        options={["#e8463a", "#34d39b", "#7b6cf0", "#3b82f6"]}
        onChange={function (v) { setTweak('accent', v); }} />
      <p style={{ margin: '2px 4px 0', fontSize: 10.5, opacity: .6, lineHeight: 1.4 }}>
        Vermillon = couleur du logo. Le vert correspond à votre choix initial.
      </p>

      <TweakSection label="Typographie (titres)" />
      <TweakSelect label="Police serif" value={t.serif}
        options={["Source Serif 4", "Spectral", "Newsreader"]}
        onChange={function (v) { setTweak('serif', v); }} />

      <TweakSection label="Ambiance" />
      <TweakRadio label="Fonds sombres" value={t.ambiance}
        options={["Bleu nuit", "Encre"]}
        onChange={function (v) { setTweak('ambiance', v); }} />

      <TweakSection label="Hero" />
      <TweakSelect label="Variante de titre" value={t.hero}
        options={["A — Centralisez", "B — Automatisez", "C — Fiabilisez"]}
        onChange={function (v) { setTweak('hero', v); }} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  function go() {
    var el = document.getElementById('tweaks-root');
    if (!el || typeof useTweaks === 'undefined') { return setTimeout(go, 60); }
    ReactDOM.createRoot(el).render(<TweaksApp />);
  }
  go();
})();