/* SetOne Labs — site Header, Footer, mobile menu */
const NS = window.SetOneLabsDesignSystem_88261c;
const LOGOS = window.SETONE_LOGOS || {};
/* Base-independent logo (inlined data URI) — same markup as the DS Logo component. */
function SLogo({ variant = 'lockup', height = 30, alt = 'SetOne Labs' }) {
  return <img className="so-logo" src={LOGOS[variant]} alt={alt} style={{ height: height + 'px', width: 'auto', display: 'block' }} />;
}
const NAV = [
  ['Offering', '#offering'],
  ['Approach', '#approach'],
  ['Capabilities', '#capabilities'],
  ['Team', '#team'],
  ['Contact', '#contact'],
];

function Header({ onBurger }) {
  const { Logo, Button, IconButton } = NS;
  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);
  }, []);
  return (
    <header className={`hdr${scrolled ? ' hdr--scrolled' : ''}`}>
      <div className="container hdr__in">
        <nav className="hdr__nav">
          <a href="#top" aria-label="SetOne Labs home"><SLogo variant="lockup" height={30} /></a>
          <ul className="hdr__links">
            {NAV.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}
          </ul>
        </nav>
        <div className="hdr__actions">
          <a className="ghost-link" href="#contact" style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-brand)', whiteSpace: 'nowrap' }}>Book an intro call</a>
          <Button variant="primary" size="sm" iconRight="arrow-right" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>Request a proposal</Button>
          <span className="hdr__burger"><IconButton icon="menu" label="Menu" variant="outline" onClick={onBurger} /></span>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  const { Button } = NS;
  return (
    <div className={`mmenu${open ? ' open' : ''}`}>
      {NAV.map(([label, href]) => <a key={label} href={href} onClick={onClose}>{label}</a>)}
      <div style={{ marginTop: 'var(--space-4)' }}><Button variant="accent" fullWidth onClick={onClose}>Request a proposal</Button></div>
    </div>
  );
}

function Footer() {
  const { Logo } = NS;
  const cols = [
    ['Offering', ['Financial modeling', 'Valuation', 'Fundraising', 'Investor materials', 'Market research', 'Transaction support']],
    ['Firm', ['Approach', 'Capabilities', 'Team', 'Contact']],
    ['Resources', ['Capabilities overview', 'Investor deck', 'Confidentiality', 'Privacy']],
  ];
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr__top">
          <div>
            <SLogo variant="lockup-white" height={28} />
            <p className="ftr__blurb">Analyst-level execution with principal-level judgment. A two-person team that works as an extension of your staff across modeling, valuation, fundraising, research, and transactions.</p>
          </div>
          {cols.map(([title, links]) => (
            <div key={title}>
              <h5>{title}</h5>
              <ul>{links.map((l) => <li key={l}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="ftr__bottom">
          <span>© 2026 SetOne Labs. All rights reserved.</span>
          <span className="ftr__motif">SYSTEMS · DATA · PRECISION · MODULARITY · INNOVATION</span>
        </div>
      </div>
    </footer>
  );
}

window.SO_SITE = window.SO_SITE || {};
Object.assign(window.SO_SITE, { Header, MobileMenu, Footer });