// App.jsx — Application principale, defaults depuis SITE_CONTENT

const _app = (window.SITE_CONTENT && window.SITE_CONTENT.app) || {};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": _app.heroVariant  || "photo",
  "density":     _app.density      || "regular",
  "cardStyle":   _app.cardStyle    || "editorial",
  "useScript":   _app.useScript    !== undefined ? _app.useScript : true,
  "accentMode":  _app.accentMode   || "ds",
  "dark":        _app.dark         || false,
  "witty":       _app.witty        !== undefined ? _app.witty : true,
  "showTweaks":  _app.showTweaks   || false
}/*EDITMODE-END*/;

function NosterraApp() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');

  const go = (p) => {
    setPage(p);
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: 'smooth' }));
  };

  // bridge — footer & other detached components can request navigation
  React.useEffect(() => {
    const handler = (e) => go(e.detail);
    window.addEventListener('ntr-go', handler);
    return () => window.removeEventListener('ntr-go', handler);
  }, []);

  // Couleurs d'accent
  const accent     = t.accentMode === 'brief' ? '#B8673A' : '#C8754C';
  const accentDeep = t.accentMode === 'brief' ? '#8C4A24' : '#A85C37';
  const accentSoft = t.accentMode === 'brief' ? '#D4906A' : '#E6A785';

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--brique', accent);
    r.style.setProperty('--brique-deep', accentDeep);
    r.style.setProperty('--brique-soft', accentSoft);
  }, [accent, accentDeep, accentSoft]);

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.ntr-reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach((e) => e.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, [page]);

  const dense = t.density === 'dense';
  const airy  = t.density === 'airy';

  const cls = ['ntr-app', t.dark ? 'is-dark' : '', dense ? 'is-dense' : '', airy ? 'is-airy' : ''].filter(Boolean).join(' ');

  return (
    <div className={cls} data-screen-label={page}>
      <window.Nav page={page} setPage={go} dark={t.dark} dense={dense}/>

      {page === 'home' && <>
        <window.Hero variant={t.heroVariant} script={t.useScript} witty={t.witty}
          onCTA={() => go('estimation')} onSecondary={() => go('biens')}/>
        <div className="ntr-reveal"><window.Presentation witty={t.witty} onCTA={() => go('contact')}/></div>
        <div className="ntr-reveal"><window.VideoSection witty={t.witty}/></div>
        <div className="ntr-reveal"><window.Services witty={t.witty} onCTA={() => go('contact')}/></div>
        <div className="ntr-reveal"><window.Expertise witty={t.witty}/></div>
        <div className="ntr-reveal"><window.Process witty={t.witty} onCTA={() => go('contact')}/></div>
        <div className="ntr-reveal"><window.Testimonials/></div>
        <div className="ntr-reveal"><window.Contact witty={t.witty}/></div>
      </>}

      {page === 'services' && <>
        <window.ServicesPage witty={t.witty} onCTA={() => go('contact')}/>
        <div className="ntr-reveal"><window.Process witty={t.witty} onCTA={() => go('contact')}/></div>
      </>}

      {page === 'biens' && <>
        <window.Listings cardStyle={t.cardStyle} onOpen={() => {}}/>
      </>}

      {page === 'estimation' && <window.Estimation witty={t.witty}/>}

      {page === 'agence' && <>
        <window.PresentationAgence witty={t.witty} onCTA={() => go('contact')}/>
        <div className="ntr-reveal"><window.MaximeAgence onCTA={() => go('contact')}/></div>
        <div className="ntr-reveal"><window.ValeursAgence/></div>
      </>}

      {page === 'contact' && <window.Contact witty={t.witty}/>}

      {page === 'legal' && <window.Legal/>}

      {page === 'honoraires' && <window.Honoraires/>}

      <window.Footer/>

      {t.showTweaks && (
        <window.TweaksPanel title="Tweaks · NOSTERRA">
          <window.TweakSection label="Hero"/>
          <window.TweakRadio label="Traitement" value={t.heroVariant}
            options={[
              {value:'photo',label:'Photo'},
              {value:'split',label:'Split'},
              {value:'type',label:'Typo'},
            ]}
            onChange={(v) => { setTweak('heroVariant', v); go('home'); }}/>

          <window.TweakSection label="Mise en page"/>
          <window.TweakRadio label="Densité" value={t.density}
            options={[
              {value:'dense',label:'Dense'},
              {value:'regular',label:'Standard'},
              {value:'airy',label:'Aéré'},
            ]}
            onChange={(v) => setTweak('density', v)}/>

          <window.TweakSection label="Listings"/>
          <window.TweakRadio label="Style des cartes" value={t.cardStyle}
            options={[
              {value:'editorial',label:'Éditorial'},
              {value:'catalog',label:'Catalogue'},
            ]}
            onChange={(v) => setTweak('cardStyle', v)}/>

          <window.TweakSection label="Couleur"/>
          <window.TweakRadio label="Accent" value={t.accentMode}
            options={[
              {value:'ds',label:'DS · #C8754C'},
              {value:'brief',label:'Brief · #B8673A'},
            ]}
            onChange={(v) => setTweak('accentMode', v)}/>
          <window.TweakToggle label="Mode sombre" value={t.dark}
            onChange={(v) => setTweak('dark', v)}/>

          <window.TweakSection label="Voix"/>
          <window.TweakToggle label="Ton décalé (humour)" value={t.witty}
            onChange={(v) => setTweak('witty', v)}/>
          <window.TweakToggle label="Touche manuscrite (Allura)" value={t.useScript}
            onChange={(v) => setTweak('useScript', v)}/>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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