// Header.jsx — Navy chrome with logo on the left, utility rail on
// the right, yellow gradient menu band below.

const Header = ({ cartCount = 1, lang = "Ru", onLangToggle = () => {}, onCartClick = () => {} }) => {
  const [hover, setHover] = React.useState(null);
  const items = [
    { label: "Главная", active: true },
    { label: "Ализа Керен" },
    { label: "Музыкальный магазин", caret: true },
    { label: "Статьи" },
    { label: "Слушать скрипку", caret: true },
    { label: "Статьи о скрипке" },
    { label: "Уроки и курсы" },
    { label: "Методика До‑Ре‑Ми" },
  ];
  return (
    <header style={headerStyles.root}>
      <div style={headerStyles.band}>
        <div style={headerStyles.row}>
          <a href="#" style={headerStyles.logo}>
            <img src="../../assets/logo.svg" alt="Keren Aliza Project" style={{ height: 110, width: "auto" }} />
          </a>
          <div style={headerStyles.util}>
            <UtilIcon name="search" />
            <UtilDivider />
            <UtilIcon name="whatsapp" />
            <UtilDivider />
            <UtilIcon name="user" />
            <UtilDivider />
            <UtilIcon name="login" />
            <UtilDivider />
            <button onClick={onCartClick} style={headerStyles.bagBtn} aria-label="Cart">
              <Icon name="bag" size={20} color="#FFE820" />
              {cartCount > 0 && <span style={headerStyles.count}>{cartCount}</span>}
            </button>
            <UtilDivider />
            <button onClick={onLangToggle} style={headerStyles.langChip}>{lang}</button>
          </div>
        </div>
      </div>
      <nav style={headerStyles.menu}>
        {items.map((it, i) => (
          <a
            key={i}
            href="#"
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(null)}
            style={{
              ...headerStyles.menuLink,
              fontWeight: it.active ? 700 : 500,
              opacity: hover != null && hover !== i ? 0.55 : 1,
            }}
          >
            {it.label}
            {it.caret && <span style={{ marginLeft: 6, opacity: 0.6, fontSize: 10 }}>▾</span>}
          </a>
        ))}
      </nav>
    </header>
  );
};

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

const headerStyles = {
  root: { position: "relative", width: "100%" },
  band: { background: "#190E83", padding: "16px 60px" },
  row: { display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: 1320, margin: "0 auto" },
  logo: { display: "flex", textDecoration: "none" },
  util: { display: "flex", alignItems: "center", gap: 14 },
  utilBtn: { background: "transparent", border: 0, padding: 4, cursor: "pointer", color: "#FFE820" },
  utilDivider: { width: 1, height: 22, background: "#FFFFFF", opacity: 0.3 },
  bagBtn: { position: "relative", background: "transparent", border: 0, padding: 4, cursor: "pointer" },
  count: {
    position: "absolute", top: -2, right: -4,
    minWidth: 16, height: 16, padding: "0 4px",
    borderRadius: 999, background: "#FFFFFF", color: "#171717",
    fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 10,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    boxSizing: "border-box",
  },
  langChip: {
    background: "#FFE820", color: "#000", border: 0,
    fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 12,
    padding: "4px 8px", borderRadius: 4, cursor: "pointer",
  },
  menu: {
    background: "linear-gradient(180deg, #FCC655 0%, #F9EF9F 100%)",
    padding: "14px 60px",
    display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "nowrap",
    gap: 12,
  },
  menuLink: {
    fontFamily: "'Nunito Sans', sans-serif", fontSize: 16,
    color: "#171717", textDecoration: "none", whiteSpace: "nowrap",
    transition: "opacity .2s",
  },
};

window.Header = Header;