const { SiteHeader, SiteFooter } = window.ECPSDesignSystem_a74b4a;

const LINKS = [
  { label: 'Problem', href: '#problem' },
  { label: 'Automation', href: '#tiers' },
  { label: 'System', href: '#system' },
  { label: 'Legal', href: '#legal' },
  { label: 'How it works', href: '#pipeline' },
];

function Site() {
  const [active, setActive] = React.useState('#top');

  React.useEffect(() => {
    const ids = ['#top', ...LINKS.map(l => l.href), '#why', '#pilot'];
    const reveal = (el) => { el.style.opacity = 1; el.style.transform = 'none'; };
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { setActive('#' + e.target.id); reveal(e.target); obs.unobserve(e.target); }
      });
    }, { threshold: .15 });
    const els = ids.map(id => document.querySelector(id)).filter(Boolean);
    els.forEach(el => obs.observe(el));
    // Sections scrolled past (anchor nav, deep link, fast scroll) never intersect — reveal them anyway.
    const sweep = () => els.forEach(el => { if (el.getBoundingClientRect().top < window.innerHeight) { reveal(el); obs.unobserve(el); } });
    window.addEventListener('scroll', sweep, { passive: true });
    sweep();
    return () => { obs.disconnect(); window.removeEventListener('scroll', sweep); };
  }, []);

  const navigate = (href) => {
    const el = document.querySelector(href);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: 'smooth' });
  };

  return (
    <div style={{ background: 'var(--ecps-shell)' }}>
      <SiteHeader links={LINKS} activeSection={active} onNavigate={navigate} />
      <Hero onNavigate={navigate} />
      <Problem />
      <Tiers />
      <System />
      <Legal />
      <Pipeline />
      <Stats />
      <Briefing />
      <SiteFooter note="Environmental & Cultural-Site Protection System. A pilot framework prepared for government and conservation-authority review. Not yet deployed." />
    </div>
  );
}
Object.assign(window, { Site });