// Tweaks app for Pensiv site
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"heroHeadline":"developer","accentColor":"#2A6FDB","darkMode":false,"fontSize":16,"density":"comfortable"}/*EDITMODE-END*/;

function PensivTweaks() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  
  // Apply tweaks to document
  React.useEffect(() => {
    // Hero headline
    const heroEl = document.querySelector('[data-tweak-target="hero-headline"]');
    if (heroEl) {
      if (tweaks.heroHeadline === 'developer') {
        heroEl.textContent = 'Your team and your AI remember every deal, every customer, every decision';
      } else {
        heroEl.textContent = 'Memory infrastructure for teams that cannot afford to lose context.';
      }
    }
    
    // Accent color
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
    
    // Dark mode
    document.documentElement.setAttribute('data-theme', tweaks.darkMode ? 'dark' : 'light');
    
    // Font size
    document.documentElement.style.setProperty('--base-font-size', tweaks.fontSize + 'px');
    
    // Density
    if (tweaks.density === 'compact') {
      document.documentElement.style.setProperty('--section-padding', '60px 0');
      document.documentElement.style.setProperty('--container-gap', '40px');
    } else if (tweaks.density === 'spacious') {
      document.documentElement.style.setProperty('--section-padding', '120px 0');
      document.documentElement.style.setProperty('--container-gap', '80px');
    } else {
      document.documentElement.style.setProperty('--section-padding', '80px 0');
      document.documentElement.style.setProperty('--container-gap', '60px');
    }
  }, [tweaks]);
  
  return (
    <window.TweaksPanel title="Pensiv Design Controls">
      <window.TweakSection title="Content">
        <window.TweakRadio
          label="Hero headline"
          value={tweaks.heroHeadline}
          options={[
            { value: 'developer', label: 'Developer-focused' },
            { value: 'enterprise', label: 'Enterprise-focused' }
          ]}
          onChange={(v) => setTweak('heroHeadline', v)}
        />
      </window.TweakSection>
      
      <window.TweakSection title="Appearance">
        <window.TweakColor
          label="Accent color"
          value={tweaks.accentColor}
          options={['#2A6FDB', '#1F8A5B', '#D97757', '#8B5CF6']}
          onChange={(v) => setTweak('accentColor', v)}
        />
        
        <window.TweakToggle
          label="Dark mode"
          checked={tweaks.darkMode}
          onChange={(v) => setTweak('darkMode', v)}
        />
      </window.TweakSection>
      
      <window.TweakSection title="Layout">
        <window.TweakSlider
          label="Base font size"
          value={tweaks.fontSize}
          min={14}
          max={18}
          step={1}
          onChange={(v) => setTweak('fontSize', v)}
        />
        
        <window.TweakRadio
          label="Spacing density"
          value={tweaks.density}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'spacious', label: 'Spacious' }
          ]}
          onChange={(v) => setTweak('density', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('tweaks-root') || (() => {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  return el;
})());
root.render(<PensivTweaks />);