// Top bar + footer shared chrome

const TopBar = ({ page, onNav }) => {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <a className="logo" onClick={(e) => { e.preventDefault(); onNav('home'); }} href="#home">
          <span className="logo-dot" />
          <span>Art Worth Owning</span>
          <span className="logo-sub">A WorkSmart project</span>
        </a>
        <nav className="topnav">
          <a className={`nav-link ${page === 'home' ? 'active' : ''}`}
             onClick={(e) => { e.preventDefault(); onNav('home'); }} href="#home">Browse</a>
          <a className={`nav-link ${page === 'about' ? 'active' : ''}`}
             onClick={(e) => { e.preventDefault(); onNav('about'); }} href="#about">About</a>
          <a className="submit-btn"
             onClick={(e) => { e.preventDefault(); onNav('submit'); }} href="#submit">Submit an artist</a>
        </nav>
      </div>
    </div>
  );
};

const Footer = ({ onNav }) => (
  <footer>
    <div className="container">
      <div className="col">
        <div className="caps" style={{ color: 'var(--ink)' }}>Art Worth Owning</div>
        <div style={{ fontSize: 13, marginTop: 6, maxWidth: 320, lineHeight: 1.5 }}>
          A community-seeded directory of Black artists worth supporting. A WorkSmart project.
        </div>
      </div>
      <div className="col">
        <div className="caps">Navigate</div>
        <a onClick={(e) => { e.preventDefault(); onNav('home'); }} href="#home">Browse</a>
        <a onClick={(e) => { e.preventDefault(); onNav('about'); }} href="#about">About</a>
        <a onClick={(e) => { e.preventDefault(); onNav('submit'); }} href="#submit">Submit an artist</a>
      </div>
      <div className="col">
        <div className="caps">Report</div>
        <a href="#">Report a listing</a>
        <a href="#">Contact the team</a>
      </div>
      <div className="col mono" style={{ fontSize: 11, alignSelf: 'flex-end', color: 'var(--muted-2)' }}>
        © 2026 · V1.0 · Seeded from IG post DXJxAGBAkAp
      </div>
    </div>
  </footer>
);

window.TopBar = TopBar;
window.Footer = Footer;