// Shared chrome for the Wall site: topbar + footer + photo placeholder
function WallTopbar({ active }) {
  const links = [
    ['HOME', 'index.html', ''],
    ['STUDIO', 'Studio Page.html', 'nav-studio'],
    ['HOBBIES', 'Hobbies Page.html', 'nav-hobbies'],
    ['CATALOG', 'Catalog Page.html', ''],
    ['MVP', 'Members Page.html', ''],
    ['ABOUT', 'About Page.html', ''],
    ['CONTACT', 'Contact Page.html', ''],
  ];
  return (
    <header className="wall-topbar">
      <span className="wall-topbar-brand">SOUTHSIDE STUDIO &amp; HOBBIES</span>
      <nav>
        {links.map(([label, href, cls]) => (
          <a key={label} className={`${cls} ${active === label ? 'nav-active' : ''}`} href={href}>{label}</a>
        ))}
      </nav>
      <span className="wall-status">● COMING SOON</span>
    </header>
  );
}

function WallFooter() {
  return (
    <footer className="wall-footer">
      <img src="images/logo-badge.jpg" alt="Southside Studio & Hobbies badge" style={{ height: 64, width: 64, borderRadius: '50%' }} />
      <span>ELKHART, TX · STOREFRONT IN RENOVATION · S3HOBBIES.COM</span>
    </footer>
  );
}

function WallPh({ label, h }) {
  return (
    <div className="wall-ph" style={{ height: h || 300 }}>
      <span>photo: {label}</span>
    </div>
  );
}

// Reusable membership banner (the catalog "member bar" Callie liked).
// Drops the MVP funnel onto any page; links to the Hobbies membership section.
function WallMvpBanner() {
  return (
    <div className="wall-cat-membar" data-screen-label="MVP banner">
      <div>
        <span className="txt">
          <span><b>MVPs</b> save 10 to 20% off singles and pay <b>MSRP on sealed</b>. Treated like the VIPs you are.</span>
        </span>
        <a href="Members Page.html">BECOME AN MVP →</a>
      </div>
    </div>
  );
}

Object.assign(window, { WallTopbar, WallFooter, WallPh, WallMvpBanner });