// AveraTech — App root + Tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "hue": 142,
  "density": "regular",
  "heroBg": "grid"
}/*EDITMODE-END*/;

const PALETTES = {
  forest:  { hue: 142, chroma: 0.155, name: 'Forest (logo)' },
  electric:{ hue: 230, chroma: 0.18,  name: 'Electric' },
  amber:   { hue: 70,  chroma: 0.16,  name: 'Amber' },
  magenta: { hue: 340, chroma: 0.18,  name: 'Magenta' },
};

function applyTheme(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.forest;
  const h = p.hue, c = p.chroma;
  root.style.setProperty('--accent',       `oklch(0.72 ${c} ${h})`);
  root.style.setProperty('--accent-2',     `oklch(0.58 ${c - 0.01} ${h})`);
  root.style.setProperty('--accent-soft',  `oklch(0.72 ${c} ${h} / 0.14)`);
  root.style.setProperty('--accent-glow',  `oklch(0.72 ${c} ${h} / 0.45)`);

  // density
  const d = t.density;
  if (d === 'compact') {
    root.style.setProperty('--container', '1160px');
    document.body.style.setProperty('--section-pad-y', '88px');
    document.querySelectorAll('.section-pad').forEach(el => {
      el.style.paddingTop = '88px'; el.style.paddingBottom = '88px';
    });
  } else if (d === 'comfy') {
    root.style.setProperty('--container', '1320px');
    document.querySelectorAll('.section-pad').forEach(el => {
      el.style.paddingTop = '160px'; el.style.paddingBottom = '160px';
    });
  } else {
    root.style.setProperty('--container', '1240px');
    document.querySelectorAll('.section-pad').forEach(el => {
      el.style.paddingTop = '120px'; el.style.paddingBottom = '120px';
    });
  }

  // hero bg
  const heroBg = document.querySelector('.hero-bg');
  if (heroBg) {
    heroBg.style.opacity = t.heroBg === 'plain' ? '0' : (t.heroBg === 'dots' ? '0.45' : '0.32');
    if (t.heroBg === 'dots') {
      heroBg.style.backgroundImage = `radial-gradient(circle, oklch(0.72 ${c} ${h} / 0.18) 1px, transparent 1px)`;
      heroBg.style.backgroundSize = '24px 24px';
    } else {
      heroBg.style.backgroundImage = `linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px)`;
      heroBg.style.backgroundSize = '56px 56px';
    }
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Services />
        <Process />
        <Tech />
        <Clients />
        <About />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Cor & marca" />
        <TweakRadio
          label="Paleta"
          value={t.palette}
          options={['forest', 'electric', 'amber', 'magenta']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Densidade"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Fundo"
          value={t.heroBg}
          options={['grid', 'dots', 'plain']}
          onChange={(v) => setTweak('heroBg', v)}
        />
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);