// product.jsx — Product detail page.

const { useState: useStateP } = React;

const VARIANTS = [22, 25, 28, 30, 32, 35, 38, 42, 48, 54, 60.3, 76.1];

function Product({ go }) {
  const t = useT();
  const [od, setOd] = useStateP(48);
  const [qty, setQty] = useStateP(50);
  const [tab, setTab] = useStateP("specs");
  const [thumb, setThumb] = useStateP(0);

  return (
    <div className="wrap-wide">
      <div className="crumb">
        <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>{t("cg.home")}</a>
        <span className="sep">/</span>
        <a href="#" onClick={(e) => { e.preventDefault(); go("catalog"); }}>{t("cg.h1")}</a>
        <span className="sep">/</span>
        <a href="#" onClick={(e) => { e.preventDefault(); go("catalog"); }}>{t("pd.heavy_link")}</a>
        <span className="sep">/</span>
        <span style={{ color: "var(--ink)" }}>{t("pd.group")} 4 · ø{od}</span>
      </div>

      <section className="pd-body">
        <div className="pd-viz">
          <div className="corner tl">WQ-3015-2-04-{String(od).replace(".", "")}-ST</div>
          <div className="corner tr">FIG. A-{String(VARIANTS.indexOf(od) + 1).padStart(2, "0")}<br />{t("pd.fig_scale")}</div>
          <div className="main">
            <ClampArt kind={["heavy", "stainless", "cushion"][thumb]} showDims />
          </div>
          <div className="corner br">{t("pd.dim_units")}<br />{t("pd.tolerance")}</div>

          <div className="thumbs">
            {["heavy", "stainless", "cushion"].map((k, i) => (
              <div key={k} className={"thumb" + (i === thumb ? " on" : "")} onClick={() => setThumb(i)}>
                <ClampArt kind={k} />
              </div>
            ))}
            <div className="thumb" style={{ flexDirection: "column", gap: 2 }}>
              <span className="mono" style={{ fontSize: 9, color: "var(--muted)" }}>STEP</span>
              <span className="mono" style={{ fontSize: 9, color: "var(--ink)" }}>3D</span>
            </div>
            <div className="thumb" style={{ flexDirection: "column", gap: 2 }}>
              <span className="mono" style={{ fontSize: 9, color: "var(--muted)" }}>DWG</span>
              <span className="mono" style={{ fontSize: 9, color: "var(--ink)" }}>2D</span>
            </div>
          </div>
        </div>

        <div className="pd-info">
          <div className="pn-strip">
            <span className="chip chip--accent">{t("pd.chip_heavy")}</span>
            <span className="chip">{t("pd.chip_group4")}</span>
            <span className="chip">{t("pd.chip_tuv")}</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--muted)", marginLeft: "auto" }}>{t("pd.pn")} WQ-3015-2-04-{String(od).replace(".", "")}-ST</span>
          </div>
          <h1 className="display-2">{t("pd.title", { od })}</h1>
          <p className="blurb">{t("pd.blurb")}</p>

          <div className="pd-key-spec">
            <div className="item">
              <div className="k">{t("pd.k_press")}</div>
              <div className="v">160 bar</div>
            </div>
            <div className="item">
              <div className="k">{t("pd.k_od_sel")}</div>
              <div className="v">ø{od} mm</div>
            </div>
            <div className="item">
              <div className="k">{t("pd.k_temp")}</div>
              <div className="v">−40 / +120 °C</div>
            </div>
          </div>

          <div className="pd-variant">
            <div className="head">
              <h4>{t("pd.select_od")}</h4>
              <div className="selected">ø {od} mm · {t("pd.group")} {od < 35 ? 3 : 4}</div>
            </div>
            <div className="grid">
              {VARIANTS.map((v) => (
                <button key={v} className={v === od ? "on" : ""} onClick={() => setOd(v)}>
                  {v}
                </button>
              ))}
            </div>
            <div className="row between center" style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>
              <span>{t("pd.variants_note")}</span>
              <span>{t("pd.imperial_note")}</span>
            </div>
          </div>

          <div className="pd-actions">
            <div className="qty-stepper">
              <button onClick={() => setQty(Math.max(1, qty - 10))}>−</button>
              <input value={qty} onChange={(e) => setQty(Math.max(1, Number(e.target.value) || 1))} />
              <button onClick={() => setQty(qty + 10)}>+</button>
            </div>
            <button className="btn btn--accent" style={{ flex: 1, justifyContent: "center", padding: "14px 24px" }}>
              <IconQuote size={14} /> {t("pd.add_quote", { qty })}
            </button>
            <button className="icon-btn" style={{ width: 46, height: 46 }} title="CAD">
              <IconDownload />
            </button>
          </div>

          <div style={{ display: "flex", gap: 16, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)", marginBottom: 32 }}>
            <span>{t("pd.stock_hq", { n: 1200 - qty * 4 })}</span>
            <span>{t("pd.stock_eu")}</span>
            <span>{t("pd.stock_ship")}</span>
          </div>

          <div className="pd-tabs">
            <div className="tabs-nav">
              <button className={tab === "specs" ? "on" : ""} onClick={() => setTab("specs")}>{t("pd.tab_specs")}</button>
              <button className={tab === "dim" ? "on" : ""} onClick={() => setTab("dim")}>{t("pd.tab_dim")}</button>
              <button className={tab === "mat" ? "on" : ""} onClick={() => setTab("mat")}>{t("pd.tab_mat")}</button>
              <button className={tab === "comp" ? "on" : ""} onClick={() => setTab("comp")}>{t("pd.tab_comp")}</button>
              <button className={tab === "dl" ? "on" : ""} onClick={() => setTab("dl")}>{t("pd.tab_dl")}</button>
            </div>

            {tab === "specs" && (
              <table className="spec-table">
                <tbody>
                  <tr><td>Standard</td><td>DIN 3015-2 · Heavy series</td></tr>
                  <tr><td>Working pressure</td><td>PN 160 (160 bar)</td></tr>
                  <tr><td>Burst pressure (TÜV)</td><td>640 bar</td></tr>
                  <tr><td>Pipe OD</td><td>ø{od} mm ({t("pd.group")} {od < 35 ? 3 : 4})</td></tr>
                  <tr><td>Operating temperature</td><td>−40 °C to +120 °C</td></tr>
                  <tr><td>Vibration qualification</td><td>6g random · 12,000 cycles</td></tr>
                  <tr><td>Body material</td><td>PA66 GF30, halogen-free</td></tr>
                  <tr><td>Bolt grade</td><td>8.8 zinc-plated CR3 · M10 × 1.5</td></tr>
                  <tr><td>Tightening torque</td><td>23 N·m ± 2</td></tr>
                  <tr><td>Mass per assembly</td><td>{(od * 0.012 + 0.18).toFixed(3)} kg</td></tr>
                  <tr><td>Compliance</td><td>RoHS · REACH · IATF 16949</td></tr>
                </tbody>
              </table>
            )}

            {tab === "dim" && (
              <table className="spec-table">
                <tbody>
                  <tr><td>A — Overall width</td><td>{Math.round(od * 1.8 + 24)} mm</td></tr>
                  <tr><td>B — Overall height</td><td>{Math.round(od + 30)} mm</td></tr>
                  <tr><td>C — Mounting hole centres</td><td>{Math.round(od * 1.4 + 12)} mm</td></tr>
                  <tr><td>D — Pipe seat diameter</td><td>ø{od.toFixed(1)} mm (+0 / −0.2)</td></tr>
                  <tr><td>E — Bolt hole ø</td><td>11 mm (M10)</td></tr>
                  <tr><td>F — Weld plate thickness</td><td>6 mm</td></tr>
                  <tr><td>Tolerance class</td><td>ISO 2768-mK</td></tr>
                </tbody>
              </table>
            )}

            {tab === "mat" && (
              <table className="spec-table">
                <tbody>
                  <tr><td>Body</td><td>PA66 + 30% GF, halogen-free V-0</td></tr>
                  <tr><td>Weld plate</td><td>S235JR, HDG 80 µm</td></tr>
                  <tr><td>Hex bolt</td><td>8.8, ISO 4017, ZnCR3 + Dacromet</td></tr>
                  <tr><td>Washer</td><td>DIN 125 zinc-plated</td></tr>
                  <tr><td>Cushion (optional)</td><td>NBR 70 Sh-A · −30 / +110 °C</td></tr>
                  <tr><td>Saltspray resistance</td><td>≥ 720 h ISO 9227</td></tr>
                  <tr><td>UV stability</td><td>UV-stabilised, outdoor</td></tr>
                </tbody>
              </table>
            )}

            {tab === "comp" && (
              <table className="spec-table">
                <tbody>
                  <tr><td>Hydraulic oils · mineral</td><td>✓</td></tr>
                  <tr><td>HFC fire-resistant fluids</td><td>✓</td></tr>
                  <tr><td>HFD-R phosphate ester</td><td>△ NBR cushion variant</td></tr>
                  <tr><td>Compressed air / vacuum</td><td>✓</td></tr>
                  <tr><td>Steam ≤ 180 °C</td><td>✓ steel-body variant</td></tr>
                  <tr><td>Sea water / saltspray</td><td>✓ 316 stainless variant</td></tr>
                  <tr><td>Aggressive acids (pH &lt; 3)</td><td>△ PP / PVDF body</td></tr>
                  <tr><td>Cryogenic (LN₂)</td><td>✗ &lt; −60 °C</td></tr>
                </tbody>
              </table>
            )}

            {tab === "dl" && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 4 }}>
                {[
                  { name: "2D drawing · DWG", kind: "AutoCAD", size: "180 KB" },
                  { name: "3D model · STEP AP214", kind: "STEP", size: "2.1 MB" },
                  { name: "3D model · IGES", kind: "IGES", size: "2.3 MB" },
                  { name: "Datasheet · EN", kind: "PDF", size: "0.8 MB" },
                  { name: "Installation torque chart", kind: "PDF", size: "0.4 MB" },
                  { name: "Material declaration", kind: "PDF", size: "0.6 MB" },
                ].map((d) => (
                  <div key={d.name} className="dl-card" style={{ flexDirection: "row", alignItems: "center", padding: "16px" }}>
                    <div className="ic" style={{ marginRight: 12, flexShrink: 0 }}></div>
                    <div style={{ flex: 1 }}>
                      <div className="meta" style={{ marginBottom: 4 }}>{d.kind} · {d.size}</div>
                      <div className="name" style={{ fontSize: 13 }}>{d.name}</div>
                    </div>
                    <div style={{ color: "var(--muted)" }}><IconDownload /></div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="related">
        <div className="sect-head" style={{ marginBottom: 24 }}>
          <div className="num">§ Rel.</div>
          <div>
            <div className="meta" style={{ marginBottom: 10 }}>{t("pd.rel_eyebrow")}</div>
            <h2>{t("pd.rel_title")}</h2>
          </div>
          <div className="sub"><a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); go("catalog"); }}>{t("pd.browse_all")} <IconArrow /></a></div>
        </div>

        <div className="grid">
          {PRODUCTS.slice(20, 24).map((p) => (
            <div key={p.pn} className="prod-card" onClick={() => go("product")}>
              <div className="pic"><ClampArt kind={p.kind} /></div>
              <div className="pn">{p.pn}</div>
              <div className="name">{t(p.nameKey)} · {t("pd.group")} {p.group} · ø{p.od}</div>
              <div className="specs">
                <div className="k">{t("cg.th_od")}</div><div className="v">ø{p.od} mm</div>
                <div className="k">{t("cg.th_mat")}</div><div className="v">{p.material.split(" ")[0]}</div>
              </div>
              <div className="bottom">
                <span className="price">{p.pressure}</span>
                <span className="link-arrow" style={{ fontSize: 12, padding: 0 }}>{t("cat.view")} <IconArrow size={12} /></span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Product });