// app.jsx — Main app for Natacha's site

const PALETTES = {
  bleu: {
    label: 'Bleu doux',
    light: {
      '--bg': '#F5F1EA',
      '--bg-2': '#E8EEF1',
      '--bg-3': '#FAF7F1',
      '--ink': '#1F4659',
      '--ink-soft': '#3D5C6C',
      '--primary': '#7DB3D1',
      '--primary-soft': '#C5DBE7',
      '--accent': '#B5896A',
      '--muted': '#8FA5AE',
      '--line': 'rgba(31,70,89,0.12)',
    },
    dark: {
      '--bg': '#152128',
      '--bg-2': '#1D2C35',
      '--bg-3': '#1A2932',
      '--ink': '#F2EDE4',
      '--ink-soft': '#C7CDD2',
      '--primary': '#7DB3D1',
      '--primary-soft': '#3F6378',
      '--accent': '#C9A485',
      '--muted': '#7E8C93',
      '--line': 'rgba(242,237,228,0.10)',
    }
  },
  marron: {
    label: 'Terre bohème',
    light: {
      '--bg': '#F8F1E8',
      '--bg-2': '#ECDFD0',
      '--bg-3': '#FCF7EF',
      '--ink': '#3D2E22',
      '--ink-soft': '#5C4738',
      '--primary': '#B5896A',
      '--primary-soft': '#D9BFA6',
      '--accent': '#7B9BAE',
      '--muted': '#A89280',
      '--line': 'rgba(61,46,34,0.12)',
    },
    dark: {
      '--bg': '#1F1812',
      '--bg-2': '#2A2018',
      '--bg-3': '#241C15',
      '--ink': '#F4EAD8',
      '--ink-soft': '#C9B69D',
      '--primary': '#C49A78',
      '--primary-soft': '#553F2D',
      '--accent': '#9CB6C6',
      '--muted': '#8A7763',
      '--line': 'rgba(244,234,216,0.10)',
    }
  },
  gris: {
    label: 'Brume & lin',
    light: {
      '--bg': '#F4F2EE',
      '--bg-2': '#E5E2DC',
      '--bg-3': '#FAF8F4',
      '--ink': '#2D3438',
      '--ink-soft': '#4F575C',
      '--primary': '#9CA5A8',
      '--primary-soft': '#C7CDCF',
      '--accent': '#C7A98B',
      '--muted': '#8B8F8C',
      '--line': 'rgba(45,52,56,0.12)',
    },
    dark: {
      '--bg': '#181B1D',
      '--bg-2': '#22262A',
      '--bg-3': '#1D2123',
      '--ink': '#EEEAE3',
      '--ink-soft': '#BFBDB6',
      '--primary': '#A9B3B6',
      '--primary-soft': '#3F474B',
      '--accent': '#D4B797',
      '--muted': '#7D817F',
      '--line': 'rgba(238,234,227,0.10)',
    }
  },
};

const FONTS = {
  script: { label: 'Manuscrit (comme le livre)', class: '' },
  serif:  { label: 'Serif élégant',              class: 'font-serif' },
  mix:    { label: 'Mix script + serif',         class: 'font-mix' },
};

const SECTION_STYLES = {
  cards:     { label: 'Cartes',     class: '' },
  fullbleed: { label: 'Full-bleed', class: 'style-fullbleed' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bleu",
  "font": "script",
  "sectionStyle": "cards",
  "floralDensity": 1,
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');
  const [animKey, setAnimKey] = React.useState(0);

  // Apply palette + dark mode via CSS vars on :root
  React.useEffect(() => {
    const pal = PALETTES[t.palette] || PALETTES.bleu;
    const vars = t.dark ? pal.dark : pal.light;
    const root = document.documentElement;
    for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
  }, [t.palette, t.dark]);

  // Apply font + section style classes on body
  React.useEffect(() => {
    document.body.classList.remove('font-serif', 'font-mix', 'style-fullbleed', 'theme-dark');
    const fontClass = FONTS[t.font]?.class;
    if (fontClass) document.body.classList.add(fontClass);
    const sectionClass = SECTION_STYLES[t.sectionStyle]?.class;
    if (sectionClass) document.body.classList.add(sectionClass);
    if (t.dark) document.body.classList.add('theme-dark');
  }, [t.font, t.sectionStyle, t.dark]);

  const handleNav = (p) => {
    setPage(p);
    setAnimKey(k => k + 1);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Desktop-only dynamic effects: scroll reveal + parallax on peach-blobs.
  // Gated by media query so mobile/tablet stays fully static.
  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 1024px) and (hover: hover) and (pointer: fine)');
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!mq.matches || reducedMotion) return;

    let io;
    const observeReveals = () => {
      if (io) io.disconnect();
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('reveal-in');
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
      document.querySelectorAll('main.page > section, .page-header, .footer-grid, .trust')
        .forEach(el => { el.classList.add('reveal'); io.observe(el); });
    };

    let rafId = 0;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      rafId = requestAnimationFrame(() => {
        const y = window.scrollY;
        const blobs = document.querySelectorAll('.peach-blob.organic');
        blobs.forEach((b, i) => {
          const factor = 0.12 + (i % 3) * 0.04;
          b.style.transform = `translate3d(0, ${y * factor}px, 0)`;
        });
        ticking = false;
      });
    };

    const setup = () => { observeReveals(); onScroll(); };
    const id = requestAnimationFrame(setup);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(id);
      cancelAnimationFrame(rafId);
      window.removeEventListener('scroll', onScroll);
      if (io) io.disconnect();
    };
  }, [page, animKey]);

  return (
    <>
      <TopNav current={page} onNav={handleNav} />
      <div key={animKey} className="page-fade-enter">
        {page === 'home' && <HomePage onNav={handleNav} density={t.floralDensity} />}
        {page === 'livres' && <BooksPage onNav={handleNav} density={t.floralDensity} />}
        {page === 'accompagnement' && <AccompPage onNav={handleNav} density={t.floralDensity} />}
        {page === 'about' && <AboutPage onNav={handleNav} density={t.floralDensity} />}
        {page === 'contact' && <ContactPage onNav={handleNav} density={t.floralDensity} />}
      </div>
      <Footer onNav={handleNav} />
      <MobileFloatingCTA current={page} onNav={handleNav} />
    </>
  );
}

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