const FRESHA_URL = 'https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking';
const WHATSAPP_URL = 'https://wa.me/971563690151?text=Hi%20HAYRE%2C%20I%27d%20like%20to%20book%20an%20appointment.';
const { WhatsAppIcon } = window.HayreIcons;

const App = () => {
  const [active, setActive] = React.useState('home');
  const [pastHero, setPastHero] = React.useState(false);

  React.useEffect(() => {
    const sections = ['home', 'experience', 'services', 'stylists', 'about', 'contact', 'cta'];
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.4;
      let cur = 'home';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      const map = { home: 'home', experience: 'studio', services: 'services', stylists: 'studio', about: 'about', contact: 'contact', cta: 'contact' };
      setActive(map[cur] || 'home');

      const hero = document.getElementById('home');
      const threshold = hero ? hero.offsetHeight - 120 : window.innerHeight * 0.85;
      setPastHero(window.scrollY > threshold);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleNav = (id) => {
    if (id === 'services') { window.location.href = 'services.html'; return; }
    const map = { home: 'home', studio: 'stylists', about: 'about', contact: 'contact' };
    const target = document.getElementById(map[id] || id);
    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="shell-top">
      <Navbar active={active} onNav={handleNav} />
      <FlyingLogo />
      <main>
        <Hero />
        <Experience />
        <Services />
        <Stylists />
        <About />
        <Contact />
        <CTA />
        <Footer />
      </main>
      <div className={'mobile-cta' + (pastHero ? ' is-visible' : '')}>
        <a href={FRESHA_URL} target="_blank" rel="noopener noreferrer">Book Appointment</a>
      </div>
      <a
        href={WHATSAPP_URL}
        target="_blank"
        rel="noopener noreferrer"
        className={'whatsapp-float' + (pastHero ? ' is-visible' : '')}
        aria-label="Chat on WhatsApp"
      >
        <WhatsAppIcon />
        <span>WhatsApp</span>
      </a>
    </div>
  );
};

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