// app.jsx — mount + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#fcb865",
  "headlinePreset": "O primeiro ERP que você opera conversando",
  "headline": "O primeiro ERP que você opera conversando",
  "highlight": "conversando",
  "density": "regular",
  "showPartnerBadge": true
}/*EDITMODE-END*/;

// Curated alternative headlines (with the word to highlight in parens).
// User can pick a preset or type their own in the text field.
const HEADLINE_PRESETS = [
  { t: 'O primeiro ERP que você opera conversando',           hl: 'conversando' },
  { t: 'ERP de gigante, no ritmo da sua PME',                 hl: 'PME' },
  { t: 'Capacidade enterprise. Preço de PME',                 hl: 'Preço de PME' },
  { t: 'Seu próximo ERP cabe num chat',                       hl: 'chat' },
  { t: 'ERP enterprise, implementado em semanas',             hl: 'semanas' },
  { t: 'Pare de escolher entre simples e capaz',              hl: 'capaz' },
  { t: 'Sua operação inteira. Operável por IA',               hl: 'Operável por IA' },
  { t: 'O ERP que sua PME merece, no tempo que ela tem',      hl: 'tempo que ela tem' },
  { t: 'Toda a potência do Odoo. Implementada por IA',        hl: 'Implementada por IA' },
];

// Helper: pair accent color with a soft tint + dark-ink for hl backgrounds.
const ACCENT_PRESETS = {
  '#fcb865': { soft:'#fff4e2', ink:'#5a3a06' }, // Deep AI orange
  '#7bffa3': { soft:'#e8ffef', ink:'#0a4a22' }, // Deep Growth green
  '#814dde': { soft:'#f3edff', ink:'#3a1d75' }, // Deep Control purple
  '#2470db': { soft:'#e6efff', ink:'#0f3a82' }, // Deep Direction blue
};

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

  React.useEffect(() => {
    const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS['#fcb865'];
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-soft', preset.soft);
    document.documentElement.style.setProperty('--accent-ink', preset.ink);
    document.body.setAttribute('data-density', t.density);
  }, [t.accent, t.density]);

  return (
    <div>
      <Nav />
      <main>
        <Hero headline={t.headline} highlight={t.highlight} showPartnerBadge={t.showPartnerBadge} />
        <Pain />
        <Modules />
        <Why />
        <Spotlight />
        <ImplementationCarousel />
        <Compare />
        <Blog />
        <CTA />
        <BrandSpinBand />
      </main>
      <Footer showPartnerBadge={t.showPartnerBadge} />

      <TweaksPanel>
        <TweakSection label="Destaque de marca" />
        <TweakColor label="Cor de highlight" value={t.accent}
          options={['#fcb865','#7bffa3','#814dde','#2470db']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Mostrar selo Odoo Ready Partner" value={t.showPartnerBadge}
          onChange={(v) => setTweak('showPartnerBadge', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Densidade" value={t.density}
          options={['compact','regular','airy']}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Copy do hero" />
        <TweakSelect label="Chamadas alternativas"
          value={t.headlinePreset}
          options={HEADLINE_PRESETS.map(p => p.t)}
          onChange={(v) => {
            const preset = HEADLINE_PRESETS.find(p => p.t === v);
            setTweak({ headlinePreset: v, headline: v, highlight: preset ? preset.hl : t.highlight });
          }} />
        <TweakText label="Headline (editável)" value={t.headline}
          onChange={(v) => setTweak('headline', v)} />
        <TweakText label="Palavra em destaque" value={t.highlight}
          onChange={(v) => setTweak('highlight', v)} />
      </TweaksPanel>
    </div>
  );
}

// Hydrate the SSR HTML to preserve the initial paint and avoid a full re-render flash.
ReactDOM.hydrateRoot(document.getElementById('app'), <App />);