// pns-app.jsx — Main App assembly + scroll animations
const { useEffect } = React;
const {
  PNSNav, PNSHero, PNSServices,
  PNSAbout, PNSWhyChooseUs, PNSStats,
  PNSPortfolio, PNSTeam, PNSTestimonials,
  PNSPricing, PNSContact, PNSFooter,
} = window;

function PNSApp() {
  useEffect(() => {
    // Scroll-reveal observer
    const timer = setTimeout(() => { // small delay lets React finish mounting
      const observer = new IntersectionObserver(
        (entries) => entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('visible');
            observer.unobserve(e.target);
          }
        }),
        { threshold: 0.12, rootMargin: '0px 0px -50px 0px' }
      );
      document.querySelectorAll('.pns-fade-up, .pns-slide-left, .pns-slide-right, .pns-zoom-in').forEach(el => observer.observe(el));
      return () => observer.disconnect();
    }, 250);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    // CTA click handler: smooth-scroll to #contact and focus first visible input
    const handleCTA = (ev) => {
      const link = ev.target.closest('a');
      if (!link) return;
      const href = (link.getAttribute('href') || '').trim();
      if (href !== '#contact') return;          // only intercept same-page anchors
      ev.preventDefault();
      const section = document.getElementById('contact');
      if (!section) return;
      const top = section.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
      setTimeout(() => {
        const first = document.getElementById('pns-firstName');
        if (first) first.focus({ preventScroll: true });
      }, 750);
    };
    document.addEventListener('click', handleCTA);
    return () => document.removeEventListener('click', handleCTA);
  }, []);

  return (
    <div style={{ overflowX: 'hidden' }}>
      {[PNSNav, PNSHero, PNSServices, PNSAbout, PNSWhyChooseUs, PNSStats,
        PNSPortfolio, PNSTeam, PNSTestimonials, PNSPricing, PNSContact, PNSFooter]
        .map((C, i) => typeof C === 'function' ? <C key={i} /> : null)}
    </div>
  );
}

(function mountPNSApp() {
  const needed = { PNSNav, PNSHero, PNSServices, PNSAbout, PNSWhyChooseUs, PNSStats, PNSPortfolio, PNSTeam, PNSTestimonials, PNSPricing, PNSContact, PNSFooter };
  const missing = Object.keys(needed).filter(k => typeof needed[k] !== 'function');
  const el = document.getElementById('app');
  if (!el) { console.error('[PNS] mount node #app not found'); return; }
  if (missing.length) { console.error('[PNS] missing components (a .jsx file failed to load):', missing.join(', ')); }
  try {
    ReactDOM.createRoot(el).render(<PNSApp />);
  } catch (err) {
    console.error('[PNS] render failed:', err);
  }
})();