/* Sweet Haven — Header (sticky translucent nav) + Footer */

function Header({ cartCount, onCartClick, onNav, active, theme, onToggleTheme }) {
  const links = ["Home", "Menu", "Custom cakes"];
  const [open, setOpen] = React.useState(false);
  const go = (l) => { setOpen(false); onNav(l); };
  return (
    <header className="sh-header">
      <div className="sh-header-inner">
        <a className="sh-logo" onClick={() => go("Home")}>
          <img className="sh-logo-img" src="images/logo.png" alt="Sweet Haven" />
        </a>

        <nav className="sh-nav">
          {links.map((l) => (
            <a
              key={l}
              className={"sh-nav-link" + (active === l ? " is-active" : "")}
              onClick={() => go(l)}
            >
              {l}
            </a>
          ))}
        </nav>

        <div className="sh-header-actions">
          <button className="sh-icon-btn" aria-label="Toggle theme" onClick={onToggleTheme}>
            <Icon name={theme === "dark" ? "sun" : "moon"} size={19} />
          </button>
          <button className="sh-icon-btn sh-hide-sm" aria-label="Search"><Icon name="search" size={20} /></button>
          <button className="sh-icon-btn" aria-label="Cart" onClick={onCartClick}>
            <Icon name="shopping-bag" size={20} />
            {cartCount > 0 && <span className="sh-cart-dot">{cartCount}</span>}
          </button>
          <button className="sh-icon-btn sh-only-sm" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
            <Icon name={open ? "x" : "menu"} size={22} />
          </button>
        </div>
      </div>

      <div className={"sh-mobile-nav" + (open ? " open" : "")}>
        {links.map((l) => (
          <a key={l} className={"sh-mobile-link" + (active === l ? " is-active" : "")} onClick={() => go(l)}>{l}</a>
        ))}
      </div>
    </header>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="sh-footer">
      <div className="sh-footer-inner">
        <div className="sh-footer-brand">
          <div className="sh-logo-word" style={{ fontSize: 34, color: "var(--cream-50)" }}>Sweet Haven</div>
          <p className="sh-footer-tag">Baked from scratch, with love. Made this morning, gone by noon.</p>
          <div className="sh-footer-social">
            <a className="sh-icon-btn ghost" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
            <a className="sh-icon-btn ghost" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
            <a className="sh-icon-btn ghost" aria-label="Phone"><Icon name="phone" size={18} /></a>
          </div>
        </div>
        <div className="sh-footer-cols">
          <div>
            <div className="sh-foot-h">Shop</div>
            <a onClick={() => onNav("Menu")}>Cakes</a>
            <a onClick={() => onNav("Menu")}>Cookies</a>
            <a onClick={() => onNav("Menu")}>Banana bread</a>
            <a onClick={() => onNav("Custom cakes")}>Custom orders</a>
          </div>
          <div>
            <div className="sh-foot-h">Hello</div>
            <p>Call or WhatsApp<br />0703 734 9484</p>
            <a onClick={() => onNav("Custom cakes")} style={{ marginTop: 10 }}>Order a custom cake</a>
          </div>
        </div>
      </div>
      <div className="sh-footer-base">© 2026 Sweet Haven · Small-batch patisserie · 14 Marlowe Lane</div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });