// Production site entry — responsive, no device frame / stage / tweaks chrome.
// Switches between mobile and desktop layouts based on viewport width.

const Landing = ({ device }) => {
  const formRef = React.useRef(null);

  const scrollToForm = () => {
    if (formRef.current) {
      const top = formRef.current.getBoundingClientRect().top;
      window.scrollTo({ top: window.scrollY + top - 16, behavior: 'smooth' });
    }
  };

  return (
    <div className={`lp ${device === 'desktop' ? 'lp-desktop' : 'lp-mobile'}`}>
      <TopNav onCta={scrollToForm} />
      <Hero onCta={scrollToForm} />
      <Problem />
      <Solution />
      <Emigrants />
      <Process />
      <Trust />
      <Cases />
      <Testimonials />
      <Offer onCta={scrollToForm} showPrice={true} />

      <section className="form pad-x pad-y" ref={formRef}>
        <div className="sec-head">
          <span className="eyebrow">Marcar avaliação</span>
          <h2>Comece <em>aqui</em>.</h2>
          <p>Preencha o formulário e a nossa coordenadora liga-lhe em menos de 24h.</p>
        </div>
        <LeadForm extended={false} />
      </section>

      <FAQ />
      <FinalCTA onCta={scrollToForm} />
      <Footer />
      <StickyCTA onCta={scrollToForm} />
    </div>
  );
};

const useResponsiveDevice = () => {
  const getDevice = () => (window.innerWidth >= 900 ? 'desktop' : 'iphone');
  const [device, setDevice] = React.useState(getDevice);
  React.useEffect(() => {
    let raf = null;
    const onResize = () => {
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setDevice(getDevice()));
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return device;
};

const SiteApp = () => {
  const device = useResponsiveDevice();
  return <Landing device={device} />;
};

document.body.style.margin = '0';
document.body.style.background = 'var(--bg)';
ReactDOM.createRoot(document.getElementById('root')).render(<SiteApp />);