// Shared marketing-site nav and footer for Anthora.ai
// Uses an `active` prop to mark the current page.

const SiteNav = ({ active = "home" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const link = (id, href, label) => (
    <a href={href} aria-current={active === id ? "page" : undefined}>{label}</a>
  );
  return (
    <header className={"site-nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-inner">
        <a href="index.html" className="brand" aria-label="Anthora.ai">
          <span className="wordmark">Anthora<span className="ai">.ai</span></span>
        </a>
        <nav className="nav-links nav-links-even">
          {link("home", "index.html", "Home")}
          {link("products", "products.html", "Products")}
          {link("expertise", "expertise.html", "Expertise & Domains")}
          {link("experts", "for-experts.html", "For Experts")}
          {link("contact", "contact.html", "Contact")}
        </nav>
        <div className="nav-cta">
          <a href="portal.html" className="link-quiet">Log in</a>
          <a href="contact.html" className="btn btn-primary btn-sm">Contact us</a>
        </div>
      </div>
    </header>
  );
};

const SiteFooter = () => (
  <footer className="footer">
    <div className="container">
      <div className="foot-top">
        <div className="foot-brand">
          <span className="wordmark" aria-label="Anthora.ai">Anthora<span className="ai">.ai</span></span>
          <p>Global human expertise for frontier AI.</p>
        </div>
        <div className="foot-cols">
          <div>
            <h5>Product</h5>
            <a href="index.html">Home</a>
            <a href="products.html">Products</a>
            <a href="expertise.html">Expertise &amp; Domains</a>
          </div>
          <div>
            <h5>Network</h5>
            <a href="for-experts.html">For Experts</a>
            <a href="for-experts.html">Become an expert</a>
          </div>
          <div>
            <h5>Legal</h5>
            <a href="privacy.html">Privacy Policy</a>
            <a href="terms.html">Terms of Service</a>
          </div>
          <div>
            <h5>Company</h5>
            <a href="about.html">About us</a>
            <a href="contact.html">Contact</a>
          </div>
        </div>
      </div>
      <div className="foot-bot">
        <span>© 2026 Anthora.ai</span>
      </div>
    </div>
  </footer>
);

const TrustBar = () => (
  <div className="trust-bar">
    <div className="container">
      <span><b style={{color:'var(--ink)', fontWeight:600}}>800,000+</b> experts</span>
      <span className="dot"></span>
      <span><b style={{color:'var(--ink)', fontWeight:600}}>85+</b> countries</span>
      <span className="dot"></span>
      <span>Multi-lingual &amp; cross-cultural capabilities</span>
      <span className="dot"></span>
      <span>Enterprise-grade compliance</span>
    </div>
  </div>
);

// helper for reveal-on-scroll observer + lucide icons; call once per page
function bootPage() {
  const tick = () => { if (window.lucide) window.lucide.createIcons(); };
  setTimeout(tick, 50); setTimeout(tick, 300); setTimeout(tick, 1000);
  setTimeout(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.10, rootMargin: '0px 0px -8% 0px' });
    document.querySelectorAll('.reveal-on-scroll').forEach(el => io.observe(el));
  }, 100);
}

window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;
window.TrustBar = TrustBar;
window.bootPage = bootPage;