/* global React */

function PageFooter() {
  return (
    <footer className="fk-footer surface-inverse" data-screen-label="08 Footer">
      <div className="fk-section__inner">
        <div className="fk-footer__grid">
          <div className="fk-footer__left">
            <img src="assets/monogram-fk-light.svg" alt="" className="fk-footer__mark" />
            <div className="fk-footer__quote">
              Build the company.<br />Be home for dinner.<br />Both, on purpose.
            </div>
            <div className="fk-mono fk-footer__meta">© 2026 · Southern California</div>
          </div>
          <div className="fk-footer__right">
            <div style={{ display: 'grid', gap: 8 }}>
              <span className="fk-eyebrow" style={{ color: 'rgba(230,227,218,0.6)' }}>Elsewhere</span>
              <div className="fk-footer__links" style={{ fontSize: 13 }}>
                <a href="mailto:farid@purelyworks.com">farid@purelyworks.com</a>
                <span className="fk-dot" />
                <a href="https://purelyworks.com" target="_blank" rel="noreferrer">purelyworks.com</a>
                <span className="fk-dot" />
                <a href="https://medium.com/@faridkheloco" target="_blank" rel="noreferrer">Medium</a>
                <span className="fk-dot" />
                <a href="#" target="_blank" rel="noreferrer">LinkedIn</a>
              </div>
            </div>
            <div style={{ display: 'grid', gap: 8, marginTop: 16 }}>
              <span className="fk-eyebrow" style={{ color: 'rgba(230,227,218,0.6)' }}>Colophon</span>
              <p style={{ color: 'rgba(230,227,218,0.7)', fontSize: 13, lineHeight: 1.55, margin: 0, maxWidth: '46ch' }}>
                Set in Schibsted Grotesk &amp; Geist. Photographs by friends and a tripod. Site built and
                maintained between client calls — Pacific &amp; Patina, on cement.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.PageFooter = PageFooter;