// js/app.jsx — Site Equilys (version production)

const TWEAKS = {
  palette: "ardoise",
  typoSet: "editorial",
  density: "aere",
  heroVariant: "enso",
  methodVariant: "circular",
  heroLogoSize: 650,
  heroLogoSpin: 60,
  motifOpacity: 0.35,
  motifScale: 1,
  smokeDHero: -80,
  smokeDContact: -90,
  smokeMHero: -50,
  smokeMContact: -50,
  fxBtn: true,
  fxCard: true,
  fxLink: true
};

function FullDesktopSite({ heroVariant, methodVariant, heroLogoSize }) {
  const Hero = heroVariant === 'editorial' ? HeroEditorial
             : heroVariant === 'manifesto' ? HeroManifesto
             : HeroEnso;
  const Method = methodVariant === 'circular' ? MethodCircular
               : methodVariant === 'vertical' ? MethodVertical
               : MethodNarrative;
  return (
    <>
      <NavBar />
      <Hero logoSize={heroLogoSize} />
      <PresentationSection />
      <Method />
      <OffersSection />
      <ProofSection />
      <ContactSection />
      <Footer />
    </>
  );
}

function FullMobileSite() {
  return (
    <>
      <MobileNav />
      <MobileHero />
      <MobilePresentation />
      <MobileMethod />
      <MobileOffers />
      <MobileProof />
      <MobileContact />
      <MobileFooter />
    </>
  );
}

function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(
    () => window.innerWidth < 820
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 819px)');
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return isMobile;
}

function App() {
  const t = TWEAKS;
  const isMobile = useIsMobile();
  const themeProps = {
    palette: t.palette, typo: t.typoSet, density: t.density,
    motifOpacity: t.motifOpacity, motifScale: t.motifScale,
    smokeDHero: t.smokeDHero, smokeDContact: t.smokeDContact,
    smokeMHero: t.smokeMHero, smokeMContact: t.smokeMContact,
    fxBtn: t.fxBtn, fxCard: t.fxCard, fxLink: t.fxLink,
    heroLogoSpin: t.heroLogoSpin
  };

  return (
    <ThemeFrame {...themeProps} fullBleed>
      {isMobile
        ? <FullMobileSite />
        : <FullDesktopSite
            heroVariant={t.heroVariant}
            methodVariant={t.methodVariant}
            heroLogoSize={t.heroLogoSize}
          />
      }
    </ThemeFrame>
  );
}

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