// Shared.jsx — logo + nav + footer shared across concepts

const Logo = ({ size = 28, color = "currentColor", className = "" }) => (
  <span
    className={className}
    style={{
      display: "inline-block",
      width: size,
      height: size,
      flexShrink: 0,
      backgroundColor: color,
      WebkitMaskImage: "url(assets/logo-autoscience.png)",
      maskImage: "url(assets/logo-autoscience.png)",
      WebkitMaskSize: "contain",
      maskSize: "contain",
      WebkitMaskRepeat: "no-repeat",
      maskRepeat: "no-repeat",
      WebkitMaskPosition: "center",
      maskPosition: "center",
    }}
    aria-label="Autoscience"
    role="img"
  />
);

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const cls = "site-nav" + (scrolled ? " site-nav--scrolled" : "");
  return (
    <React.Fragment>
      <header className={cls}>
        <a href="/" className="site-nav__brand" onClick={() => setOpen(false)}>
          <img src="/assets/logo-autoscience.png" alt="Autoscience" className="site-nav__logo" />
          <span className="site-nav__wm">AUTOSCIENCE</span>
        </a>
        <div className={"site-nav__links" + (open ? " site-nav__links--open" : "")}>
          <a className="site-nav__link" href="/mira" onClick={() => setOpen(false)}>Mira</a>
          <a className="site-nav__link" href="/carl" onClick={() => setOpen(false)}>Carl</a>
          <a className="site-nav__link" href="/blog" onClick={() => setOpen(false)}>Blog</a>
          <a className="site-nav__link" href="/careers" onClick={() => setOpen(false)}>Careers</a>
          <a className="site-nav__mobile-cta" href="/get-started" onClick={() => setOpen(false)}>Get started</a>
        </div>
        <a className="site-nav__cta" href="/get-started">Get started</a>
        <button
          type="button"
          className="site-nav__mobile-btn"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </header>
      <hr className="site-nav__hairline" />
    </React.Fragment>
  );
};

const Footer = () => {
  return (
    <footer className="m-foot m-foot--v2">
      <div className="m-foot__grid">
        <a href="/" className="m-foot__brand">
          <div className="m-foot__brand-row">
            <Logo size={40} color="#F7F7ED" />
            <span className="m-foot__brand-word" style={{fontFamily:'"Crimson Text"'}}>Autoscience</span>
          </div>
          <p className="m-foot__desc">
            Superhuman ML research, automated.
          </p>
        </a>
        <div className="m-foot__col">
          <div className="m-foot__h">Product</div>
          <a href="/mira">Mira</a>
          <a href="/carl">Carl</a>
          <a href="/get-started">Get started</a>
        </div>
        <div className="m-foot__col">
          <div className="m-foot__h">Company</div>
          <a href="/blog">Blog</a>
          <a href="/careers">Careers</a>
        </div>
      </div>
      <div className="m-foot__bot">
        <div>© 2026 Autoscience Inc.</div>
        <div className="m-foot__social">
          <a href="https://x.com/AutoScienceAI" target="_blank" rel="noopener noreferrer" aria-label="X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
          <a href="https://www.linkedin.com/company/autoscienceai/posts/?feedView=all" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg></a>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Logo, Nav, Footer });