// ============================================================
// TWEAKS — expressive controls that reshape the feel
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "forest",
  "density": "expansive",
  "voice": "consulting"
}/*EDITMODE-END*/;

// Accent palettes (the design system documents all three)
const ACCENT_MAP = {
  forest: { accent: '#34503D', hover: '#28402F', press: '#1F3325', tint: '#E9EEEA', line: '#C9D6CD', onAccent: '#F6F5F1', positive: '#3C5A45', darkAccent: '#84AB8F', darkHover: '#9DC0A6', darkPress: '#B4D2BC', darkTint: '#20271F', darkLine: '#3C4B40' },
  navy:   { accent: '#25344A', hover: '#1B273A', press: '#131D2C', tint: '#E7EAEF', line: '#C0C8D4', onAccent: '#F6F5F1', positive: '#25344A', darkAccent: '#8BA3C4', darkHover: '#A3B8D4', darkPress: '#BBCCE2', darkTint: '#1A2030', darkLine: '#2E3D52' },
  bronze: { accent: '#8A6A3E', hover: '#6F5430', press: '#574224', tint: '#F0EAE0', line: '#D9CEBC', onAccent: '#F6F5F1', positive: '#8A6A3E', darkAccent: '#C4A672', darkHover: '#D4BA8A', darkPress: '#E0CCA0', darkTint: '#28221A', darkLine: '#4A3E2E' },
};

// Density presets (change section padding + gap rhythm)
const DENSITY_MAP = {
  compact:   { section: '4rem',  space9: '4rem',  space10: '5rem',  space8: '3rem',  space7: '2rem' },
  expansive: { section: '6rem',  space9: '6rem',  space10: '8rem',  space8: '4rem',  space7: '3rem' },
  editorial: { section: '8rem',  space9: '8rem',  space10: '10rem', space8: '5rem',  space7: '4rem' },
};

// Voice presets (swap hero + section statement copy)
const VOICE_MAP = {
  consulting: {
    hero: 'Designing clarity in complex product',
    heroEm: 'systems.',
    lead: 'Working across enterprise platforms, AI-assisted workflows, and decision-heavy environments. Bringing order to problems that involve people, data, and judgement at once.',
    philo: 'Complex problems are rarely short of answers. They are short of agreement.',
    cap: 'Three things I am consistently brought in to do.',
    problem: 'Where I am most useful.',
    model: 'One senior partner, in the work. With a network behind it.',
    contact: 'Working on a problem that resists clean answers?',
  },
  direct: {
    hero: 'I help teams make better product',
    heroEm: 'decisions.',
    lead: 'Enterprise platforms, AI workflows, complex systems. I bring structure to the problems that resist easy answers.',
    philo: 'Good decisions need clarity. I make the system visible so teams can reason about it.',
    cap: 'What I do.',
    problem: 'Problems I solve.',
    model: 'I work on the problem directly. When it needs more, I bring in specialists.',
    contact: 'Have a problem worth solving?',
  },
  warm: {
    hero: 'Bringing order to the work that',
    heroEm: 'matters.',
    lead: 'I spend my time in the places where people, workflows, data, and AI meet. The problems are tangled, the stakes are real, and the answers are never obvious. That is exactly where I am most useful.',
    philo: 'The hardest product problems are not technical. They are human.',
    cap: 'The work I keep coming back to.',
    problem: 'The challenges that find me.',
    model: 'I work alongside the team, not above it. When the problem needs depth I do not have, I bring in people I trust.',
    contact: 'I would be glad to think through a hard problem with you.',
  },
};

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

  // Apply accent
  React.useEffect(() => {
    const a = ACCENT_MAP[t.accent] || ACCENT_MAP.forest;
    const r = document.documentElement;
    const isDark = r.dataset.theme === 'dark';
    r.style.setProperty('--accent', isDark ? a.darkAccent : a.accent);
    r.style.setProperty('--accent-hover', isDark ? a.darkHover : a.hover);
    r.style.setProperty('--accent-press', isDark ? a.darkPress : a.press);
    r.style.setProperty('--accent-tint', isDark ? a.darkTint : a.tint);
    r.style.setProperty('--accent-line', isDark ? a.darkLine : a.line);
    r.style.setProperty('--on-accent', isDark ? '#14130E' : a.onAccent);
    r.style.setProperty('--positive', isDark ? a.darkAccent : a.positive);
    // Watch for theme toggles
    const obs = new MutationObserver(() => {
      const dk = r.dataset.theme === 'dark';
      r.style.setProperty('--accent', dk ? a.darkAccent : a.accent);
      r.style.setProperty('--accent-hover', dk ? a.darkHover : a.hover);
      r.style.setProperty('--accent-press', dk ? a.darkPress : a.press);
      r.style.setProperty('--accent-tint', dk ? a.darkTint : a.tint);
      r.style.setProperty('--accent-line', dk ? a.darkLine : a.line);
      r.style.setProperty('--on-accent', dk ? '#14130E' : a.onAccent);
      r.style.setProperty('--positive', dk ? a.darkAccent : a.positive);
    });
    obs.observe(r, { attributes: true, attributeFilter: ['data-theme'] });
    return () => obs.disconnect();
  }, [t.accent]);

  // Apply density
  React.useEffect(() => {
    const d = DENSITY_MAP[t.density] || DENSITY_MAP.expansive;
    const r = document.documentElement;
    r.style.setProperty('--space-9', d.space9);
    r.style.setProperty('--space-10', d.space10);
    r.style.setProperty('--space-8', d.space8);
    r.style.setProperty('--space-7', d.space7);
  }, [t.density]);

  // Expose voice to the app
  React.useEffect(() => {
    window.__voice = VOICE_MAP[t.voice] || VOICE_MAP.consulting;
    window.dispatchEvent(new CustomEvent('voice-change'));
  }, [t.voice]);

  return (
    <TweaksPanel>
      <TweakSection label="Character" />
      <TweakRadio label="Voice" value={t.voice}
        options={['consulting', 'direct', 'warm']}
        onChange={(v) => setTweak('voice', v)} />
      <TweakRadio label="Accent" value={t.accent}
        options={['forest', 'navy', 'bronze']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'expansive', 'editorial']}
        onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

Object.assign(window, { SiteTweaks, VOICE_MAP });