/* global React, LogoMark */

function Footer({ navigate }) {
  return (
    <footer className="site-footer">
      <div className="ft-row">
        <div className="ft-brand">
          <LogoMark size={12} />
          <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 17, letterSpacing: "-0.005em", textTransform: "none" }}>Jaeden Thai</span>
        </div>
        <div className="ft-meta">
          <span>© 2026</span>
          <span>·</span>
          <span>Made carefully</span>
          <span>·</span>
          <span>Fort Worth, Texas</span>
        </div>
        <div className="ft-social">
          <a href="#" onClick={(e) => { e.preventDefault(); navigate("about"); }}>Are.na ↗</a>
          <a href="#" onClick={(e) => { e.preventDefault(); navigate("resume"); }}>Read.cv ↗</a>
          <a href="mailto:hello@jaedenthai.studio">Email ↗</a>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;