// Tweaks panel for Morevolved homepage.
// Writes CSS custom properties on :root to drive accent, motion, density.

const TWEAK_DEFAULTS = {
  accent: "#3D9B4A",
  mosaicLayout: "cards",
  motion: "ambient",
  density: "regular",
  headline: "truth",
};

const ACCENT_OPTIONS = [
  "#3D9B4A", // primary green
  "#2D7A38", // deep green
  "#4EBBA8", // teal
  "#f5f5f0", // warm white (monochrome mode)
];

const HEADLINES = {
  truth: { line1: "Truth in the", emphasis: "Chaos", period: true },
  evolve: { line1: "Evolve faster than the", emphasis: "world changes", period: true },
  evolution: { line1: "The", emphasis: "evolution", line3: "company.", period: false },
  question: { line1: "How fast can your organization", emphasis: "actually move", period: true },
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.setAttribute('data-mosaic', t.mosaicLayout);
    root.setAttribute('data-motion', t.motion === 'still' ? 'off' : 'on');

    // Density (modifies --pad-x and section padding)
    const densityMap = {
      compact: { padX: '24px', section: '90px' },
      regular: { padX: 'clamp(24px, 5vw, 96px)', section: '140px' },
      airy:    { padX: 'clamp(48px, 7vw, 140px)', section: '180px' },
    };
    const d = densityMap[t.density] || densityMap.regular;
    root.style.setProperty('--pad-x', d.padX);
    document.querySelectorAll('.section').forEach(s => {
      if (!s.classList.contains('compact')) s.style.paddingTop = d.section;
      s.style.paddingBottom = d.section;
    });

    // Headline swap
    const h1 = document.querySelector('.hero-headline');
    if (h1) {
      const cfg = HEADLINES[t.headline] || HEADLINES.truth;
      if (cfg.line3) {
        h1.innerHTML = `${cfg.line1}<br /><span class="accent">${cfg.emphasis}</span><br />${cfg.line3}<span class="period">.</span>`;
      } else {
        h1.innerHTML = `${cfg.line1}<br /><span class="accent">${cfg.emphasis}</span><span class="period">.</span>`;
      }
    }
  }, [t.accent, t.mosaicLayout, t.motion, t.density, t.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="MOSAIC" />
      <TweakRadio
        label="Layout"
        value={t.mosaicLayout}
        options={['cards', 'timeline', 'stack']}
        onChange={(v) => setTweak('mosaicLayout', v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Headline"
        value={t.headline}
        options={[
          { value: 'truth', label: 'Truth in the Chaos.' },
          { value: 'evolve', label: 'Evolve faster than the world.' },
          { value: 'evolution', label: 'The evolution company.' },
          { value: 'question', label: 'How fast can you move?' },
        ]}
        onChange={(v) => setTweak('headline', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Animation"
        value={t.motion}
        options={['still', 'ambient']}
        onChange={(v) => setTweak('motion', v)}
      />

      <TweakSection label="Density" />
      <TweakRadio
        label="Spacing"
        value={t.density}
        options={['compact', 'regular', 'airy']}
        onChange={(v) => setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

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