/* global React */
const { useEffect: useEx } = React;

const RevealOnScroll = () => {
  useEx(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
  return null;
};

const WhatsappFloat = () => (
  <a href="https://wa.me/5491173743813?text=Hola!%20Quiero%20info%20sobre%20Oppai%20Atelier"
     target="_blank" rel="noopener"
     aria-label="WhatsApp"
     style={{
       position: 'fixed', bottom: 24, right: 24, zIndex: 900,
       width: 64, height: 64, borderRadius: '50%',
       background: '#25D366', color: '#fff',
       display: 'grid', placeItems: 'center',
       textDecoration: 'none',
       boxShadow: '0 14px 40px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5)',
       animation: 'waPulse 2s ease-out infinite',
       transition: 'transform .25s ease',
     }}
     onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.08)'}
     onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
    <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff">
      <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/>
    </svg>
  </a>
);

const App = () => (
  <>
    <RevealOnScroll/>
    <Nav/>
    <Hero/>
    <ServicesMarquee/>
    <Services/>
    <CosplaysFeature/>
    <FiguraFeature/>
    <Gallery/>
    <Process/>
    <Materials/>
    <Stats/>
    <Audience/>
    <Shipping/>
    <FinalCTA/>
    <Footer/>
    <WhatsappFloat/>
  </>
);

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