// chrome.jsx — Top bar, Nav with mega menu, Footer.

const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

const LANGS = [
  { code: "EN", label: "EN" },
  { code: "ES", label: "ES" },
  { code: "PT", label: "PT" },
  { code: "DE", label: "DE" },
  { code: "ZH", label: "中" },
];

// ─────────────────────────────────────────────────────────
// Top bar
// ─────────────────────────────────────────────────────────
function TopBar({ lang, setLang }) {
  const t = useT();
  return (
    <div className="topbar">
      <div className="wrap-wide topbar-inner">
        <div className="stack">
          <span className="mono" style={{ opacity: .55, letterSpacing: ".08em" }}>{t("tb.company")}</span>
          <span className="sep"></span>
          <a href="tel:+8618361463621"><span className="mono" style={{ opacity: .55, marginRight: 6 }}>{t("tb.tel")}</span>+86 183 6146 3621</a>
          <span className="sep"></span>
          <a href="mailto:wadezhang1987@gmail.com"><span className="mono" style={{ opacity: .55, marginRight: 6 }}>{t("tb.eml")}</span>wadezhang1987@gmail.com</a>
        </div>
        <div className="stack">
          <a href="#">{t("tb.distributor")}</a>
          <a href="#">{t("tb.support")}</a>
          <span className="sep"></span>
          <div className="lang-tog">
            {LANGS.map((l) => (
              <button
                key={l.code}
                className={lang === l.code ? "on" : ""}
                onClick={() => { setLang(l.code); setGlobalLang(l.code); }}
                title={l.code}
              >{l.label}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Mega menu data — kinds are stable, labels via t()
// ─────────────────────────────────────────────────────────
const PRODUCT_NAV_DATA = [
  { kind: "standard", labelKey: "cat.light_s",  std: "DIN 3015-1",       od: "ø6 – 108 mm", sizes: "L0 – L8",     prefix: "WQL", qty: 84 },
  { kind: "heavy",    labelKey: "cat.heavy_s",  std: "DIN 3015-2",       od: "ø6 – 508 mm", sizes: "H1 – H10",    prefix: "WQH", qty: 110 },
  { kind: "twin",     labelKey: "cat.twin_s",   std: "DIN 3015-3",       od: "ø6 – 42 mm",  sizes: "T1 – T5",     prefix: "WQT", qty: 35 },
  { kind: "stainless",labelKey: "cat.marine_s", std: "AISI 316 / 316L",  od: "ø6 – 273 mm", sizes: "Marine spec", prefix: "WQB", qty: 62 },
  { kind: "metal",    labelKey: "cat.metal_s",  std: "Al / Steel / SS",  od: "ø6 – 273 mm", sizes: "−80 → +500 °C", prefix: "WQM", qty: 68 },
  { kind: "cushion",  labelKey: "cat.vib_s",    std: "Shockproof / NBR", od: "ø6 – 108 mm", sizes: "L0 – L8",     prefix: "WQF", qty: 48 },
  { kind: "ubolt",    labelKey: "cat.ubolt_s",  std: "U-bolt + Flat-steel", od: "ø6 – 508 mm", sizes: "U / Flat",   prefix: "WQU", qty: 42 },
  { kind: "cover",    labelKey: "cat.acc_s",    std: "Cover / Rail / Base", od: "Hardware",   sizes: "Full BOM",    prefix: "WQA", qty: 56 },
];

const INDUSTRY_DATA = [
  { labelKey: "ind.wind_r",   code: "WP", metaKey: "ind.meta.wind_r" },
  { labelKey: "ind.metal_r",  code: "MT", metaKey: "ind.meta.metal_r" },
  { labelKey: "ind.petro_r",  code: "OG", metaKey: "ind.meta.petro_r" },
  { labelKey: "ind.chem_r",   code: "CH", metaKey: "ind.meta.chem_r" },
  { labelKey: "ind.tools_r",  code: "MT", metaKey: "ind.meta.tools_r" },
  { labelKey: "ind.constr_r", code: "CM", metaKey: "ind.meta.constr_r" },
  { labelKey: "ind.heavy_r",  code: "HM", metaKey: "ind.meta.heavy_r" },
  { labelKey: "ind.ship_r",   code: "MR", metaKey: "ind.meta.ship_r" },
  { labelKey: "ind.elec_r",   code: "EP", metaKey: "ind.meta.elec_r" },
];

// ─────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────
function Nav({ route, go }) {
  const t = useT();
  const [open, setOpen] = useStateC(null);
  const ref = useRefC();
  useEffectC(() => {
    function onClick(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(null); }
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  function Caret({ active }) {
    return (
      <svg className="caret" width="10" height="10" viewBox="0 0 12 12" style={{ transform: active ? "rotate(180deg)" : "none", transition: "transform .15s" }}>
        <path d="M2 4 L6 8 L10 4" fill="none" stroke="currentColor" strokeWidth="1.6" />
      </svg>
    );
  }

  return (
    <div className="nav" ref={ref}>
      <div className="wrap-wide nav-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); go("home"); setOpen(null); }} className="brand">
          <div className="brand-mark">W</div>
          <div>
            <div className="brand-name">WEIQUE</div>
            <div className="brand-sub">{t("nav.brand_sub")}</div>
          </div>
        </a>

        <nav className="navlist">
          <button onClick={() => setOpen(open === "p" ? null : "p")}>{t("nav.products")} <Caret active={open === "p"} /></button>
          <button onClick={() => setOpen(open === "i" ? null : "i")}>{t("nav.industries")} <Caret active={open === "i"} /></button>
          <button onClick={() => setOpen(open === "a" ? null : "a")}>{t("nav.applications")} <Caret active={open === "a"} /></button>
          <button onClick={() => setOpen(open === "r" ? null : "r")}>{t("nav.resources")} <Caret active={open === "r"} /></button>
          <a href="#" onClick={(e) => { e.preventDefault(); }}>{t("nav.company")}</a>
          <a href="#" onClick={(e) => { e.preventDefault(); }}>{t("nav.news")}</a>
          <a href="#" onClick={(e) => { e.preventDefault(); }}>{t("nav.contact")}</a>
        </nav>

        <div className="nav-tools">
          <button className="icon-btn" title={t("nav.search")}><IconSearch size={15} /></button>
          <button className="icon-btn" title={t("mega.downloads")}><IconFile size={14} /></button>
          <button className="btn btn--accent" onClick={() => go("home")}>
            <IconQuote size={14} /> {t("nav.quote")}
          </button>
        </div>
      </div>

      {open === "p" && (
        <div className="mega">
          <div className="mega-inner">
            <div>
              <h4>{t("mega.catalog")}</h4>
              <div className="meta" style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 12, letterSpacing: 0, textTransform: "none", fontFamily: "var(--font-body)" }}>
                {t("mega.catalog_blurb")}
              </div>
              <a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); go("catalog"); setOpen(null); }}>
                {t("mega.browse_all")} <IconArrow />
              </a>
            </div>
            <div>
              <h4>{t("mega.families")}</h4>
              <div className="mega-list">
                {PRODUCT_NAV_DATA.map((p) => (
                  <a key={p.kind} href="#" onClick={(e) => { e.preventDefault(); go("catalog"); setOpen(null); }}>
                    <span>
                      {t(p.labelKey)}
                      <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted)", letterSpacing: ".04em", marginTop: 2 }}>
                        {p.std} · OD {p.od}
                      </span>
                    </span>
                    <span className="qty">{p.qty}</span>
                  </a>
                ))}
              </div>
            </div>
            <div className="mega-feat">
              <h4>{t("mega.new")}</h4>
              <div className="pic"><ClampArt kind="stainless" /></div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, lineHeight: 1.2, marginBottom: 6 }}>
                {t("mega.feat_title")}
              </div>
              <div style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.5, marginBottom: 12 }}>
                {t("mega.feat_blurb")}
              </div>
              <a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); go("product"); setOpen(null); }}>
                {t("mega.view_series")} <IconArrow />
              </a>
            </div>
          </div>
        </div>
      )}

      {open === "i" && (
        <div className="mega">
          <div className="mega-inner">
            <div>
              <h4>{t("mega.by_industry")}</h4>
              <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 12 }}>{t("mega.industry_blurb")}</div>
            </div>
            <div>
              <h4>{t("mega.industries")}</h4>
              <div className="mega-list">
                {INDUSTRY_DATA.map((p) => (
                  <a key={p.labelKey} href="#" onClick={(e) => { e.preventDefault(); go("catalog"); setOpen(null); }}>
                    <span>{t(p.labelKey)}</span>
                    <span className="qty">{p.code}</span>
                  </a>
                ))}
              </div>
            </div>
            <div className="mega-feat">
              <h4>{t("mega.case_study")}</h4>
              <div className="pic"><ClampArt kind="heavy" /></div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, lineHeight: 1.2, marginBottom: 6 }}>
                280-bar manifold for OEM hydraulic press
              </div>
              <a href="#" className="link-arrow" onClick={(e) => e.preventDefault()}>{t("mega.read_study")} <IconArrow /></a>
            </div>
          </div>
        </div>
      )}

      {open === "r" && (
        <div className="mega">
          <div className="mega-inner">
            <div>
              <h4>{t("mega.downloads")}</h4>
              <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 12 }}>{t("mega.resources_blurb")}</div>
            </div>
            <div>
              <h4>{t("mega.downloads")}</h4>
              <div className="mega-list">
                {["Master catalog (EN) 2026", "STEP / IGES CAD library", "Installation torque charts", "Chemical compatibility matrix", "ISO 9001 certificate", "CE Declaration of Conformity", "Material datasheets", "Sales terms & lead times"].map(x => (
                  <a key={x} href="#" onClick={(e) => e.preventDefault()}><span>{x}</span><span className="qty">PDF</span></a>
                ))}
              </div>
            </div>
            <div className="mega-feat">
              <h4>{t("mega.tool")}</h4>
              <div className="pic" style={{ height: 80 }}>
                <span className="mono" style={{ fontSize: 14, color: "var(--ink)" }}>CONFIGURATOR</span>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, lineHeight: 1.2, marginBottom: 6 }}>
                {t("mega.selector_title")}
              </div>
              <div style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.5, marginBottom: 12 }}>
                {t("mega.selector_blurb")}
              </div>
              <a href="#" className="link-arrow" onClick={(e) => e.preventDefault()}>{t("mega.launch")} <IconArrow /></a>
            </div>
          </div>
        </div>
      )}

      {open === "a" && (
        <div className="mega">
          <div className="mega-inner">
            <div>
              <h4>{t("mega.by_media")}</h4>
              <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 12 }}>{t("mega.by_media_blurb")}</div>
            </div>
            <div>
              <h4>{t("nav.applications")}</h4>
              <div className="mega-list">
                {["Hydraulic oil (HFA-E, HFC, HFD)", "Compressed air & vacuum", "Steam (≤ 220 °C)", "Sea water & brine", "Fuel & lubricants", "Cryogenic (LN₂, LNG)", "Aggressive chemicals", "Potable water (WRAS)"].map(x => (
                  <a key={x} href="#" onClick={(e) => e.preventDefault()}><span>{x}</span><span className="qty">→</span></a>
                ))}
              </div>
            </div>
            <div className="mega-feat">
              <h4>{t("mega.spotlight")}</h4>
              <div className="pic"><ClampArt kind="cushion" /></div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, lineHeight: 1.2, marginBottom: 6 }}>
                {t("mega.cushion_title")}
              </div>
              <a href="#" className="link-arrow" onClick={(e) => e.preventDefault()}>{t("mega.see_series")} <IconArrow /></a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────
function Footer({ go }) {
  const t = useT();
  return (
    <footer className="footer">
      <div className="wrap-wide footer-top">
        <div className="brand-block">
          <div className="brand">
            <div className="brand-mark">W</div>
            <div>
              <div className="brand-name">WEIQUE</div>
              <div className="brand-sub">{t("nav.brand_sub")}</div>
            </div>
          </div>
          <p className="blurb">{t("ft.blurb")}</p>
          <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
            <span className="chip" style={{ background: "transparent", color: "rgba(255,255,255,.8)", borderColor: "rgba(255,255,255,.2)" }}>ISO 9001</span>
            <span className="chip" style={{ background: "transparent", color: "rgba(255,255,255,.8)", borderColor: "rgba(255,255,255,.2)" }}>IATF 16949</span>
            <span className="chip" style={{ background: "transparent", color: "rgba(255,255,255,.8)", borderColor: "rgba(255,255,255,.2)" }}>CE / PED</span>
          </div>
        </div>

        <div>
          <h5>{t("ft.products")}</h5>
          <ul>
            {PRODUCT_NAV_DATA.slice(0, 6).map((p) => (
              <li key={p.kind}><a href="#" onClick={(e) => { e.preventDefault(); go("catalog"); }}>{t(p.labelKey)}</a></li>
            ))}
            <li><a href="#" onClick={(e) => { e.preventDefault(); go("catalog"); }}>{t("ft.view_all")}</a></li>
          </ul>
        </div>

        <div>
          <h5>{t("ft.resources")}</h5>
          <ul>
            <li><a href="#">{t("ft.r1")}</a></li>
            <li><a href="#">{t("ft.r2")}</a></li>
            <li><a href="#">{t("ft.r3")}</a></li>
            <li><a href="#">{t("ft.r4")}</a></li>
            <li><a href="#">{t("ft.r5")}</a></li>
            <li><a href="#">{t("ft.r6")}</a></li>
          </ul>
        </div>

        <div>
          <h5>{t("ft.company")}</h5>
          <ul>
            <li><a href="#">{t("ft.c1")}</a></li>
            <li><a href="#">{t("ft.c2")}</a></li>
            <li><a href="#">{t("ft.c3")}</a></li>
            <li><a href="#">{t("ft.c4")}</a></li>
            <li><a href="#">{t("ft.c5")}</a></li>
            <li><a href="#">{t("ft.c6")}</a></li>
          </ul>
        </div>

        <div>
          <h5>{t("ft.contact")}</h5>
          <div className="contact-row" style={{ marginBottom: 14 }}>
            <span className="lbl">{t("ft.hq")}</span>
            {t("ft.hq_addr")}
          </div>
          <div className="contact-row" style={{ marginBottom: 14 }}>
            <span className="lbl">{t("ft.sales_asia")}</span>
            <a href="tel:+8618361463621" style={{ opacity: .9 }}>+86 183 6146 3621</a><br />
            <a href="mailto:wadezhang1987@gmail.com" style={{ opacity: .9 }}>wadezhang1987@gmail.com</a>
          </div>
          <div className="contact-row">
            <span className="lbl">WeChat / WhatsApp</span>
            +86 183 6146 3621
          </div>
        </div>
      </div>

      <div className="wrap-wide footer-bottom">
        <div>{t("ft.copy")}</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#" style={{ opacity: .85 }}>{t("ft.privacy")}</a>
          <a href="#" style={{ opacity: .85 }}>{t("ft.terms")}</a>
          <a href="#" style={{ opacity: .85 }}>{t("ft.cookies")}</a>
          <a href="#" style={{ opacity: .85 }}>{t("ft.sitemap")}</a>
        </div>
      </div>
    </footer>
  );
}

// Back-compat exports — home.jsx and others import these
const PRODUCT_NAV = PRODUCT_NAV_DATA;
const INDUSTRIES = INDUSTRY_DATA;

Object.assign(window, { TopBar, Nav, Footer, PRODUCT_NAV, INDUSTRIES, PRODUCT_NAV_DATA, INDUSTRY_DATA });