// Shared cross-page navigation + detail-page hero header.
// Used by the punchy index AND the Platform / BI / Integration detail pages.
function SiteNav({ current, solid }) {
  const [scrolled, setScrolled] = React.useState(!!solid);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (solid) { setScrolled(true); return; }
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [solid]);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const links = [
    ['platform', 'Platform', 'Platform.html'],
    ['bi', 'Intelligence', 'BI-Reporting.html'],
    ['integration', 'Integration', 'Integration.html'],
  ];

  const bookDemo = (e) => {
    setOpen(false);
    const el = document.getElementById('contact');
    if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth' }); }
    // else: let the href navigate to a page that has #contact
  };

  return (
    <nav className={`nav-shell ${scrolled ? 'scrolled' : ''} ${solid ? 'is-solid' : ''} ${open ? 'menu-open' : ''}`}>
      <a className="logo" href="index.html">
        <span className="mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <rect x="2" y="2" width="9" height="9" rx="1.5" fill="#ee4c16"/>
            <rect x="3.3" y="6.6" width="1.6" height="2.6" rx="0.4" fill="rgba(255,255,255,0.6)"/>
            <rect x="5.7" y="5.2" width="1.6" height="4" rx="0.4" fill="rgba(255,255,255,0.6)"/>
            <rect x="8.1" y="3.8" width="1.6" height="5.4" rx="0.4" fill="#141210"/>
            <rect x="13" y="2" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
            <rect x="15" y="4" width="2.2" height="2.2" rx="0.4" fill="currentColor" opacity="0.3"/>
            <rect x="18" y="4" width="2.2" height="2.2" rx="0.4" fill="currentColor" opacity="0.3"/>
            <rect x="15" y="7" width="2.2" height="2.2" rx="0.4" fill="#ee4c16"/>
            <rect x="2" y="13" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
            <rect x="4" y="15" width="2.2" height="2.2" rx="0.4" fill="currentColor" opacity="0.3"/>
            <rect x="4" y="18" width="2.2" height="2.2" rx="0.4" fill="currentColor" opacity="0.3"/>
            <rect x="13" y="13" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
          </svg>
        </span>
        <span className="wm">simple<span className="o">.</span><span className="sp">space</span></span>
      </a>

      <ul className="nav-links">
        <li className="nav-home-li"><a href="index.html" className={`nav-home-text ${current === 'home' ? 'current' : ''}`}>SIMPLE.SPACE</a></li>
        {links.map(([id, label, href]) => (
          <li key={id}><a href={href} className={current === id ? 'current' : ''}>{label}</a></li>
        ))}
      </ul>

      <div className="nav-right">
        <button className="nav-burger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
                onClick={() => setOpen(o => !o)}>
          <span/><span/><span/>
        </button>
      </div>

      <div className={`nav-mobile ${open ? 'show' : ''}`}>
        <ul>
          <li><a href="index.html" className={current === 'home' ? 'current' : ''}>Home</a></li>
          {links.map(([id, label, href]) => (
            <li key={id}><a href={href} className={current === id ? 'current' : ''}>{id === 'bi' ? 'Business Intelligence' : label}</a></li>
          ))}
          <li><a href="Platform.html#contact" onClick={bookDemo}>Contact Us</a></li>
        </ul>
        <a href="Platform.html#contact" className="btn btn-orange nav-mobile-cta" onClick={bookDemo}>Make an Enquiry</a>
      </div>
    </nav>
  );
}

// Detail-page header — gives nav clearance + sets the page's premise.
function PageHero({ eyebrow, title, sub }) {
  return (
    <header className="page-hero">
      <div className="wrap">
        <a className="back" href="index.html">← Back to overview</a>
        <div className="eyebrow" style={{ marginTop: 22 }}><span className="line"/><span>{eyebrow}</span></div>
        <h1>{title}</h1>
        {sub && <p>{sub}</p>}
      </div>
    </header>
  );
}

window.SiteNav = SiteNav;
window.PageHero = PageHero;

// React renders after load, so native #hash jumps miss their target.
// Retry-scroll to the hash element once it exists (e.g. Platform.html#contact).
(function () {
  if (!location.hash) return;
  const id = location.hash.slice(1);
  let tries = 0;
  const tick = setInterval(() => {
    const el = document.getElementById(id);
    tries++;
    if (el) {
      clearInterval(tick);
      const jump = () => {
        const y = el.getBoundingClientRect().top + window.scrollY - 72;
        window.scrollTo({ top: y, behavior: 'auto' });
      };
      jump();
      // re-assert after late layout shifts (images, fonts, ambient svg)
      setTimeout(jump, 350);
      setTimeout(jump, 900);
    } else if (tries > 100) { clearInterval(tick); }
  }, 100);
})();