/* CỘI — shared scaffolding for sub-pages (Page wrapper + small UI primitives) */

const { useState: usePage, useEffect: useEffectPage } = React;
const { Nav: _Nav } = window.SonSections1;
const { Footer: _Footer } = window.SonSections3;

function Page({ children, navDefaultDark = false, cartCount = 0 }) {
  const [scrolled, setScrolled] = usePage(false);
  const [overDark, setOverDark] = usePage(navDefaultDark);

  useEffectPage(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 48);
      const navMidY = 24;
      let isDark = false;
      document.querySelectorAll('.section.dark, .vab, .footer, .hero, .pillars, .product-feature, .founder-note, .page-hero.dark, .form-section.dark')
        .forEach(el => {
          const r = el.getBoundingClientRect();
          if (r.top <= navMidY + 32 && r.bottom > navMidY + 32) isDark = true;
        });
      setOverDark(isDark);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

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

  return (
    <div>
      <_Nav scrolled={scrolled} overDark={overDark} cartCount={cartCount} />
      {children}
      <_Footer />
    </div>
  );
}

// ============================== PAGE HERO (small reusable)
function PageHero({ eyebrow, title, sub, num, bg, dark = true, children }) {
  return (
    <section className={`page-hero ${dark ? 'dark' : ''}`} data-screen-label="Page Hero" style={bg ? { backgroundImage: `linear-gradient(180deg, rgba(20,17,13,0.7), rgba(20,17,13,0.85)), url(${bg})` } : {}}>
      <div className="container">
        <div className="page-hero-grid reveal">
          <div>
            <div className="eyebrow gold" style={{ color: dark ? 'var(--gold-2)' : 'var(--gold)' }}>
              {num && <>/ {num} — </>}{eyebrow}
            </div>
            <h1 className="page-hero-title">{title}</h1>
            {sub && <p className="page-hero-sub">{sub}</p>}
          </div>
          {children && <div className="page-hero-side">{children}</div>}
        </div>
      </div>
    </section>
  );
}

window.SonPage = { Page, PageHero };