/* app.jsx — root composer */

const PALETTE = {
  bg:"#f6f2ec", bg2:"#efe9df", bg3:"#e8e1d3",
  sage:"#6b7f63", sage3:"#d8dfd0", sage4:"#eef1e8",
  terra:"#b9603e", terra3:"#ead7c8",
};

function App() {
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--bg',      PALETTE.bg);
    root.style.setProperty('--bg-2',    PALETTE.bg2);
    root.style.setProperty('--bg-3',    PALETTE.bg3);
    root.style.setProperty('--sage',    PALETTE.sage);
    root.style.setProperty('--sage-3',  PALETTE.sage3);
    root.style.setProperty('--sage-4',  PALETTE.sage4);
    root.style.setProperty('--terra',   PALETTE.terra);
    root.style.setProperty('--terra-3', PALETTE.terra3);

    root.style.setProperty('--font-display', "'Fraunces', Georgia, serif");
    root.style.setProperty('--font-sans',    "'DM Sans', system-ui, sans-serif");
    root.style.setProperty('--font-serif',   "'Fraunces', Georgia, serif");

    document.body.style.fontSize = '16px';
    root.style.setProperty('--heading-weight',  350);
    root.style.setProperty('--letter-tracking', '0em');
    root.style.setProperty('--radius',    '18px');
    root.style.setProperty('--radius-lg', '27.9px');
    root.style.setProperty('--radius-xl', '39.6px');
    root.style.setProperty('--radius-sm', '9.9px');
    root.style.setProperty('--maxw',      '1240px');

    document.body.dataset.theme     = 'light';
    document.body.dataset.density   = 'regular';
    document.body.dataset.italics   = 'on';
    document.body.dataset.nav       = 'classic';
    document.body.dataset.btnshape  = 'pill';
    document.body.dataset.btnstyle  = 'filled';
    document.body.dataset.card      = 'flat';
    document.body.dataset.imgfilter = 'none';
    document.body.dataset.grain     = 'off';
    document.body.dataset.shadows   = 'on';
    document.body.dataset.ulinks    = 'off';
    document.body.dataset.navsticky = 'on';
  }, []);

  React.useEffect(() => {
    const QUERY = [
      '.eyebrow', 'h1', 'h2', 'h3',
      '.hero-img', '.hero-meta',
      '.step', '.prob-cell', '.testimonial-card',
      '.card', '.card-sage', '.card-terra',
      '.stat', '.kv', '.booking',
      '.value-item', '.footer-brand-big', '.footer-col',
    ].join(', ');

    document.querySelectorAll('section:not(.hero), footer, .values-strip').forEach(sec => {
      sec.querySelectorAll(QUERY).forEach((el, i) => {
        el.classList.add('rv');
        el.style.setProperty('--rv-d', Math.min(i * 80, 400) + 'ms');
      });
    });

    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('rv-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });

    document.querySelectorAll('.rv').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <HeroEditorial headlineKey="decideForMe" headlines={{ decideForMe: { mode: "default" } }} />
      <ValuesStrip />
      <About />
      <Hypnose />
      <Problematiques />
      <Benefits />
      <Testimonials />
      <Infos />
      <Footer />
    </>
  );
}

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