function PromoBar({ t, lang, setLang }) {
  return (
    <div style={{ background:"var(--pp-blush-bar)", color:"var(--pp-ink)", padding:"7px 24px", display:"flex", alignItems:"center", justifyContent:"space-between", fontFamily:"var(--font-sans)", fontSize:11, fontWeight:600, letterSpacing:"0.16em", textTransform:"uppercase" }}>
      <div style={{display:"flex",gap:14,alignItems:"center"}}>
        <a title="Telegram" href="https://t.me/passionpetalbouquet" target="_blank" rel="noopener noreferrer" style={socStyle}><ICN.tg size={14}/></a>
        <a title="Instagram" href="https://www.instagram.com/passionatelypetals" target="_blank" rel="noopener noreferrer" style={socStyle}><ICN.ig size={14}/></a>
        <a title="TikTok" href="https://www.tiktok.com/@passionatelypetals" target="_blank" rel="noopener noreferrer" style={socStyle}><ICN.tt size={14}/></a>
        <a title="小红书" href="https://xhslink.com/m/6K4j40mHbQf" target="_blank" rel="noopener noreferrer" style={{...socStyle, fontFamily:"var(--font-cn-sans)", fontSize:10, textDecoration:"none"}}>小红书</a>
      </div>
      <div style={{flex:1, textAlign:"center"}}>{t.promo}</div>
      <div style={{display:"flex",gap:6,alignItems:"center"}}>
        <button onClick={()=>setLang("en")} style={langBtn(lang==="en")}>EN</button>
        <span style={{opacity:0.4}}>·</span>
        <button onClick={()=>setLang("zh")} style={langBtn(lang==="zh")}>中文</button>
      </div>
    </div>
  );
}
const socStyle = { display:"inline-flex", alignItems:"center", color:"var(--pp-ink)", cursor:"pointer", opacity:0.85 };
const langBtn = (active) => ({ background:"transparent", border:0, color:"var(--pp-ink)", fontFamily:"var(--font-sans)", fontSize:11, fontWeight: active?700:500, letterSpacing:"0.12em", cursor:"pointer", opacity: active?1:0.55, padding:"2px 4px" });

function Header({ lang, setLang, route, onNav, onPickCollection, cartCount, onOpenCart }) {
  const t = useT(lang);
  const fontFamily = lang === "zh" ? "var(--font-cn-sans)" : "var(--font-sans)";
  const navStyle = (active) => ({
    fontFamily, fontSize: lang==="zh"?13:11, fontWeight: active?700:500,
    letterSpacing: lang==="zh"?"0.06em":"0.18em",
    textTransform: lang==="zh"?"none":"uppercase",
    color: "var(--pp-ink)", cursor:"pointer",
    borderBottom: active ? "1px solid var(--pp-pink-deep)" : "1px solid transparent",
    paddingBottom: 2, transition: "all 140ms",
  });
  return (
    <>
      <PromoBar t={t} lang={lang} setLang={setLang} />
      <header style={{ background:"var(--bg)", borderBottom:"1px solid var(--hairline)" }}>
        <div style={{ maxWidth:1280, margin:"0 auto", padding:"22px 32px", display:"grid", gridTemplateColumns:"1fr auto 1fr", alignItems:"center", gap:24 }}>
          <nav style={{ display:"flex", gap:26, alignItems:"center", flexWrap:"wrap" }}>
            <a onClick={()=>onNav("home")}  style={navStyle(route==="home")}>{t.nav.home}</a>
            <a onClick={()=>onNav("shop")}  style={navStyle(route==="shop")}>{t.nav.shop}</a>
            <CollectionsMenu lang={lang} t={t} onNav={onNav} onPickCollection={onPickCollection} navStyle={navStyle} active={route==="collections"||route==="collection"} />
            <a href="https://t.me/papapassion" target="_blank" rel="noopener noreferrer" style={{...navStyle(false), cursor:"pointer"}}>{t.nav.contact}</a>
          </nav>

          <a onClick={()=>onNav("home")} style={{ cursor:"pointer", textAlign:"center", display:"flex", flexDirection:"column", alignItems:"center", gap:6 }}>
            <img src="./assets/logo/passions-petals-logo.jpeg" alt="Passion's Petals" style={{ width:70, height:70, borderRadius:8, objectFit:"cover", boxShadow:"var(--shadow-2)" }}/>
            <div style={{ fontFamily:"var(--font-display)", fontSize:18, fontStyle:"italic", color:"var(--pp-pink-deep)", lineHeight:1, letterSpacing:"0.04em" }}>Passion's Petals</div>
            <div style={{ fontFamily, fontSize:9, fontWeight:600, letterSpacing:"0.32em", color:"var(--pp-terracotta-deep)" }}>· EST 2026 ·</div>
          </a>

          <div style={{ display:"flex", justifyContent:"flex-end", gap:18, alignItems:"center" }}>
            <button title={t.search}  style={iconBtn}><ICN.search/></button>
            <button title={t.account} style={iconBtn}><ICN.user/></button>
            <button title={t.cart} onClick={onOpenCart} style={{...iconBtn, position:"relative"}}>
              <ICN.bag/>
              {cartCount>0 && <span style={cartBadge}>{cartCount}</span>}
            </button>
            <button style={iconBtn}><ICN.menu/></button>
          </div>
        </div>
      </header>
    </>
  );
}

function CollectionsMenu({ lang, t, onNav, onPickCollection, navStyle, active }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div onMouseEnter={()=>setOpen(true)} onMouseLeave={()=>setOpen(false)} style={{ position:"relative" }}>
      <a onClick={()=>onNav("collections")} style={{...navStyle(active), display:"inline-flex", alignItems:"center", gap:4}}>
        {t.nav.collections}<ICN.chevD size={12}/>
      </a>
      {open && (
        <div style={{ position:"absolute", top:"100%", left:-12, marginTop:4, background:"var(--bg-card)", border:"1px solid var(--hairline)", boxShadow:"var(--shadow-3)", borderRadius:10, padding:"10px 0", minWidth:200, zIndex:40 }}>
          {COLLECTIONS.map(c=>(
            <a key={c.slug} onClick={()=>{ setOpen(false); onPickCollection(c.slug); }} style={{ display:"block", padding:"8px 18px", fontFamily: lang==="zh"?"var(--font-cn-sans)":"var(--font-sans)", fontSize:13, color:"var(--pp-ink)", cursor:"pointer", whiteSpace:"nowrap" }}>{lang==="zh"?c.name_zh:c.name_en}</a>
          ))}
        </div>
      )}
    </div>
  );
}

const iconBtn = { background:"transparent", border:0, padding:8, cursor:"pointer", color:"var(--pp-ink)", display:"inline-flex" };
const cartBadge = { position:"absolute", top:0, right:0, minWidth:16, height:16, padding:"0 4px", borderRadius:8, background:"var(--pp-pink-deep)", color:"#fff", fontFamily:"var(--font-sans)", fontSize:10, fontWeight:700, display:"inline-flex", alignItems:"center", justifyContent:"center" };

window.Header = Header;