(() => {
const { Logo, Icon, IconButton, Button } = window.HeronsDesignSystem_c1fb00;

function NavLink({ children, active, onClick }) {
  const [h, setH] = React.useState(false);
  return <a href="#" onClick={(e) => { e.preventDefault(); onClick && onClick(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--ivory)', paddingBottom: 6, backgroundImage: 'linear-gradient(var(--brass),var(--brass))', backgroundSize: (h || active) ? '100% 1px' : '0 1px', backgroundPosition: '0 100%', backgroundRepeat: 'no-repeat' }}>{children}</a>;
}

function SiteHeader({ page, go, book }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navigate = (target, arg) => { setMenuOpen(false); go(target, arg); };
  return (
    <>
      <header className="site-header" style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, height: 68, background: 'var(--header-gradient)', borderBottom: '1px solid var(--ivory-16)', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '0 var(--page-gutter)' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); navigate('home'); }} style={{ backgroundImage: 'none', justifySelf: 'start' }}><Logo variant="horizontal" tone="ivory" height={46} /></a>
        <nav className="site-nav" style={{ display: 'flex', gap: 48 }}>
          <NavLink active={page === 'residences' || page === 'residence'} onClick={() => go('residences')}>Residences</NavLink>
          <NavLink onClick={() => go('home', 'approach')}>Our Approach</NavLink>
          <NavLink active={page === 'newsletter' || page === 'article'} onClick={() => go('newsletter')}>Newsletter</NavLink>
          <NavLink active={page === 'enquire'} onClick={() => go('enquire')}>Enquire</NavLink>
        </nav>
        <div className="header-cta" style={{ justifySelf: 'end' }}><Button variant="light" onClick={() => navigate('enquire', 'partner')}>Work with us</Button></div>
        <button className="mobile-menu" type="button" aria-label="Open menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(!menuOpen)}>
          <span /><span /><span />
        </button>
      </header>
      {menuOpen && <nav className="mobile-menu-panel">
        <button onClick={() => navigate('about')}>About Herons</button>
        <button onClick={() => navigate('corporate')}>Corporate stays</button>
        <button onClick={() => navigate('relocations')}>Relocations</button>
        <button onClick={() => navigate('residences')}>Residences</button>
        <button onClick={() => navigate('newsletter')}>Newsletter</button>
        <button onClick={() => navigate('home', 'approach')}>Our approach</button>
        <button onClick={() => navigate('enquire')}>Enquire</button>
        <button onClick={() => navigate('enquire', 'partner')}>Work with us</button>
      </nav>}
    </>
  );
}

function PopularLinks({ go }) {
  return (
    <section className="partner-cta" style={{ background: 'var(--ivory)', padding: '96px var(--page-gutter)' }}>
      <div className="partner-cta-inner" style={{ maxWidth: 'var(--page-max)', margin: '0 auto', background: 'var(--midnight)', color: 'var(--ivory)', padding: '64px 72px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 64, alignItems: 'center' }}>
        <div style={{ maxWidth: 760 }}>
          <div style={{ fontSize: 11, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--brass-light)', marginBottom: 18 }}>Work with Herons</div>
          <h2 style={{ color: 'var(--ivory)', fontSize: 38, margin: '0 0 16px' }}>A trusted accommodation partner in London</h2>
          <p style={{ color: 'var(--ivory-72)', fontSize: 17, lineHeight: 1.65, margin: 0 }}>We work with property managers, landlords and companies to provide well-presented furnished homes and suitable stays for professionals, relocations and extended visits.</p>
        </div>
        <Button variant="light" size="lg" onClick={() => go('enquire', 'partner')}>Work with us</Button>
      </div>
    </section>
  );
}

function SiteFooter({ go }) {
  const cols = [
    ['Company', ['About Herons', 'Our approach', 'Careers', 'Contact']],
    ['Residences', ['All residences', 'Apartments', 'Penthouses', 'Townhouses']],
    ['For business', ['Corporate stays', 'Relocations', 'Property owners']],
    ['Journal', ['Neighbourhood guides', 'Seasonal London', 'Hosting notes']],
  ];
  const sel = { background: 'transparent', color: 'var(--ivory)', border: '1px solid var(--ivory-16)', height: 36, padding: '0 12px', fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '.08em' };
  return (
    <footer style={{ background: 'var(--midnight)', color: 'var(--ivory)', padding: '80px var(--page-gutter) 32px' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto' }}>
        <div className="footer-main" style={{ display: 'grid', gridTemplateColumns: '1.3fr repeat(4, minmax(0,1fr))', gap: 40, paddingBottom: 56, borderBottom: '1px solid var(--ivory-16)' }}>
          <div className="footer-brand" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <Logo variant="stacked" tone="ivory" width={300} style={{ marginLeft: -96, marginTop: -12 }} />
            <div style={{ display: 'flex', gap: 10 }}>
              <IconButton icon="phone" label="Call" variant="outline-light" size={40} />
              <IconButton icon="mail" label="Email" variant="outline-light" size={40} />
              <IconButton icon="message-circle" label="WhatsApp" variant="outline-light" size={40} />
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--ivory-72)' }}>Registered office<br />Unit 3, International House<br />1100 Great West Road<br />Brentford, TW8 0GP</p>
          </div>
          {cols.map(([t, ls]) => (
            <div key={t} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 11, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--brass-light)', marginBottom: 6 }}>{t}</div>
              {ls.map((l) => <a key={l} href="#" onClick={(e) => { e.preventDefault(); if (l === 'About Herons') go('about'); else if (l === 'Corporate stays') go('corporate'); else if (l === 'Relocations') go('relocations'); else if (l === 'Our approach') go('home', 'approach'); else if (l === 'Contact') go('enquire'); else if (t === 'Residences') go('residences'); }} style={{ fontSize: 14, color: 'var(--ivory)', alignSelf: 'flex-start' }}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, gap: 24, flexWrap: 'wrap' }}>
          <div className="footer-legal" style={{ display: 'flex', gap: 24, fontSize: 13, color: 'var(--ivory-72)', flexWrap: 'wrap' }}>
            {[['Terms', 'terms'], ['Privacy', 'privacy'], ['Cookies', 'cookies'], ['Complaints', 'complaints']].map(([label, id]) => <a key={id} href={'#' + id} onClick={(e) => { e.preventDefault(); go('legal', id); }}>{label}</a>)}
            <span>© {new Date().getFullYear()} RENTSMITH LTD, trading as Herons</span>
            <span>Company no. 17392802 · Registered in England and Wales</span>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon name="globe" size={16} color="var(--ivory-72)" />
            <select style={sel} defaultValue="GBP"><option value="GBP">GBP £</option><option>EUR €</option><option>USD $</option></select>
            <select style={sel} defaultValue="sqft"><option value="sqft">sq ft</option><option value="sqm">sq m</option></select>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, PopularLinks });

})();