// GreenPan site chrome — top nav matching greenpan.us
function GreenPanChrome({ step }) {
  return (
    <>
      {/* Top utility row: ABOUT / BEST SELLERS / etc + Tucci pill */}
      <div className="gp-utility-row">
        <div className="gp-utility-left">
          <a>About Us</a>
          <a>Best Sellers</a>
          <a>New</a>
          <a>Reviews</a>
          <a>Brands</a>
          <a>Rewards</a>
          <a>Recipes</a>
          <a>Blog</a>
          <a>Product Finder Quiz</a>
        </div>
        <div className="gp-utility-right">
          <span className="gp-tucci-pill">Shop <span className="tucci-name">TUCCI</span> by GreenPan</span>
        </div>
      </div>

      {/* Dark green promo bar — removed per request */}

      {/* Main header w/ logo + nav + utility icons */}
      <div className="th-header">
        <div className="th-logo">
          <img src="assets/greenpan-logo.jpeg" alt="GreenPan" />
        </div>
        <nav className="th-nav">
          <a>Cookware</a>
          <a>Electrics</a>
          <a>Bakeware</a>
          <a>Cutlery</a>
          <a>Tools</a>
          <a>Bundle & Save</a>
          <a className={step === 'home' ? 'active' : ''}>Best Sellers</a>
        </nav>
        <div className="th-utility">
          <a title="Search">⌕</a>
          <a title="Account">◯</a>
          <a title="Cart">⛺</a>
        </div>
      </div>

      {/* Sub-banner removed per request */}
    </>
  );
}

function MalachyteRibbon({ show, label = "Personalized by Malachyte" }) {
  if (!show) return null;
  return (
    <div className="mal-ribbon">
      <span className="dot" />
      <img src="assets/malachyte-symbol-gradient.png" className="mal-logo-mark" alt="" />
      <span>{label}</span>
    </div>
  );
}

Object.assign(window, { GreenPanChrome, MalachyteRibbon });