(function() {
  function Footer() {
    const brand = window.BRAND_CONFIG;
    const properties = (window.SITE_DATA || {properties:[]}).properties;
    const nameParts = brand.shortName.split(' ');

    return (
      <footer className="site-footer">
        <div className="page-container">
          <div className="footer-grid">
            <div>
              <div className="footer-brand-name">
                {nameParts.map((word, i) =>
                  i === nameParts.length - 1
                    ? <span key={i} style={{color: 'var(--brand-accent)'}}>{(i > 0 ? ' ' : '') + word}</span>
                    : (i > 0 ? ' ' : '') + word
                )}
              </div>
              <p className="footer-tagline">{brand.footerTagline}</p>
            </div>
            <div className="footer-col">
              <h4>Properties</h4>
              {properties.map(p => (
                <a key={p.slug} href={`#/property/${p.slug}`}>{p.name}</a>
              ))}
              <a href="#/">View All</a>
            </div>
            <div className="footer-col">
              <h4>Contact</h4>
              <p>Leasing inquiries:</p>
              <a href={`mailto:${brand.contactEmail}`}>{brand.contactEmail}</a>
              <a href={`tel:${brand.contactPhone.replace(/\D/g,'')}`}>{brand.contactPhone}</a>
              <p style={{marginTop: '12px'}}>Mon – Fri, 9am – 5pm PT</p>
            </div>
          </div>
          <div className="footer-bottom">{brand.copyright}</div>
        </div>
      </footer>
    );
  }

  window.Footer = Footer;
})();