/* Rass Jerseys - chrome: Navbar, Footer */

const Crest = ({ size = 30 }) => (
  <span className="crest" style={{ width: size, height: size }}>
    <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
      <path d="M12 2.5l8 3v6.2c0 5-3.5 8.3-8 9.3-4.5-1-8-4.3-8-9.3V5.5z"
        fill="#fff" fillOpacity="0.16" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M12 7.5l1.4 2.9 3.1.45-2.25 2.2.53 3.05L12 16.6l-2.8 1.5.53-3.05L7.5 10.85l3.1-.45z"
        fill="var(--accent)" />
    </svg>
  </span>
);

const Logo = ({ onClick, light }) => (
  <button className="logo" onClick={onClick} data-light={light ? "1" : undefined}>
    <Crest />
    <span className="logo-word">Rass <span className="logo-word-2">Jerseys</span></span>
  </button>
);

function Navbar({ onHome, onShop, onAbout, onSearch, onCart, cartCount }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const fn = () => setSolid(window.scrollY > 60);
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const close = () => setOpen(false);

  return (
    <header className="nav" data-solid={solid ? "1" : undefined}>
      <div className="wrap nav-inner">
        <Logo onClick={() => { onHome(); close(); }} />

        <nav className="nav-links">
          <button className="nav-link" onClick={onHome}>Home</button>
          <button className="nav-link" onClick={onShop}>Shop</button>
          <button className="nav-link" onClick={onAbout}>About</button>
        </nav>

        <div className="nav-right">
          <button className="nav-icon" aria-label="Search" onClick={onSearch}>
            <Icon name="search" size={20} />
          </button>
          <button className="nav-icon nav-cart-btn" aria-label="Cart" onClick={onCart}>
            <Icon name="bag" size={20} />
            {cartCount > 0 && <span className="cart-badge">{cartCount > 9 ? "9+" : cartCount}</span>}
          </button>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen((value) => !value)}>
            <Icon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>

      {open && (
        <div className="nav-sheet">
          <button className="nav-sheet-link" onClick={() => { onHome(); close(); }}>Home</button>
          <button className="nav-sheet-link" onClick={() => { onShop(); close(); }}>Shop</button>
          <button className="nav-sheet-link" onClick={() => { onAbout(); close(); }}>About</button>
          <div style={{ height: 1, background: "var(--border)", margin: "6px 0" }} />
          <button className="nav-sheet-link nav-sheet-cart" onClick={() => { onCart(); close(); }}>
            <Icon name="bag" size={18} /> Cart
            {cartCount > 0 && <span className="cart-badge-inline">{cartCount}</span>}
          </button>

        </div>
      )}
    </header>
  );
}

function Footer({ onHome, onShop }) {
  const store = RassData.STORE;
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <Logo onClick={onHome} light />
          <p className="footer-tag">{store.tagline}</p>
          <p className="footer-note">Official-quality jerseys with a simple WhatsApp order handoff.</p>
        </div>
        <div className="footer-col">
          <h4 className="footer-h">Explore</h4>
          <button className="footer-link" onClick={onHome}>Home</button>
          <button className="footer-link" onClick={onShop}>Shop Jerseys</button>
        </div>
        <div className="footer-col">
          <h4 className="footer-h">Contact</h4>
          {store.whatsappNumbers.map((number) => (
            <a key={number} className="footer-link" href={RassData.waLink(number, "Hello Rass Jerseys, I want to know more about a jersey.")} target="_blank" rel="noreferrer">
              WhatsApp · {number}
            </a>
          ))}
        </div>
      </div>
      <div className="footer-bottom wrap">
        <span>© {new Date().getFullYear()} {store.name}</span>
        <span>Built for fast local order handling.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Navbar, Footer, Logo, Crest });