/* app.jsx — root composer + Tweaks expansive */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sauge",
  "customAccent": "",
  "fontPair": "fraunces_dm",
  "fontScale": 100,
  "headingWeight": 350,
  "italicAccents": true,
  "letterSpacing": 0,
  "hero": "editorial",
  "heroHeadline": "decideForMe",
  "density": "regular",
  "radius": 18,
  "containerWidth": 1240,
  "showValuesStrip": true,
  "showBenefits": true,
  "navStyle": "classic",
  "navSticky": true,
  "buttonShape": "pill",
  "buttonStyle": "filled",
  "cardElevation": "flat",
  "imageFilter": "none",
  "grain": false,
  "softShadows": true,
  "underlineLinks": false,
  "dark": false
}/*EDITMODE-END*/;

const PALETTES = {
  sauge:    { name: "Sauge & terre cuite", light: { bg:"#f6f2ec", bg2:"#efe9df", bg3:"#e8e1d3", sage:"#6b7f63", sage3:"#d8dfd0", sage4:"#eef1e8", terra:"#b9603e", terra3:"#ead7c8" }, dark: { bg:"#1a1916", bg2:"#221f1b", bg3:"#2a2722", sage:"#a9bc9f", sage3:"#3a4537", sage4:"#2a3128", terra:"#d68261", terra3:"#4a2e22" } },
  lavande:  { name: "Lavande & crème", light: { bg:"#f5f1ee", bg2:"#ede7e3", bg3:"#e3dad4", sage:"#7c6f93", sage3:"#dcd3e4", sage4:"#ece6f0", terra:"#b9603e", terra3:"#ead7c8" }, dark: { bg:"#1a181d", bg2:"#221f25", bg3:"#2a2630", sage:"#b1a4c8", sage3:"#3a3445", sage4:"#2a2530", terra:"#d68261", terra3:"#4a2e22" } },
  bleu:     { name: "Bleu nuit & sable", light: { bg:"#f4f1ec", bg2:"#ece7df", bg3:"#dfd7c8", sage:"#3d4d63", sage3:"#cdd5e0", sage4:"#e3e8ee", terra:"#b9603e", terra3:"#ead7c8" }, dark: { bg:"#13161c", bg2:"#1a1e26", bg3:"#22272f", sage:"#9eb3cf", sage3:"#2a3340", sage4:"#1f2630", terra:"#d68261", terra3:"#4a2e22" } },
  terra:    { name: "Terracotta & lin", light: { bg:"#f7f0e8", bg2:"#f0e6d9", bg3:"#e6d5c1", sage:"#a85a3a", sage3:"#ead7c8", sage4:"#f2e3d4", terra:"#7a3e26", terra3:"#e8d3c0" }, dark: { bg:"#1c1714", bg2:"#251d18", bg3:"#2e2520", sage:"#d68261", sage3:"#3d2820", sage4:"#2c1f18", terra:"#e89970", terra3:"#3a2418" } },
  rose:     { name: "Rose poudré", light: { bg:"#f7eee8", bg2:"#f0e0d6", bg3:"#e8cfc1", sage:"#a8745f", sage3:"#f0d4c4", sage4:"#f7e4d8", terra:"#8a4a36", terra3:"#e8c5b0" }, dark: { bg:"#1d1714", bg2:"#251c18", bg3:"#2e231e", sage:"#d4a08a", sage3:"#3d2a22", sage4:"#2c1f18", terra:"#e89970", terra3:"#3a2418" } },
  forest:   { name: "Forêt profonde", light: { bg:"#f1efe8", bg2:"#e6e3d6", bg3:"#d0cdb6", sage:"#2d4030", sage3:"#c5d0bb", sage4:"#dde4d3", terra:"#9a4f2a", terra3:"#e2cab0" }, dark: { bg:"#101410", bg2:"#161c16", bg3:"#1d251d", sage:"#8aa884", sage3:"#1f2820", sage4:"#16201a", terra:"#c8865c", terra3:"#3a2418" } },
  mono:     { name: "Monochrome encre", light: { bg:"#f5f4f1", bg2:"#ebe9e3", bg3:"#dad7cf", sage:"#1c1c1a", sage3:"#cfcdc6", sage4:"#e3e1da", terra:"#5c5852", terra3:"#d4d1ca" }, dark: { bg:"#0e0e0d", bg2:"#16161a", bg3:"#1f1f1d", sage:"#e8e6df", sage3:"#2a2a28", sage4:"#1c1c1a", terra:"#a8a39b", terra3:"#2a2a28" } },
};

const FONT_PAIRS = {
  fraunces_dm:        { display: "'Fraunces', Georgia, serif",          sans: "'DM Sans', system-ui, sans-serif",  serif: "'Fraunces', Georgia, serif",          label: "Fraunces · DM Sans" },
  cormorant_inter:    { display: "'Cormorant Garamond', Georgia, serif", sans: "'Inter', system-ui, sans-serif",   serif: "'Cormorant Garamond', Georgia, serif", label: "Cormorant · Inter" },
  instrument_manrope: { display: "'Instrument Serif', Georgia, serif",  sans: "'Manrope', system-ui, sans-serif",  serif: "'Instrument Serif', Georgia, serif",  label: "Instrument · Manrope" },
  fraunces_inter:     { display: "'Fraunces', Georgia, serif",           sans: "'Inter', system-ui, sans-serif",   serif: "'Fraunces', Georgia, serif",          label: "Fraunces · Inter" },
  serif_only:         { display: "'Cormorant Garamond', Georgia, serif", sans: "'Cormorant Garamond', Georgia, serif", serif: "'Cormorant Garamond', Georgia, serif", label: "Tout sérif (Cormorant)" },
  sans_only:          { display: "'DM Sans', system-ui, sans-serif",     sans: "'DM Sans', system-ui, sans-serif", serif: "'DM Sans', system-ui, sans-serif",    label: "Tout sans (DM Sans)" },
};

const HEADLINES = {
  decideForMe:  { mode: "default" },
  changez:      { mode: "custom", parts: ["Changez d'esprit,", "changez de vie."] },
  motsmaux:     { mode: "default" },
  retrouvez:    { mode: "custom", parts: ["Retrouvez votre équilibre,", "en toute sécurité."] },
  apaiser:      { mode: "custom", parts: ["Apaiser ce qui pèse.", "Libérer ce qui freine."] },
};

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

  React.useEffect(() => {
    const pal = PALETTES[t.palette] || PALETTES.sauge;
    const c = t.dark ? pal.dark : pal.light;
    const root = document.documentElement;
    root.style.setProperty('--bg', c.bg);
    root.style.setProperty('--bg-2', c.bg2);
    root.style.setProperty('--bg-3', c.bg3);
    root.style.setProperty('--sage', c.sage);
    root.style.setProperty('--sage-3', c.sage3);
    root.style.setProperty('--sage-4', c.sage4);
    root.style.setProperty('--terra', t.customAccent || c.terra);
    root.style.setProperty('--terra-3', c.terra3);

    const f = FONT_PAIRS[t.fontPair] || FONT_PAIRS.fraunces_dm;
    root.style.setProperty('--font-display', f.display);
    root.style.setProperty('--font-sans', f.sans);
    root.style.setProperty('--font-serif', f.serif);

    // Scale & weight & spacing
    document.body.style.fontSize = (16 * t.fontScale / 100) + 'px';
    root.style.setProperty('--heading-weight', t.headingWeight);
    root.style.setProperty('--letter-tracking', (t.letterSpacing / 1000) + 'em');

    // Radii
    root.style.setProperty('--radius', t.radius + 'px');
    root.style.setProperty('--radius-lg', (t.radius * 1.55) + 'px');
    root.style.setProperty('--radius-xl', (t.radius * 2.2) + 'px');
    root.style.setProperty('--radius-sm', Math.max(4, t.radius * 0.55) + 'px');

    // Container
    root.style.setProperty('--maxw', t.containerWidth + 'px');

    document.body.dataset.theme = t.dark ? 'dark' : 'light';
    document.body.dataset.density = t.density;
    document.body.dataset.italics = t.italicAccents ? 'on' : 'off';
    document.body.dataset.nav = t.navStyle;
    document.body.dataset.btnshape = t.buttonShape;
    document.body.dataset.btnstyle = t.buttonStyle;
    document.body.dataset.card = t.cardElevation;
    document.body.dataset.imgfilter = t.imageFilter;
    document.body.dataset.grain = t.grain ? 'on' : 'off';
    document.body.dataset.shadows = t.softShadows ? 'on' : 'off';
    document.body.dataset.ulinks = t.underlineLinks ? 'on' : 'off';
    document.body.dataset.navsticky = t.navSticky ? 'on' : 'off';
  }, [t]);

  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(', ');

    // hero animé en pur CSS — on exclut la section .hero du système IO
    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();
  }, []);

  const Hero = t.hero === 'fullbleed' ? HeroFullbleed
            : t.hero === 'editorial-split' ? HeroEdit
            : HeroEditorial;

  return (
    <>
      <Nav />
      <Hero headlineKey={t.heroHeadline} headlines={HEADLINES} />
      {t.showValuesStrip && <ValuesStrip />}
      <About />
      <Hypnose />
      <Problematiques />
      {t.showBenefits && <Benefits />}
      <Testimonials />
      <Infos />
      <Footer />

      <TweaksPanel title="Tweaks"
        onReset={() => {
          try { localStorage.removeItem('tweaks_values'); } catch (_) {}
          window.location.reload();
        }}>
        <TweakSection label="Palette" />
        <TweakSelect label="Direction" value={t.palette}
          options={Object.entries(PALETTES).map(([v, p]) => ({ value: v, label: p.name }))}
          onChange={(v) => setTweak('palette', v)} />
        <TweakColor label="Accent perso" value={t.customAccent || '#b9603e'}
          onChange={(v) => setTweak('customAccent', v)} />
        <TweakToggle label="Mode sombre" value={t.dark} onChange={(v) => setTweak('dark', v)} />

        <TweakSection label="Typographie" />
        <TweakSelect label="Paire" value={t.fontPair}
          options={Object.entries(FONT_PAIRS).map(([v, p]) => ({ value: v, label: p.label }))}
          onChange={(v) => setTweak('fontPair', v)} />
        <TweakSlider label="Échelle" value={t.fontScale} min={85} max={120} unit="%"
          onChange={(v) => setTweak('fontScale', v)} />
        <TweakSlider label="Graisse titres" value={t.headingWeight} min={300} max={600} step={10}
          onChange={(v) => setTweak('headingWeight', v)} />
        <TweakSlider label="Interlettrage" value={t.letterSpacing} min={-30} max={20}
          onChange={(v) => setTweak('letterSpacing', v)} />
        <TweakToggle label="Italiques colorées" value={t.italicAccents}
          onChange={(v) => setTweak('italicAccents', v)} />

        <TweakSection label="Hero" />
        <TweakSelect label="Mise en page" value={t.hero}
          options={[
            { value: 'editorial', label: 'Éditorial · split' },
            { value: 'fullbleed', label: 'Photo plein cadre' },
            { value: 'editorial-split', label: 'Manifeste centré' },
          ]}
          onChange={(v) => setTweak('hero', v)} />
        <TweakSelect label="Accroche" value={t.heroHeadline}
          options={[
            { value: 'decideForMe', label: 'Au choix du designer' },
            { value: 'changez',     label: '« Changez d\'esprit… »' },
            { value: 'motsmaux',    label: '« Et si les mots… »' },
            { value: 'retrouvez',   label: '« Retrouvez votre équilibre »' },
            { value: 'apaiser',     label: '« Apaiser ce qui pèse »' },
          ]}
          onChange={(v) => setTweak('heroHeadline', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Densité" value={t.density}
          options={['compact', 'regular', 'aere']}
          onChange={(v) => setTweak('density', v)} />
        <TweakSlider label="Rayon coins" value={t.radius} min={0} max={36} unit="px"
          onChange={(v) => setTweak('radius', v)} />
        <TweakSlider label="Largeur conteneur" value={t.containerWidth} min={1080} max={1480} step={20} unit="px"
          onChange={(v) => setTweak('containerWidth', v)} />

        <TweakSection label="Composants" />
        <TweakRadio label="Navigation" value={t.navStyle}
          options={[{value:'classic', label:'Classique'}, {value:'minimal', label:'Minimal'}, {value:'centered', label:'Centrée'}]}
          onChange={(v) => setTweak('navStyle', v)} />
        <TweakToggle label="Nav fixée" value={t.navSticky} onChange={(v) => setTweak('navSticky', v)} />
        <TweakRadio label="Boutons" value={t.buttonShape}
          options={[{value:'pill', label:'Pill'}, {value:'rounded', label:'Arrondi'}, {value:'sharp', label:'Carré'}]}
          onChange={(v) => setTweak('buttonShape', v)} />
        <TweakRadio label="Style" value={t.buttonStyle}
          options={[{value:'filled', label:'Plein'}, {value:'outline', label:'Contour'}, {value:'underline', label:'Souligné'}]}
          onChange={(v) => setTweak('buttonStyle', v)} />
        <TweakSelect label="Cartes" value={t.cardElevation}
          options={[
            {value:'flat', label:'Plates'},
            {value:'bordered', label:'Bordées'},
            {value:'elevated', label:'Surélevées'},
            {value:'inset', label:'Encastrées'},
          ]}
          onChange={(v) => setTweak('cardElevation', v)} />

        <TweakSection label="Images & ambiance" />
        <TweakSelect label="Filtre photos" value={t.imageFilter}
          options={[
            {value:'none', label:'Aucun'},
            {value:'warm', label:'Chaleureux'},
            {value:'desat', label:'Désaturé'},
            {value:'sepia', label:'Sépia léger'},
            {value:'bw', label:'Noir et blanc'},
          ]}
          onChange={(v) => setTweak('imageFilter', v)} />
        <TweakToggle label="Grain papier" value={t.grain} onChange={(v) => setTweak('grain', v)} />
        <TweakToggle label="Ombres douces" value={t.softShadows} onChange={(v) => setTweak('softShadows', v)} />
        <TweakToggle label="Liens soulignés" value={t.underlineLinks} onChange={(v) => setTweak('underlineLinks', v)} />

        <TweakSection label="Sections" />
        <TweakToggle label="Bandeau valeurs" value={t.showValuesStrip} onChange={(v) => setTweak('showValuesStrip', v)} />
        <TweakToggle label="Bloc bénéfices" value={t.showBenefits} onChange={(v) => setTweak('showBenefits', v)} />
      </TweaksPanel>
    </>
  );
}

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