// Uvie tweaks panel — brand & visual knobs.
// Loaded as a Babel script. Uses TweaksPanel from the starter.

const { useEffect } = React;

function UvieTweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "emerald",
    "background": "midnight",
    "headline": "molecular",
    "showBg": true,
    "serifWeight": 300,
    "density": "spacious",
    "monoChips": true
  }/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.documentElement;

    // accent palettes
    const accents = {
      emerald: { primary: '#1FB87A', alt: '#0F8A8A' },
      copper:  { primary: '#C97B4F', alt: '#8A4A2C' },
      cobalt:  { primary: '#5BA0E0', alt: '#2A6FDB' },
      gold:    { primary: '#D4A85F', alt: '#8E6E2E' },
      ivory:   { primary: '#F5F1E8', alt: '#A8A398' }
    };
    const a = accents[t.accent] || accents.emerald;
    root.style.setProperty('--emerald', a.primary);
    root.style.setProperty('--teal-deep', a.alt);
    root.style.setProperty('--accent-1', a.primary);

    // background mood
    const bgs = {
      midnight: { ink: '#04101E', mid: '#0A1A2E', navy: '#0F2438' },
      slate:    { ink: '#0F1419', mid: '#1A2129', navy: '#242C36' },
      cream:    { ink: '#F5F1E8', mid: '#FAF6ED', navy: '#EDE7D8' },
      bone:     { ink: '#1F1B17', mid: '#2A2620', navy: '#34302A' }
    };
    const b = bgs[t.background] || bgs.midnight;
    root.style.setProperty('--ink', b.ink);
    root.style.setProperty('--midnight', b.mid);
    root.style.setProperty('--navy-2', b.navy);
    // flip ivory/text on light backgrounds
    if (t.background === 'cream') {
      root.style.setProperty('--ivory', '#1A1A1A');
      root.style.setProperty('--bone', '#3A3A3A');
      root.style.setProperty('--mist', '#7A7A7A');
      root.style.setProperty('--steel', '#B8B8B8');
      root.style.setProperty('--hairline', 'rgba(0,0,0,0.08)');
      root.style.setProperty('--hairline-strong', 'rgba(0,0,0,0.15)');
    } else if (t.background === 'bone') {
      root.style.setProperty('--ivory', '#F5F1E8');
      root.style.setProperty('--bone', '#D8CFC0');
      root.style.setProperty('--mist', '#9A8F80');
      root.style.setProperty('--steel', '#6E6358');
    } else {
      root.style.setProperty('--ivory', '#F5F1E8');
      root.style.setProperty('--bone', '#D8D2C5');
      root.style.setProperty('--mist', '#6B7E96');
      root.style.setProperty('--steel', '#4A5C73');
    }

    // serif weight
    document.querySelectorAll('.display, .h1, .h2, .h3, .pdp-title, .panel-title, [class*="display"]').forEach(el => {
      el.style.fontWeight = t.serifWeight;
    });

    // density
    root.style.setProperty('--section-pad', t.density === 'tight' ? '80px' : t.density === 'lush' ? '180px' : '120px');

    // hero molecule visibility
    document.querySelectorAll('.hero-molecule, .content-hero-bg').forEach(el => {
      el.style.display = t.showBg ? '' : 'none';
    });

    // mono chips style toggle
    document.querySelectorAll('.eyebrow').forEach(el => {
      el.style.fontFamily = t.monoChips ? '' : 'var(--serif)';
      el.style.textTransform = t.monoChips ? '' : 'none';
      el.style.letterSpacing = t.monoChips ? '' : '0';
      el.style.fontStyle = t.monoChips ? '' : 'italic';
      el.style.fontSize = t.monoChips ? '' : '15px';
    });
  }, [t]);

  return (
    <TweaksPanel title="Uvie Tweaks">
      <TweakSection title="Accent color">
        <TweakColor
          tweakKey="accent"
          value={t.accent}
          onChange={setTweak}
          options={[
            { value: 'emerald', color: '#1FB87A', label: 'Emerald' },
            { value: 'copper',  color: '#C97B4F', label: 'Copper'  },
            { value: 'cobalt',  color: '#5BA0E0', label: 'Cobalt'  },
            { value: 'gold',    color: '#D4A85F', label: 'Gold'    },
            { value: 'ivory',   color: '#F5F1E8', label: 'Ivory'   }
          ]}
        />
      </TweakSection>

      <TweakSection title="Background mood">
        <TweakRadio
          tweakKey="background"
          value={t.background}
          onChange={setTweak}
          options={[
            { value: 'midnight', label: 'Midnight' },
            { value: 'slate',    label: 'Slate' },
            { value: 'bone',     label: 'Bone' },
            { value: 'cream',    label: 'Cream' }
          ]}
        />
      </TweakSection>

      <TweakSection title="Visual mode">
        <TweakToggle tweakKey="showBg"    value={t.showBg}    onChange={setTweak} label="Background art (molecule, gradients)" />
        <TweakToggle tweakKey="monoChips" value={t.monoChips} onChange={setTweak} label="Monospace eyebrow labels" />
      </TweakSection>

      <TweakSection title="Headline weight">
        <TweakSlider
          tweakKey="serifWeight"
          value={t.serifWeight}
          onChange={setTweak}
          min={300} max={500} step={100}
          format={v => v === 300 ? 'Light' : v === 400 ? 'Regular' : 'Medium'}
        />
      </TweakSection>

      <TweakSection title="Section density">
        <TweakRadio
          tweakKey="density"
          value={t.density}
          onChange={setTweak}
          options={[
            { value: 'tight',    label: 'Tight' },
            { value: 'spacious', label: 'Spacious' },
            { value: 'lush',     label: 'Lush' }
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
tweakRoot.id = 'uvie-tweaks-root';
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<UvieTweaks />);