// MobileHeader.jsx — 360px header band.
// Navy→magenta gradient bg with star pattern overlay (we approximate
// with a soft dotted texture), centered logo lockup, utility icons
// inline above the logo, then a small yellow menu bar with one
// primary link + a "Меню" dropdown handle.

const MobileHeader = ({ cartCount = 1, lang = "Ru", onLangToggle = () => {}, onCartClick = () => {}, onMenu = () => {} }) => {
  return (
    <header style={mhStyles.root}>
      <div style={mhStyles.band}>
        {/* tiny utility rail across the top */}
        <div style={mhStyles.util}>
          <UtilIcon name="search" />
          <UtilDivider />
          <UtilIcon name="whatsapp" />
          <UtilDivider />
          <UtilIcon name="user" />
          <UtilDivider />
          <UtilIcon name="login" />
          <UtilDivider />
          <button onClick={onCartClick} style={mhStyles.bagBtn} aria-label="Cart">
            <Icon name="bag" size={18} color="#FFE820" />
            {cartCount > 0 && <span style={mhStyles.count}>{cartCount}</span>}
          </button>
          <UtilDivider />
          <button onClick={onLangToggle} style={mhStyles.lang}>{lang}</button>
        </div>
        <div style={mhStyles.logoWrap}>
          <img src="../../assets/logo.svg" alt="Keren Aliza Project" style={{ height: 92 }} />
        </div>
      </div>
      <nav style={mhStyles.menu}>
        <a href="#" style={mhStyles.menuPrimary}>
          <Icon name="bag" size={14} color="#171717" /> Магазин
        </a>
        <button onClick={onMenu} style={mhStyles.menuToggle}>
          Меню <Icon name="chevron" size={14} color="#171717" />
        </button>
      </nav>
    </header>
  );
};

const UtilIcon = ({ name }) => (
  <button style={mhStyles.utilBtn} aria-label={name}><Icon name={name} size={18} color="#FFE820" /></button>
);
const UtilDivider = () => <span style={mhStyles.utilDivider} />;

const mhStyles = {
  root: { width: "100%", fontFamily: "'Nunito Sans', sans-serif" },
  band: {
    position: "relative",
    background: "linear-gradient(180deg, #190E83 0%, #5A0E83 45%, #D20889 100%)",
    /* Safe-area top padding clears the iOS notch / status bar when
       this header is rendered inside an `IOSDevice` frame. */
    padding: "56px 16px 16px",
  },
  util: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 10, marginBottom: 6 },
  utilBtn: { background: "transparent", border: 0, padding: 2, cursor: "pointer" },
  utilDivider: { width: 1, height: 16, background: "#FFFFFF", opacity: 0.3 },
  bagBtn: { position: "relative", background: "transparent", border: 0, padding: 2, cursor: "pointer" },
  count: { position: "absolute", top: -3, right: -5, minWidth: 14, height: 14, padding: "0 3px", borderRadius: 999, background: "#FFFFFF", color: "#171717", fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 9, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSizing: "border-box" },
  lang: { background: "#FFE820", color: "#000", border: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 10, padding: "3px 6px", borderRadius: 4, cursor: "pointer" },

  logoWrap: { display: "flex", justifyContent: "center" },

  menu: {
    background: "linear-gradient(180deg, #FCC655 0%, #F9EF9F 100%)",
    padding: "10px 16px",
    display: "flex", alignItems: "center", justifyContent: "space-between",
  },
  menuPrimary: { display: "inline-flex", alignItems: "center", gap: 8, color: "#171717", textDecoration: "none", fontWeight: 700, fontSize: 14 },
  menuToggle: { display: "inline-flex", alignItems: "center", gap: 6, background: "transparent", border: 0, color: "#171717", fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, cursor: "pointer", padding: 0 },
};

window.MobileHeader = MobileHeader;