/* ============================================================
   OFFICE HERO — pixel-art room banner shown at the top of each
   office module. window.OfficeHero
   Working content below it stays unchanged.
   ============================================================ */
(function () {
  const { useT, useLang, Icon, GLYPH } = window.UI;

  const META = {
    facebook: { c: "fb",     glyph: "fb",    en: "Facebook Office",    th: "สำนักงานเฟซบุ๊ก",
      en2: "Content · Ads · Chat · Returns", th2: "คอนเทนต์ · ยิงแอด · แชท · ตีกลับ", status: { en: "Live ads running", th: "กำลังยิงแอด" } },
    tiktok:   { c: "tiktok", glyph: "tt",    en: "TikTok Live Office", th: "ออฟฟิศไลฟ์ติ๊กต็อก",
      en2: "Live · Commission · Shifts", th2: "ไลฟ์ · ค่าคอม · กะงาน", status: { en: "ON AIR", th: "กำลังไลฟ์" }, live: true },
    stock:    { c: "shopee", glyph: "box",   en: "Stock Warehouse",    th: "คลังสินค้า",
      en2: "Products · Balance · Movement", th2: "สินค้า · คงเหลือ · รับเข้า-เบิกออก", status: { en: "Receiving 2 jobs", th: "กำลังรับเข้า 2 งาน" } },
    finance:  { c: "ok",     glyph: "coin",  en: "Finance Office",     th: "ห้องบัญชีการเงิน",
      en2: "Profit · Ad cost · Monthly", th2: "กำไรรายวัน · ค่าแอด · สรุปเดือน", status: { en: "Books closed today", th: "ปิดยอดวันนี้แล้ว" } },
    hr:       { c: "ig",     glyph: "heart", en: "HR Cute Office",     th: "ฝ่ายบุคคล",
      en2: "Staff · Shifts · Performance", th2: "พนักงาน · กะ · ผลงาน", status: { en: "2 interviews today", th: "นัดสัมภาษณ์ 2 คน" } },
  };

  function OfficeHero({ office }) {
    const t = useT();
    const m = META[office];
    if (!m) return null;
    return (
      <div className={"office-hero" + (m.live ? " is-live" : "")} style={{ "--oc": "var(--" + m.c + ")" }}>
        <img className="oh-art" src={"assets/rooms/" + office + ".png"} alt={m.en} />
        <div className="oh-scrim" />
        <div className="oh-grain" />
        <div className="oh-body">
          <div className="oh-eyebrow">
            <span className="oh-ico"><Icon name={GLYPH[m.glyph] || "store"} size={15} /></span>
            {t("Office", "ห้องทำงาน")}
          </div>
          <div className="oh-title">{m.en}</div>
          <div className="oh-sub">{t(m.en2, m.th2)}</div>
        </div>
        <div className="oh-status">
          <span className={"oh-dot" + (m.live ? " live" : "")} />
          {t(m.status.en, m.status.th)}
        </div>
      </div>
    );
  }

  window.OfficeHero = OfficeHero;
})();