/* 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": "Design and Unify your Operations with AI & Automation",
  "headlineAccent": "AI & Automation",
  "subhead": "Stop letting fragmented systems, antiquated design, and restrictive tools slow your business. As an agency focused on technology and driving business results, we recognize the tremendous ability of AI tools to build solutions for progressive business that solves the challenges facing your teams.",
  "ctaPrimary": "Book Your AI Discovery Call",
  "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;