/* Tweaks.jsx — in-design tweak controls for the TaxTrail site.
   Drives CSS variables on :root so changes cascade through the whole page. */
const { useEffect: useEffectTw } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#6FD6CA", "#25BFAE", "#00A896", "#008B7D", "#007F73"],
  "displayFont": "Archivo",
  "bodyFont": "IBM Plex Sans",
  "heroMotion": true
}/*EDITMODE-END*/;

/* Google Fonts query fragments (Archivo / IBM Plex Sans already loaded) */
const TT_FONTS = {
  'Space Grotesk': 'Space+Grotesk:wght@400;500;600;700',
  'Sora': 'Sora:wght@400;500;600;700;800',
  'Figtree': 'Figtree:wght@400;500;600;700',
  'Public Sans': 'Public+Sans:wght@400;500;600;700',
};
function ttEnsureFont(family) {
  const frag = TT_FONTS[family];
  if (!frag) return; // preloaded family
  const id = 'ttfont-' + family.replace(/\W/g, '');
  if (document.getElementById(id)) return;
  const l = document.createElement('link');
  l.id = id; l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=' + frag + '&display=swap';
  document.head.appendChild(l);
}
function ttRgba(hex, a) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

function Tweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = (typeof document !== 'undefined') ? document.documentElement : null;

  // Accent — remap the teal ramp + derived tints
  useEffectTw(() => {
    if (!root) return;
    const [c3, c4, c5, c6, c7] = t.accent;
    const s = root.style;
    s.setProperty('--teal-200', c3); s.setProperty('--teal-300', c3);
    s.setProperty('--teal-400', c4); s.setProperty('--teal-500', c5);
    s.setProperty('--teal-600', c6); s.setProperty('--teal-700', c7);
    s.setProperty('--teal-800', c7);
    s.setProperty('--teal-100', ttRgba(c5, 0.16));
    s.setProperty('--teal-50', ttRgba(c5, 0.10));
    s.setProperty('--accent', c5); s.setProperty('--accent-hover', c7);
  }, [t.accent]);

  // Display typeface
  useEffectTw(() => {
    if (!root) return;
    ttEnsureFont(t.displayFont);
    root.style.setProperty('--font-display', `'${t.displayFont}', 'Helvetica Neue', Arial, sans-serif`);
  }, [t.displayFont]);

  // Body typeface
  useEffectTw(() => {
    if (!root) return;
    ttEnsureFont(t.bodyFont);
    root.style.setProperty('--font-sans', `'${t.bodyFont}', system-ui, -apple-system, sans-serif`);
  }, [t.bodyFont]);

  // Hero trail motion on/off (keeps the static trail, pauses the animation)
  useEffectTw(() => {
    if (!root) return;
    root.classList.toggle('trail-paused', !t.heroMotion);
  }, [t.heroMotion]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent} options={[
        ['#6FD6CA', '#25BFAE', '#00A896', '#008B7D', '#007F73'],
        ['#7FB2E6', '#3E8FD8', '#2A6FDB', '#1F5BB8', '#184A99'],
        ['#7FCBA0', '#3FB174', '#1F8A5B', '#16744B', '#0F5E3C'],
        ['#9DA8F0', '#6B79E6', '#4F5AE0', '#3E47C2', '#313AA0'],
      ]} onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Display" value={t.displayFont}
        options={['Archivo', 'Space Grotesk', 'Sora']}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSelect label="Body" value={t.bodyFont}
        options={['IBM Plex Sans', 'Figtree', 'Public Sans']}
        onChange={(v) => setTweak('bodyFont', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Hero trail animation" value={t.heroMotion}
        onChange={(v) => setTweak('heroMotion', v)} />
    </TweaksPanel>
  );
}

window.Tweaks = Tweaks;