// Neci Recrutamento — main app with palette tweaks
const { useEffect } = React;

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "palette": "olive-cream",
  "showTrust": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

const PALETTES = {
  "olive-cream": {
    label: "Oliva + creme",
    vars: {
      '--bg': '#f5f1e8', '--bg-2': '#ede6d4',
      '--ink': '#1b2014', '--ink-2': '#4a4f3e', '--ink-3': '#7a7d6b',
      '--line': '#d8d0bd',
      '--accent': '#4f5b2a', '--accent-deep': '#2f3818', '--accent-bright': '#a8c44a'
    }
  },
  "moss-stone": {
    label: "Musgo + pedra",
    vars: {
      '--bg': '#f1efe8', '--bg-2': '#e3e0d2',
      '--ink': '#171a18', '--ink-2': '#4b4f4a', '--ink-3': '#7d8079',
      '--line': '#d3d0c4',
      '--accent': '#3a5240', '--accent-deep': '#1f2e25', '--accent-bright': '#7eb08a'
    }
  },
  "terracotta": {
    label: "Terracota",
    vars: {
      '--bg': '#f4ede4', '--bg-2': '#e8dccb',
      '--ink': '#231914', '--ink-2': '#5a463b', '--ink-3': '#8a7868',
      '--line': '#d8c8b3',
      '--accent': '#9c4a2e', '--accent-deep': '#5e2b1a', '--accent-bright': '#d99a6e'
    }
  },
  "midnight": {
    label: "Meia-noite",
    vars: {
      '--bg': '#0f1614', '--bg-2': '#1a2320',
      '--ink': '#f1ede2', '--ink-2': '#c9c3b3', '--ink-3': '#8a8675',
      '--line': '#2a342f',
      '--accent': '#a8c44a', '--accent-deep': '#cbe06a', '--accent-bright': '#a8c44a'
    }
  },
  "ivory-navy": {
    label: "Marfim + marinho",
    vars: {
      '--bg': '#f4f1ea', '--bg-2': '#e6e2d5',
      '--ink': '#0f1929', '--ink-2': '#3a4759', '--ink-3': '#7a8294',
      '--line': '#d2d0c5',
      '--accent': '#1f3a5f', '--accent-deep': '#0f2240', '--accent-bright': '#c9a44d'
    }
  },
  "rose-clay": {
    label: "Rosé + argila",
    vars: {
      '--bg': '#f6ece6', '--bg-2': '#ecdcd2',
      '--ink': '#2a1a1a', '--ink-2': '#5a4040', '--ink-3': '#8a7373',
      '--line': '#dfc9bd',
      '--accent': '#8a3a4a', '--accent-deep': '#4f2030', '--accent-bright': '#e8a8a0'
    }
  },
  "sand-cocoa": {
    label: "Areia + cacau",
    vars: {
      '--bg': '#f3ece0', '--bg-2': '#e6dac6',
      '--ink': '#2a1f14', '--ink-2': '#564631', '--ink-3': '#8a7860',
      '--line': '#d6c5a8',
      '--accent': '#6b4626', '--accent-deep': '#3d2613', '--accent-bright': '#c89557'
    }
  },
  "forest-bone": {
    label: "Mata + osso",
    vars: {
      '--bg': '#efece4', '--bg-2': '#dfdbcc',
      '--ink': '#0e1a14', '--ink-2': '#324035', '--ink-3': '#6c7d70',
      '--line': '#c8ccbb',
      '--accent': '#1f4a30', '--accent-deep': '#0d2a1a', '--accent-bright': '#b8c47e'
    }
  }
};

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES["olive-cream"];
  Object.entries(p.vars).forEach(([k, v]) => {
    document.documentElement.style.setProperty(k, v);
  });
}

// Build palette options for TweakColor — each option is an array of hex strings
// (the starter renders palettes when given an array of arrays).
const PALETTE_OPTIONS = Object.entries(PALETTES).map(([k, p]) => [
  p.vars['--accent-deep'],
  p.vars['--accent-bright'],
  p.vars['--bg'],
  p.vars['--bg-2'],
]);
const PALETTE_KEYS = Object.keys(PALETTES);

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

  useEffect(() => {
    applyPalette(t.palette);
  }, [t.palette]);

  useEffect(() => {
    if (t.density === 'compact') {
      document.querySelectorAll('section').forEach(s => {
        s.style.paddingTop = '64px';
        s.style.paddingBottom = '64px';
      });
    } else {
      document.querySelectorAll('section').forEach(s => {
        s.style.paddingTop = '';
        s.style.paddingBottom = '';
      });
    }
  }, [t.density]);

  // Find which palette option matches current
  const currentPaletteValue = PALETTE_OPTIONS[PALETTE_KEYS.indexOf(t.palette)] || PALETTE_OPTIONS[0];

  return (
    <>
      <Nav/>
      <Hero/>
      {t.showTrust && <Trust/>}
      <Services/>
      <Process/>
      <Differentials/>
      <Story/>
      <Testimonials/>
      <FAQ/>
      <CTA/>
      <Footer/>
      <FloatingWhatsApp/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta"/>
        <TweakColor
          label="Direção visual"
          value={currentPaletteValue}
          options={PALETTE_OPTIONS}
          onChange={v => {
            const idx = PALETTE_OPTIONS.findIndex(o => o[0] === v[0]);
            if (idx >= 0) setTweak('palette', PALETTE_KEYS[idx]);
          }}
        />
        <TweakSection label="Layout"/>
        <TweakToggle
          label="Faixa de valores"
          value={t.showTrust}
          onChange={v => setTweak('showTrust', v)}
        />
        <TweakRadio
          label="Densidade"
          value={t.density}
          options={['comfortable', 'compact']}
          onChange={v => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

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