/* 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": "Website Services",
  "headlineAccent": "AI & Automation",
  "subhead": "Your website isn’t just a digital business card—it’s the core of your brand and marketing. We design and develop websites and apps with deliberate strategy behind it: structured lead funnels, strong SEO structure, and seamless mobile performance. And once it’s live, we have the hosting chops to ensure it runs fast and stays secure.",
  "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;