/* VEA AI Page — Tweaks wrapper
   Wraps VariationThree, owns tweakable state, and writes CSS variables to :root
   so all child components (which already read the brand variables) reflect the
   tweaks live. Hero copy is tweakable via state passed through React context. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#E84A4A",
  "accentColor": "#3FBFC4",
  "headline": "Your All In One Marketing Team for Digital Advertising",
  "headlineAccent": "AI & Automation",
  "subhead": "Stop leaving revenue on the table with advertising that underdelivers. As a full-funnel digital advertising agency, we build and manage paid strategies across search, social, and programmatic channels that put your brand in front of the right audience at the right moment and turn that attention into measurable business results.",
  "ctaPrimary": "BOOK A STRATEGY SESSION",
  "ctaSecondary": "Download capabilities deck",
  "showAwards": true,
  "showStatStrip": true,
  "h1Scale": 1.0,
  "ambientMotion": true
}/*EDITMODE-END*/;

const VEAContext = React.createContext(TWEAK_DEFAULTS);
window.VEAContext = VEAContext;

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

  // Push color tweaks into the brand CSS variables on :root so every
  // child component using var(--vea-red) / var(--vea-teal) reflects them.
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--vea-red', t.primaryColor);
    r.style.setProperty('--vea-teal', t.accentColor);
    // dark variants ~ -10% lightness; quick approximation
    r.style.setProperty('--vea-red-dark', shade(t.primaryColor, -0.12));
    r.style.setProperty('--vea-teal-dark', shade(t.accentColor, -0.12));
    r.style.setProperty('--vea-h1-scale', String(t.h1Scale));
    r.style.setProperty('--vea-ambient-play', t.ambientMotion ? 'running' : 'paused');
  }, [t.primaryColor, t.accentColor, t.h1Scale, t.ambientMotion]);

  return (
    <VEAContext.Provider value={t}>
      <VariationThree />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand colors" />
        <TweakColor label="Primary (red)" value={t.primaryColor}
          options={['#E84A4A', '#D63838', '#2A6FDB', '#7A5AE0', '#1F8A5B']}
          onChange={(v)=>setTweak('primaryColor', v)} />
        <TweakColor label="Accent (teal)" value={t.accentColor}
          options={['#3FBFC4', '#2FA5AA', '#F4B740', '#9B5CF6', '#0EA5E9']}
          onChange={(v)=>setTweak('accentColor', v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.headline}
          onChange={(v)=>setTweak('headline', v)} />
        <TweakText label="Accent phrase (red, underlined)" value={t.headlineAccent}
          onChange={(v)=>setTweak('headlineAccent', v)} />
        <TweakText label="Subhead" value={t.subhead} multiline
          onChange={(v)=>setTweak('subhead', v)} />
        <TweakText label="Primary CTA" value={t.ctaPrimary}
          onChange={(v)=>setTweak('ctaPrimary', v)} />
        <TweakText label="Secondary CTA" value={t.ctaSecondary}
          onChange={(v)=>setTweak('ctaSecondary', v)} />

        <TweakSection label="Hero composition" />
        <TweakToggle label="Show awards" value={t.showAwards}
          onChange={(v)=>setTweak('showAwards', v)} />
        <TweakToggle label="Show stat strip" value={t.showStatStrip}
          onChange={(v)=>setTweak('showStatStrip', v)} />
        <TweakToggle label="Ambient animation" value={t.ambientMotion}
          onChange={(v)=>setTweak('ambientMotion', v)} />
        <TweakSlider label="H1 scale" value={t.h1Scale} min={0.8} max={1.3} step={0.05}
          onChange={(v)=>setTweak('h1Scale', v)} />
      </TweaksPanel>
    </VEAContext.Provider>
  );
};

// Quick hex shade helper (positive=lighten, negative=darken)
function shade(hex, amt) {
  const c = hex.replace('#','');
  const num = parseInt(c, 16);
  let r = (num >> 16) & 0xff, g = (num >> 8) & 0xff, b = num & 0xff;
  r = Math.max(0, Math.min(255, Math.round(r + 255*amt)));
  g = Math.max(0, Math.min(255, Math.round(g + 255*amt)));
  b = Math.max(0, Math.min(255, Math.round(b + 255*amt)));
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}

window.VEATweakedApp = VEATweakedApp;