const { useEffect: useEffectA } = React;

function Marquee() {
  const items = [
    'CUISINISTES', '◆', 'RÉNOVATIONS IMMOBILIÈRES', '◆', "ARCHITECTES / DÉCORATEURS D'INTÉRIEURS", '◆',
    'PAYSAGISTES', '◆', 'PISCINISTES', '◆', 'ÉLECTRICIENS & PLOMBIERS',
  ];
  return (
    <div className="marquee-wrap">
<div className="marquee-headline">
        <svg className="marquee-quote-mark marquee-quote-open" width="36" height="28" viewBox="0 0 32 24" fill="none" aria-hidden="true">
          <path d="M0 24V14C0 6 4 1 12 0V5C8 6 6 9 6 14H12V24H0ZM20 24V14C20 6 24 1 32 0V5C28 6 26 9 26 14H32V24H20Z" fill="var(--terra)" fillOpacity="0.85"/>
        </svg>
        <span className="marquee-headline-text">Concentrez-vous sur votre coeur de métier et passez à l'entreprise agentique.</span>
        <svg className="marquee-quote-mark marquee-quote-close" width="36" height="28" viewBox="0 0 32 24" fill="none" aria-hidden="true">
          <path d="M0 24V14C0 6 4 1 12 0V5C8 6 6 9 6 14H12V24H0ZM20 24V14C20 6 24 1 32 0V5C28 6 26 9 26 14H32V24H20Z" fill="var(--terra)" fillOpacity="0.85"/>
        </svg>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {[...items, ...items, ...items].map((t, i) => (
            t === '◆' ? <span key={i} className="sep"></span> : <span key={i}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function RevealObserver() {
  useEffectA(() => {
    document.documentElement.classList.add('js-reveal');
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
    );
    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return null;
}

function App() {
  return (
    <>
      <div className="ambient"></div>
      <div className="glass-pane"></div>
      <div className="grain"></div>
      <RevealObserver />
      <Nav />
      <Hero />
      <div className="glass-zone">
        <div className="glass-zone-glow glass-zone-glow-1" aria-hidden="true" />
        <div className="glass-zone-glow glass-zone-glow-2" aria-hidden="true" />
        <div className="glass-zone-glow glass-zone-glow-3" aria-hidden="true" />
        <Marquee />
        <Comparison />
        <Timeline14 />
        <Benefits />
        <FinalCTA />
      </div>
      <FAQ />
      <Footer />
      <Tweaks />
    </>
  );
}

function __mountApp() {
  const el = document.getElementById('root');
  if (!el) { requestAnimationFrame(__mountApp); return; }
  ReactDOM.createRoot(el).render(<App />);
}
__mountApp();