/* Shared chrome: Logo, Header, Footer */

function Logo({ reversed = false, onClick }) {
  return (
    <a className="brs-logo" onClick={onClick} style={{ cursor: 'pointer' }}>
      <img src={reversed ? 'assets/logo-mark-reversed.svg' : 'assets/logo-mark.svg'}
           width="40" height="40" alt="" />
      <span className="brs-logo__wm">
        <span className="brs-logo__name" style={reversed ? { color: 'var(--paper)' } : null}>Burson</span>
        <span className="brs-logo__ltd">Property</span>
      </span>
    </a>
  );
}

function Header({ route, onNavigate }) {
  const { Button } = window.BursonLtdDesignSystem_53a781;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('.brs-app');
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 12);
    const target = el || window;
    target.addEventListener('scroll', onScroll);
    return () => target.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'brs-header' + (scrolled ? ' is-scrolled' : '')}>
      <div className="brs-header__inner">
        <Logo onClick={() => onNavigate('home')} />
        <div className="brs-header__actions">
          <a className="brs-header__phone" href="tel:+447939557991">
            <i data-lucide="phone"></i> +44 7939 557 991
          </a>
          <Button size="sm" onClick={() => onNavigate('contact')}>Make an enquiry</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ onNavigate }) {
  const { IconButton } = window.BursonLtdDesignSystem_53a781;
  const cols = [
    { h: 'Company', items: ['About Burson', 'Our approach', 'Development', 'Careers'] },
    { h: 'For owners', items: ['Let your property', 'Block management', 'Refurbishment', 'Valuations'] },
  ];
  return (
    <footer className="brs-footer">
      <div className="brs-footer__inner">
        <div className="brs-footer__brand">
          <Logo reversed onClick={() => onNavigate('home')} />
          <p className="brs-footer__blurb">
            Buying, developing and letting homes worth keeping across England.
          </p>
          <div className="brs-footer__social">
            <IconButton label="Call us" variant="ghost" size="sm"><i data-lucide="phone"></i></IconButton>
            <IconButton label="Email us" variant="ghost" size="sm"><i data-lucide="mail"></i></IconButton>
            <IconButton label="Find us" variant="ghost" size="sm"><i data-lucide="map-pin"></i></IconButton>
          </div>
        </div>
      </div>
      <div className="brs-footer__legal">
        <span>© 2026 Burson Ltd. Registered in England &amp; Wales no. 03488210.</span>
      </div>
    </footer>
  );
}

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