// v2/app.jsx — main app + Tweaks

const V2_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#6C47FF", "#00D2FF", "#8F6BFF"],
  "heroVariant": "center",
  "density": "regular",
"theme": "light"
}/*EDITMODE-END*/;

const V2_PALETTES = [
  { name: 'TIKELU (púrpura → cyan)', val: ['#6C47FF', '#00D2FF', '#8F6BFF'], light: '#B8A8FF' },
  { name: 'Aurora (rosa → azul)',   val: ['#EC4899', '#3B82F6', '#F472B6'], light: '#FBCFE8' },
  { name: 'Esmeralda (verde → cyan)', val: ['#10B981', '#06B6D4', '#34D399'], light: '#A7F3D0' },
  { name: 'Coral (naranja → rosa)', val: ['#FF7A4D', '#EC4899', '#FB923C'], light: '#FED7AA' },
];

function applyV2Palette(palette) {
  const found = V2_PALETTES.find(p => JSON.stringify(p.val) === JSON.stringify(palette)) || V2_PALETTES[0];
  const r = document.documentElement.style;
  r.setProperty('--v-brand', found.val[0]);
  r.setProperty('--v-brand-accent', found.val[1]);
  r.setProperty('--v-brand-2', found.val[2]);
  r.setProperty('--v-brand-light', found.light);
}

function V2App() {
  const [t, setTweak] = useTweaks(V2_DEFAULTS);

  React.useEffect(() => { applyV2Palette(t.palette); }, [t.palette]);
  React.useEffect(() => { document.documentElement.setAttribute('data-density', t.density); }, [t.density]);
  React.useEffect(() => { document.documentElement.setAttribute('data-theme', t.theme); }, [t.theme]);

  return (
    <React.Fragment>
      <V2Nav/>
      <main>
        <V2Hero variant={t.heroVariant}/>
        <V2Trust/>
        <V2ScrollScene/>
        <V2Problema/>
        <V2Features/>
        <V2Industrias/>
        <V2Testimonios/>
        <V2Caso/>
        <V2Precios/>
        <V2FAQ/>
        <V2Contacto/>
        <V2FinalCTA/>
      </main>
      <V2Footer/>
      <V2StickyCTA/>
      <V2ExitIntent/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apariencia"/>
        <TweakRadio
          label="Tema"
          value={t.theme}
          options={['light', 'dark']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Paleta"
          value={t.palette}
          options={V2_PALETTES.map(p => p.val)}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={['compact', 'regular', 'spacious']}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Hero"/>
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={['center', 'split']}
          onChange={(v) => setTweak('heroVariant', v)}
        />

      </TweaksPanel>
    </React.Fragment>
  );
}

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