// Header, Footer, shared chrome
const { useState, useEffect } = React;

function BrandMark() {
  return (
    <div className="brand-mark">
      <img src="images/AMicon.svg" alt="ActiveManage" width="28" height="28" />
    </div>
  );
}

function Logo({ onClick }) {
  return (
    <a href="#/" onClick={onClick} className="brand">
      <BrandMark />
      <span>ActiveManage</span>
    </a>
  );
}

const NAV = [
  { id: "bespoke", label: "Bespoke", href: "#/bespoke" },
  { id: "platform", label: "Platform", href: "#/platform" },
  { id: "pricing", label: "Pricing", href: "#/pricing" },
  { id: "docs", label: "Docs", href: "#/docs" },
  { id: "security", label: "Security", href: "#/security" },
  { id: "about", label: "About", href: "#/about" },
  { id: "faq", label: "FAQ", href: "#/faq" },
];

function Header({ route, onNavigate, theme, onToggleTheme }) {
  const [open, setOpen] = useState(false);

  // Close menu on route change
  useEffect(() => { setOpen(false); }, [route]);

  // Lock body scroll while open
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  const go = (id) => { onNavigate(id); setOpen(false); };

  return (
    <React.Fragment>
      <header className={"site-header" + (open ? " menu-open" : "")}>
        <div className="container">
          <Logo onClick={(e) => { e.preventDefault(); go("home"); }} />
          <nav className="nav-main">
            {NAV.map(n => (
              <a
                key={n.id}
                href={n.href}
                className={route === n.id ? "active" : ""}
                onClick={(e) => { e.preventDefault(); onNavigate(n.id); }}
              >{n.label}</a>
            ))}
          </nav>
          <div className="nav-actions">
            <button
              className="btn btn-ghost"
              onClick={onToggleTheme}
              aria-label="Toggle theme"
              style={{ width: 44, padding: 0, justifyContent: "center" }}
            >
              {theme === "dark" ? (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
              ) : (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
              )}
            </button>
            <a href="https://www.activemanage.co.uk/loginpage.php" className="btn btn-ghost desktop-only">Sign in</a>
            <a href="#/contact" className="btn btn-primary desktop-only" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}>
              Let's chat
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <button
              className="mobile-toggle"
              aria-label={open ? "Close menu" : "Open menu"}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <span className={"hamburger" + (open ? " is-open" : "")} aria-hidden="true">
                <span></span><span></span><span></span>
              </span>
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu — rendered as sibling so backdrop-filter on header doesn't trap fixed positioning */}
      <div className={"mobile-menu" + (open ? " is-open" : "")} role="dialog" aria-modal="true" aria-hidden={!open}>
        <nav className="mobile-menu-nav">
          {NAV.map((n, i) => (
            <a
              key={n.id}
              href={n.href}
              className={route === n.id ? "active" : ""}
              style={{ transitionDelay: open ? `${80 + i * 40}ms` : "0ms" }}
              onClick={(e) => { e.preventDefault(); go(n.id); }}
            >
              <span className="mono num">{String(i + 1).padStart(2, "0")}</span>
              <span className="label">{n.label}</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          ))}
        </nav>
        <div className="mobile-menu-actions">
          <a href="https://www.activemanage.co.uk/loginpage.php" className="btn btn-ghost" onClick={() => setOpen(false)}>Sign in</a>
          <a href="#/contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); go("contact"); }}>
            Let's chat
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
        <div className="mobile-menu-foot mono">© 2024 ActiveManage Ltd.</div>
      </div>
    </React.Fragment>
  );
}

function Footer({ onNavigate }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo onClick={(e) => { e.preventDefault(); onNavigate("home"); }} />
            <p className="body" style={{ marginTop: 16, maxWidth: 320, fontSize: 14 }}>
              The web-based software development platform trusted by NHS trusts, retailers and ambitious businesses across the UK.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#/platform" onClick={(e) => { e.preventDefault(); onNavigate("platform"); }}>Platform</a></li>
              <li><a href="#/bespoke" onClick={(e) => { e.preventDefault(); onNavigate("bespoke"); }}>Bespoke development</a></li>
              <li><a href="#/pricing" onClick={(e) => { e.preventDefault(); onNavigate("pricing"); }}>Pricing &amp; fit</a></li>
              <li><a href="#/docs" onClick={(e) => { e.preventDefault(); onNavigate("docs"); }}>Documentation</a></li>
              <li><a href="#/security" onClick={(e) => { e.preventDefault(); onNavigate("security"); }}>Security &amp; compliance</a></li>
              <li><a href="#/platform" onClick={(e) => { e.preventDefault(); onNavigate("platform"); }}>Join waitlist</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#/about" onClick={(e) => { e.preventDefault(); onNavigate("about"); }}>Who we are</a></li>
              <li><a href="#/faq" onClick={(e) => { e.preventDefault(); onNavigate("faq"); }}>FAQ</a></li>
              <li><a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Privacy</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Terms</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Cookie policy</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>GDPR</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2024 ActiveManage Ltd. — Registered in England & Wales</span>
          <div className="footer-certs">
            <span className="cert">Crown Commercial Supplier</span>
            <span className="cert">Cyber Essentials</span>
            <span className="cert">ICO Registered</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, BrandMark, Logo, NAV });