// Footer.jsx — shared site footer

const Footer = ({ setPage }) => (
  <footer>
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ marginBottom: 16 }}>
            <BrandMark size={32} />
          </div>
          <p style={{ color: 'var(--ink-soft)', fontSize: 13, maxWidth: 320, margin: 0 }}>
            A store-owned agency charting Shopify apps, public and private, from
            an observatory of patient craftsmanship.
          </p>
        </div>
        <div>
          <h4>Services</h4>
          <ul>
            <li><a href="#services">Public apps</a></li>
            <li><a href="#services">Custom apps</a></li>
            <li><a href="#services">Audits</a></li>
            <li><a href="#services">Migrations</a></li>
          </ul>
        </div>
        <div>
          <h4>Apps</h4>
          <ul>
            <li><a href="#nutriscore">NutriScore ✦</a></li>
            <li><a href="#work">View all work</a></li>
          </ul>
        </div>
        <div>
          <h4>Studio</h4>
          <ul>
            <li><a href="#work">Work</a></li>
            <li><a href="#process">Process</a></li>
            <li>
              <a href="#blog" onClick={e => { e.preventDefault(); setPage('blog'); window.scrollTo(0, 0); }}>Writing</a>
            </li>
            <li><a href={MAIL.constellation}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li>
              <a href="#privacy" onClick={e => { e.preventDefault(); setPage('privacy'); window.scrollTo(0, 0); }}>Privacy policy</a>
            </li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Cookies</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 StoreOn Web Solutions</span>
        <span>✦ Observed from a quiet corner of the web</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });