const { SiteHeader, SiteFooter, WhatsAppFab } = window.GabrielaLucasDesignSystem_113a84;

const LINKS = [
  { href: '#jornada', label: 'Jornada' },
  { href: '#sobre', label: 'Sobre' },
  { href: '#como', label: 'Como funciona' },
  { href: '#contato', label: 'Contato' },
];

function Landing() {
  /* Nothing is highlighted at the top of the page: the hero is not a nav destination, so
     starting on '#jornada' would mark a section the visitor has not reached. #topo is
     observed but matches no link, which is what clears the bar. */
  const [active, setActive] = React.useState('');
  React.useEffect(() => {
    const obs = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) setActive('#' + e.target.id); });
    }, { rootMargin: '-45% 0px -50% 0px' });
    ['#topo', ...LINKS.map((l) => l.href)].forEach((href) => {
      const el = document.querySelector(href); if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <SiteHeader logo="logo_green.webp" links={LINKS} active={active}
        cta={{ label: 'WhatsApp', href: window.WA }} />
      <main>
        <HeroSection />
        <Manifesto />
        <AnatomySection />
        <ServicesSection />
        <JourneySection />
        <AboutSection />
        <QuoteBand />
        <HowSection />
        <ReviewsSection />
        <ContactSection />
      </main>
      <SiteFooter logo="logo_green.webp"
        note="Fisioterapia pélvica e obstétrica em São Caetano do Sul. Atendimento especializado, humanizado e cientificamente embasado, para todas as fases da vida."
        links={[
          { href: window.WA, label: 'WhatsApp' },
          { href: 'https://www.instagram.com/dra.gabilucas', label: 'Instagram' },
          { href: 'tel:+5511962921540', label: 'Telefone' },
          { href: '#topo', label: 'Voltar ao topo' },
        ]}
        legal="© 2026 Gabriela Lucas, Fisioterapia Pélvica e Obstetrícia. Todos os direitos reservados."
        disclaimer="Peça conceitual. As fotografias são registros reais da profissional; o modelo tridimensional do assoalho pélvico é uma representação esquemática feita em código, não é imagem médica nem foto de paciente." />
      <WhatsAppFab href={window.WA} />
    </>
  );
}

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