// noir-shell.jsx — Nav + Footer for Noir SPA

function NoirNav({ route, setRoute, cartCount }) {
  const links = [
    { id: "shop", label: "Shop" },
    { id: "collections", label: "Collections" },
    { id: "custom", label: "Custom" },
    { id: "wedding", label: "Wedding" },
    { id: "atelier", label: "Atelier" },
    { id: "journal", label: "Journal" },
  ];
  return (
    <nav className="nav">
      <button className="nav-brand" onClick={() => setRoute("home")} data-hover>
        <div className="mark">E</div>
        Everlit Art
      </button>
      <div className="nav-links">
        {links.map(l => (
          <a key={l.id} onClick={() => setRoute(l.id)} data-hover style={{color: route===l.id ? "var(--gold)" : "inherit"}}>{l.label}</a>
        ))}
      </div>
      <div className="nav-right">
        <a onClick={() => setRoute("reviews")} data-hover>Reviews</a>
        <a onClick={() => setRoute("checkout")} data-hover>Bag ({cartCount})</a>
      </div>
    </nav>
  );
}

function NoirFooter({ setRoute }) {
  return (
    <footer id="contact">
      <div className="footer-grid">
        <div className="footer-col">
          <div className="footer-brand">Everlit Art</div>
          <p className="footer-tagline">Heirloom wax seals, brass dies, and the quiet ceremony of a sealed envelope. Brooklyn, New York.</p>
        </div>
        <div className="footer-col">
          <h4>Shop</h4>
          <ul>
            <li><a onClick={() => setRoute("shop")} data-hover>All Seals</a></li>
            <li><a onClick={() => setRoute("collections")} data-hover>Collections</a></li>
            <li><a onClick={() => setRoute("wedding")} data-hover>Wedding</a></li>
            <li><a onClick={() => setRoute("custom")} data-hover>Custom</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Atelier</h4>
          <ul>
            <li><a onClick={() => setRoute("atelier")} data-hover>Our Craft</a></li>
            <li><a onClick={() => setRoute("journal")} data-hover>The Journal</a></li>
            <li><a onClick={() => setRoute("reviews")} data-hover>Testimony</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <ul>
            <li>atelier@everlit.art</li>
            <li>+1 (212) 555-0139</li>
            <li>47 Wythe Avenue</li>
            <li>Brooklyn, NY 11249</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© MMXXVI Everlit Art · All rights reserved</span>
        <span>Ver. 2 · Noir Edition</span>
        <span>atelier@everlit.art</span>
      </div>
    </footer>
  );
}

Object.assign(window, { NoirNav, NoirFooter });