// Tweaks app — knobs for the McKline site.
// Controls live by mutating body classes + CSS variables on :root.

const MCK_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "heroImageTreatment": "standard",
  "bioLayout": "vertical",
  "bioPhotoHeight": 320,
  "bioPhotoFocus": "center 18%",
  "accentIntensity": "standard",
  "reduceMotion": false
}/*EDITMODE-END*/;

const HERO_TREATMENT_CSS = {
  standard: 'none',
  framed: 'none',          // framed adds the green border; filter stays clean
  desaturated: 'grayscale(0.35) brightness(0.85)',
  duotone: 'grayscale(0.6) brightness(0.85) contrast(1.05) sepia(0.15) hue-rotate(40deg)',
};

const ACCENT_VARS = {
  subtle:   { green10: 'rgba(197,232,74,0.06)', stroke: 'rgba(197,232,74,0.04)' },
  standard: { green10: 'rgba(197,232,74,0.10)', stroke: 'rgba(197,232,74,0.07)' },
  loud:     { green10: 'rgba(197,232,74,0.18)', stroke: 'rgba(197,232,74,0.14)' },
};

function applyTweaks(t) {
  const body = document.body;
  // Hero layout class
  body.classList.remove('hero-split', 'hero-frame', 'hero-full');
  body.classList.add('hero-' + (t.heroLayout || 'split'));

  // Bio card layout class
  body.classList.remove('bio-vertical', 'bio-horizontal', 'bio-portrait', 'bio-circle');
  body.classList.add('bio-' + (t.bioLayout || 'vertical'));

  // Hero image filter
  const root = document.documentElement;
  root.style.setProperty('--hero-image-filter', HERO_TREATMENT_CSS[t.heroImageTreatment] || 'none');

  // If framed, the css class handles the border; only need to clear filter
  if (t.heroImageTreatment === 'framed') {
    root.style.setProperty('--hero-image-filter', 'none');
  }
  // Add a body class so framed-treatment styles can layer with chosen layout
  body.classList.toggle('hero-treat-framed', t.heroImageTreatment === 'framed');

  // Bio photo dimensions
  root.style.setProperty('--bio-photo-h', (t.bioPhotoHeight || 320) + 'px');
  root.style.setProperty('--bio-photo-position', t.bioPhotoFocus || 'center 18%');

  // Accent
  const acc = ACCENT_VARS[t.accentIntensity] || ACCENT_VARS.standard;
  root.style.setProperty('--green-10', acc.green10);

  // Reduce motion: pause marquee + scroll reveals
  if (t.reduceMotion) {
    body.classList.add('reduce-motion');
  } else {
    body.classList.remove('reduce-motion');
  }
}

// Inject extra CSS for framed treatment + reduce-motion
(function injectExtraTweakCss(){
  const css = `
    body.hero-treat-framed .hero-img-slot,
    body.hero-treat-framed .hero-img-main {
      outline: 4px solid var(--green); outline-offset: -4px;
    }
    body.reduce-motion .marquee-inner { animation: none; }
    body.reduce-motion .reveal { transition: none; }
    body.reduce-motion .reveal { opacity: 1; transform: none; }
    body.reduce-motion .cursor, body.reduce-motion .cursor-ring { display: none; }
  `;
  const s = document.createElement('style');
  s.textContent = css;
  document.head.appendChild(s);
})();

function TweaksApp() {
  const [t, setTweak] = useTweaks(MCK_TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={t.heroLayout}
        options={[
          { value: 'split', label: 'Split' },
          { value: 'frame', label: 'Framed' },
          { value: 'full',  label: 'Full Bleed' },
        ]}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakSelect
        label="Image treatment"
        value={t.heroImageTreatment}
        options={[
          { value: 'standard',    label: 'Standard' },
          { value: 'framed',      label: 'Green outline' },
          { value: 'desaturated', label: 'Desaturated' },
          { value: 'duotone',     label: 'Cool duotone' },
        ]}
        onChange={(v) => setTweak('heroImageTreatment', v)}
      />

      <TweakSection label="About — Bio Cards" />
      <TweakSelect
        label="Layout"
        value={t.bioLayout}
        options={[
          { value: 'vertical',   label: 'Vertical (default)' },
          { value: 'portrait',   label: 'Tall portrait (4:5)' },
          { value: 'horizontal', label: 'Side-by-side' },
          { value: 'circle',     label: 'Round + side text' },
        ]}
        onChange={(v) => setTweak('bioLayout', v)}
      />
      <TweakSlider
        label="Photo height"
        value={t.bioPhotoHeight}
        min={220} max={520} step={10} unit="px"
        onChange={(v) => setTweak('bioPhotoHeight', v)}
      />
      <TweakSelect
        label="Face focus"
        value={t.bioPhotoFocus}
        options={[
          { value: 'center 10%', label: 'High (face at top)' },
          { value: 'center 18%', label: 'Default' },
          { value: 'center 30%', label: 'Mid' },
          { value: 'center 50%', label: 'Centered' },
        ]}
        onChange={(v) => setTweak('bioPhotoFocus', v)}
      />

      <TweakSection label="Atmosphere" />
      <TweakRadio
        label="Accent intensity"
        value={t.accentIntensity}
        options={[
          { value: 'subtle',   label: 'Subtle' },
          { value: 'standard', label: 'Std' },
          { value: 'loud',     label: 'Loud' },
        ]}
        onChange={(v) => setTweak('accentIntensity', v)}
      />
      <TweakToggle
        label="Reduce motion"
        value={t.reduceMotion}
        onChange={(v) => setTweak('reduceMotion', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);