/* ============================================================
   APEX RIDGE — Hero (Direction B) Tweaks
   Mounts the Tweaks panel and applies live changes to the page
   by setting CSS variables, toggling background treatment, and
   editing hero copy. Vanilla page; panel is React-only.
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#0E8E80", "#14B8A6", "#2DD4BF"],
  "eyebrow": "Enterprise AI Consulting & Setup",
  "line1": "Intelligence,",
  "line2": "Operationalized.",
  "emblem": true,
  "emblemSize": 118,
  "stats": true,
  "bg": "full",
  "glow": 1
}/*EDITMODE-END*/;

/* accent palettes — [deep, base, bright], matched chroma/lightness */
const ACCENTS = [
  ["#0E8E80", "#14B8A6", "#2DD4BF"], // teal (brand)
  ["#1D6FB8", "#2D8FD4", "#5BB0EC"], // azure
  ["#6D4FC0", "#8A6FE0", "#A78BFA"], // violet
  ["#C2871C", "#E0A52D", "#F4C254"], // amber
];

/* SVG accent shapes captured once so re-tints survive */
let _accentShapes = null;
function accentShapes() {
  if (_accentShapes) return _accentShapes;
  _accentShapes = [].slice.call(document.querySelectorAll('svg [fill="#14B8A6"]'));
  return _accentShapes;
}

function setText(sel, txt) {
  const el = document.querySelector(sel);
  if (el && typeof txt === 'string') el.textContent = txt;
}

function applyTweaks(t) {
  const root = document.documentElement;
  const [deep, base, bright] = t.accent || ACCENTS[0];
  root.style.setProperty('--teal-deep', deep);
  root.style.setProperty('--teal', base);
  root.style.setProperty('--teal-bright', bright);
  root.style.setProperty('--glow-op', String(t.glow));
  accentShapes().forEach(function (s) { s.setAttribute('fill', base); });

  const hero = document.querySelector('.hero');
  if (hero) hero.setAttribute('data-bg', t.bg);

  const peak = document.querySelector('[data-peak]');
  if (peak) {
    peak.style.display = t.emblem ? '' : 'none';
    peak.setAttribute('width', t.emblemSize);
    peak.setAttribute('height', t.emblemSize);
  }
  const stats = document.querySelector('[data-stats]');
  if (stats) stats.style.display = t.stats ? '' : 'none';

  setText('[data-eyebrow]', t.eyebrow);
  setText('[data-h1]', t.line1);
  setText('[data-h2]', t.line2);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(function () { applyTweaks(t); }, [t]);

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

      <TweakSection label="Hero copy" />
      <TweakText label="Eyebrow" value={t.eyebrow}
        onChange={function (v) { setTweak('eyebrow', v); }} />
      <TweakText label="Headline" value={t.line1}
        onChange={function (v) { setTweak('line1', v); }} />
      <TweakText label="Accent line" value={t.line2}
        onChange={function (v) { setTweak('line2', v); }} />

      <TweakSection label="Composition" />
      <TweakToggle label="Show emblem" value={t.emblem}
        onChange={function (v) { setTweak('emblem', v); }} />
      <TweakSlider label="Emblem size" value={t.emblemSize} min={64} max={200} step={2} unit="px"
        onChange={function (v) { setTweak('emblemSize', v); }} />
      <TweakToggle label="Show stat bar" value={t.stats}
        onChange={function (v) { setTweak('stats', v); }} />

      <TweakSection label="Background" />
      <TweakRadio label="Treatment" value={t.bg}
        options={["full", "grid", "glow", "min"]}
        onChange={function (v) { setTweak('bg', v); }} />
      <TweakSlider label="Glow strength" value={t.glow} min={0} max={1.6} step={0.1}
        onChange={function (v) { setTweak('glow', v); }} />
    </TweaksPanel>
  );
}

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