/* global React, Nav, Hero, Highlights, Services, About, Gallery, Testimonials, Booking, Contact, Footer, WhatsAppIcon */
const { useState } = React;

function App() {
  const [preselected, setPreselected] = useState(null);

  // Honor URL hash after React mounts
  React.useEffect(() => {
    const id = window.location.hash.slice(1);
    if (!id) return;
    const tick = () => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
    };
    // double rAF so all sections have mounted
    requestAnimationFrame(() => requestAnimationFrame(tick));
  }, []);

  const handleBook = (svc) => {
    setPreselected(svc || null);
    setTimeout(() => {
      const el = document.getElementById('agendamento');
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 60);
  };

  return (
    <div data-screen-label="Refinada Beauty · Site">
      <Nav/>
      <Hero onBook={() => handleBook()}/>
      <Highlights/>
      <Services onBook={handleBook}/>
      <About/>
      <Gallery/>
      <Testimonials/>
      <Booking preselectedService={preselected} onConsumePreselection={() => setPreselected(null)}/>
      <Contact/>
      <Footer/>

      <a className="wa-fab" href="https://wa.me/5582999973643" target="_blank" title="Agendar pelo WhatsApp" aria-label="Agendar pelo WhatsApp">
        <WhatsAppIcon size={28}/>
      </a>
    </div>
  );
}

Object.assign(window, { App });