// home.jsx — WeiQue homepage.

const { useState: useStateH } = React;

// labelKey "cat.light_s" → descriptionKey "cat.desc.light_s"
function getCatDescKey(labelKey) {
  return labelKey.replace(/^cat\./, "cat.desc.");
}

function Home({ go, heroVariant }) {
  const t = useT();
  const [tab, setTab] = useStateH("od");
  const [certOpen, setCertOpen] = useStateH(false);
  const CERT_IMG = "assets/iso-9001-cert.jpg";

  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") setCertOpen(false); }
    if (certOpen) {
      document.body.style.overflow = "hidden";
      document.addEventListener("keydown", onKey);
    }
    return () => {
      document.body.style.overflow = "";
      document.removeEventListener("keydown", onKey);
    };
  }, [certOpen]);

  return (
    <>
      {heroVariant === "split" && <HeroSplit go={go} />}
      {heroVariant === "specs" && <HeroSpecs go={go} />}
      {heroVariant === "headline" && <HeroHeadline go={go} />}

      {/* Trust strip */}
      <div className="trust">
        <div className="wrap-wide trust-inner">
          <div className="trust-label">{t("trust.label")}</div>
          <div className="trust-mark"><span className="num">01</span> ISO 9001</div>
          <div className="trust-mark"><span className="num">02</span> IATF 16949</div>
          <div className="trust-mark"><span className="num">03</span> CE / PED</div>
          <div className="trust-mark"><span className="num">04</span> RoHS / REACH</div>
          <div className="trust-mark"><span className="num">05</span> DNV · Marine</div>
          <div className="trust-mark"><span className="num">06</span> NORSOK M-630</div>
        </div>
      </div>

      {/* About / Brief Introduction (with ISO certificate embedded) */}
      <section className="block">
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 01</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("about.eyebrow")}</div>
              <h2>{t("about.title")}</h2>
            </div>
            <div className="sub">
              <span className="chip chip--accent" style={{ background: "var(--accent-soft)" }}>
                <span className="dot"></span> {t("about.cert_val")}
              </span>
            </div>
          </div>

          <div className="about-block">
            <div className="about-text">
              <p>{t("about.p1")}</p>
              <p>{t("about.p2")}</p>
              <p>{t("about.p3")}</p>

              <div className="about-facts">
                <div className="item">
                  <div className="k">{t("about.std_lbl")}</div>
                  <div className="v">JB/ZQ 4008<small>· DIN 3015</small></div>
                </div>
                <div className="item">
                  <div className="k">{t("about.equip_lbl")}</div>
                  <div className="v">150<small>{t("cg.units")}</small></div>
                </div>
                <div className="item">
                  <div className="k">{t("about.regions_lbl")}</div>
                  <div className="v">120+<small>{t("ind.constr").toLowerCase().includes("中") ? "地区" : "regions"}</small></div>
                </div>
                <div className="item">
                  <div className="k">{t("about.cert_lbl")}</div>
                  <div className="v">ISO 9001<small>:2015</small></div>
                </div>
              </div>
            </div>

            <div className="about-cert" onClick={() => setCertOpen(true)} title={t("cert.view")}>
              <div className="frame-tag">
                <span><strong>HDTD</strong> · ISO 9001:2015</span>
                <span>53826Q00156R010</span>
              </div>
              <img src={CERT_IMG} alt="ISO 9001:2015 Quality Management System Certificate — Yancheng Weique Pipe Fittings Co., Ltd." loading="lazy" />
              <div className="cap">
                <span>{t("cert.expiry_lbl")} · {t("cert.expiry_val")}</span>
                <span className="zoom-hint">⤢ {t("cert.view")}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="block">
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 02</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("sec.families_eyebrow")}</div>
              <h2>{t("sec.families_title_a")}<br />{t("sec.families_title_b")}</h2>
            </div>
            <div className="sub">
              {t("sec.families_sub_a")}<br />
              {t("sec.families_sub_b")}<br />
              {t("sec.families_sub_c")}
            </div>
          </div>

          <div className="cat-grid">
            {PRODUCT_NAV_DATA.map((p, i) => (
              <div key={p.kind} className="cat-card" onClick={() => go("catalog")}>
                <div className="row between center">
                  <div className="cat-num">{p.prefix || "WQ"}{i+1 < 10 ? " · 0" : " · "}{i + 1} / {p.std}</div>
                  <div className="cat-arrow"><IconArrowUR /></div>
                </div>
                <div className="cat-art">
                  <ClampArt kind={p.kind} />
                  <div className="cat-meta">{p.sizes ? `${p.sizes} · ${p.od}` : `OD ${p.od}`}</div>
                </div>
                <div>
                  <h3>{t(p.labelKey)}</h3>
                  <div className="cat-desc" style={{ marginTop: 8 }}>{t(getCatDescKey(p.labelKey))}</div>
                </div>
                <div className="row between center" style={{ marginTop: "auto", paddingTop: 8 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{p.qty} {t("cat.skus")}</span>
                  <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>{t("cat.view")} →</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Order code decoder */}
      <section className="block">
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 03</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("code.eyebrow")}</div>
              <h2>{t("code.title")}</h2>
            </div>
            <div className="sub">
              {t("code.ex_lbl")}<br />
              <strong style={{ color: "var(--accent)", fontFamily: "var(--font-mono)" }}>{t("code.ex_pn")}</strong>
            </div>
          </div>

          <p className="lede" style={{ marginBottom: 28, fontSize: 15, color: "var(--ink-2)" }}>
            {t("code.sub")}
          </p>

          {/* Visual decoder strip */}
          <div className="code-strip">
            <div className="code-seg"><span className="lbl">Brand</span><span className="val">WQ</span></div>
            <div className="code-seg"><span className="lbl">Series</span><span className="val accent">L</span></div>
            <div className="code-seg"><span className="lbl">Material</span><span className="val accent">P</span></div>
            <div className="code-seg"><span className="lbl">Surface</span><span className="val accent">G</span></div>
            <div className="code-seg"><span className="lbl">Size</span><span className="val">1-3</span></div>
            <div className="code-seg"><span className="lbl">Pipe OD</span><span className="val">20</span></div>
            <div className="code-seg"><span className="lbl">Plate</span><span className="val">A</span></div>
            <div className="code-seg"><span className="lbl">Metal</span><span className="val">C</span></div>
          </div>

          {/* Legend grid */}
          <div className="code-legend">
            <div className="item">
              <div className="seg-num">/ 01 — WQ</div>
              <div className="seg-name">{t("code.seg.brand")}</div>
              <div className="seg-vals">Weique Tube Clamp</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 02 — L · T · H</div>
              <div className="seg-name">{t("code.seg.series")}</div>
              <div className="seg-vals">{t("code.seg.series_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 03 — P · N · L · G · B</div>
              <div className="seg-name">{t("code.seg.mat")}</div>
              <div className="seg-vals">{t("code.seg.mat_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 04 — G · S</div>
              <div className="seg-name">{t("code.seg.surf")}</div>
              <div className="seg-vals">{t("code.seg.surf_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 05 — 1-3</div>
              <div className="seg-name">{t("code.seg.size")}</div>
              <div className="seg-vals">{t("code.seg.size_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 06 — 20</div>
              <div className="seg-name">{t("code.seg.od")}</div>
              <div className="seg-vals">{t("code.seg.od_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 07 — A · B · C</div>
              <div className="seg-name">{t("code.seg.mount")}</div>
              <div className="seg-vals">{t("code.seg.mount_v")}</div>
            </div>
            <div className="item">
              <div className="seg-num">/ 08 — C · SS304 · SS316</div>
              <div className="seg-name">{t("code.seg.metal")}</div>
              <div className="seg-vals">{t("code.seg.metal_v")}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Product finder */}
      <section className="finder">
        <div className="wrap-wide finder-inner">
          <div className="sect-head" style={{ borderBottomColor: "rgba(255,255,255,.14)", color: "var(--paper)" }}>
            <div className="num" style={{ color: "rgba(255,255,255,.5)" }}>§ 04</div>
            <div>
              <div className="meta" style={{ color: "rgba(255,255,255,.5)", marginBottom: 10 }}>{t("sec.config_eyebrow")}</div>
              <h2 style={{ color: "var(--paper)" }}>{t("sec.config_title")}</h2>
            </div>
            <div className="sub" style={{ color: "rgba(255,255,255,.5)" }}>
              {t("sec.config_sub_a")}<br />
              <strong style={{ color: "var(--paper)" }}>{t("sec.config_sub_b")}</strong>
            </div>
          </div>

          <div className="finder-tabs">
            <button className={tab === "od" ? "on" : ""} onClick={() => setTab("od")}>{t("fnd.tab_od")} <span className="qty">/01</span></button>
            <button className={tab === "series" ? "on" : ""} onClick={() => setTab("series")}>{t("fnd.tab_series")} <span className="qty">/02</span></button>
            <button className={tab === "media" ? "on" : ""} onClick={() => setTab("media")}>{t("fnd.tab_media")} <span className="qty">/03</span></button>
            <button className={tab === "pn" ? "on" : ""} onClick={() => setTab("pn")}>{t("fnd.tab_pn")} <span className="qty">/04</span></button>
          </div>

          {tab === "od" && (
            <div className="finder-form">
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_od")}</span><div className="inp"><span>38.0</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_press")}</span><div className="inp"><span>250</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_mat")}</span><div className="inp"><span>Polypropylene</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_mount")}</span><div className="inp"><span>Weld plate</span><IconChevron /></div></div>
              <button className="btn btn--accent" onClick={() => go("catalog")}>{t("fnd.find")} <IconArrow /></button>
            </div>
          )}
          {tab === "series" && (
            <div className="finder-form">
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_series")}</span><div className="inp"><span>Standard · DIN 3015-1</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_group")}</span><div className="inp"><span>Group 4 · ø38–ø48</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_body")}</span><div className="inp"><span>PP</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_bolt")}</span><div className="inp"><span>Hex / M8</span><IconChevron /></div></div>
              <button className="btn btn--accent" onClick={() => go("catalog")}>{t("fnd.find")} <IconArrow /></button>
            </div>
          )}
          {tab === "media" && (
            <div className="finder-form">
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_fluid")}</span><div className="inp"><span>Hydraulic oil HFC</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_temp")}</span><div className="inp"><span>−20 / +120</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_env")}</span><div className="inp"><span>Marine / saltspray</span><IconChevron /></div></div>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_cycles")}</span><div className="inp"><span>10k+</span><IconChevron /></div></div>
              <button className="btn btn--accent" onClick={() => go("catalog")}>{t("fnd.find")} <IconArrow /></button>
            </div>
          )}
          {tab === "pn" && (
            <div className="finder-form" style={{ gridTemplateColumns: "1fr auto" }}>
              <div className="finder-field"><span className="lbl">{t("fnd.lbl_pn")}</span><div className="inp"><span className="ph">e.g. WQ-3015-1-04-PP-G-38</span><IconChevron /></div></div>
              <button className="btn btn--accent" onClick={() => go("product")}>{t("fnd.lookup")} <IconArrow /></button>
            </div>
          )}

          <div className="finder-results-strip">
            <div>{t("fnd.live")} <strong>12,847 {t("fnd.units")}</strong> {t("fnd.stock_at")}</div>
            <div>← <strong>{tab === "od" ? "23 " + t("fnd.matches") : tab === "series" ? "16 " + t("fnd.matches") : tab === "media" ? "31 " + t("fnd.matches") : t("fnd.pn_prompt")}</strong></div>
          </div>
        </div>
      </section>

      {/* Industries */}
      <section className="block">
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 05</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("sec.industries_eyebrow")}</div>
              <h2>{t("sec.industries_title")}</h2>
            </div>
            <div className="sub">{t("sec.industries_sub_a")}<br />{t("sec.industries_sub_b")}</div>
          </div>

          <div className="ind-grid">
            {INDUSTRY_DATA.slice(0, 6).map((ind, i) => (
              <div key={ind.labelKey} className="ind-card" onClick={() => go("catalog")}>
                <div className="row between center">
                  <span className="ind-num">/{String(i + 1).padStart(2, "0")}</span>
                  <span className="ind-num">{ind.code}</span>
                </div>
                <div>
                  <h4>{t(ind.labelKey)}</h4>
                  <div className="ind-meta">{ind.metaKey ? t(ind.metaKey) : "Vibration · pressure · media compatibility"}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats / why us */}
      <section className="block" style={{ background: "var(--paper)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 06</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("sec.why_eyebrow")}</div>
              <h2>{t("sec.why_title")}</h2>
            </div>
            <div className="sub">{t("sec.why_sub_a")}<br />{t("sec.why_sub_b")}</div>
          </div>

          <div className="stats">
            <div className="stat">
              <div className="num">25<small>yr</small></div>
              <div className="lbl">{t("stats.years_lbl")}</div>
              <div className="desc">{t("stats.years_desc")}</div>
            </div>
            <div className="stat">
              <div className="num">598</div>
              <div className="lbl">{t("stats.skus_lbl")}</div>
              <div className="desc">{t("stats.skus_desc")}</div>
            </div>
            <div className="stat">
              <div className="num">PN<small>160</small></div>
              <div className="lbl">{t("stats.pn_lbl")}</div>
              <div className="desc">{t("stats.pn_desc")}</div>
            </div>
            <div className="stat">
              <div className="num">47</div>
              <div className="lbl">{t("stats.markets_lbl")}</div>
              <div className="desc">{t("stats.markets_desc")}</div>
            </div>
          </div>
        </div>
      </section>

      {/* News */}
      <section className="block">
        <div className="wrap-wide">
          <div className="sect-head">
            <div className="num">§ 07</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("sec.news_eyebrow")}</div>
              <h2>{t("sec.news_title")}</h2>
            </div>
            <div className="sub"><a href="#" className="link-arrow">{t("sec.news_all")} <IconArrow /></a></div>
          </div>

          <div className="news-grid">
            <div className="news-card">
              <div className="pic"><div className="pic-label">FIG. 01 · BURST TEST</div></div>
              <span className="tag">{t("news.tag_tech")}</span>
              <h4>{t("news.t1")}</h4>
              <div className="date">2026 · 05 · 12</div>
            </div>
            <div className="news-card">
              <div className="pic"><div className="pic-label">FIG. 02 · MARINE 316L</div></div>
              <span className="tag">{t("news.tag_release")}</span>
              <h4>{t("news.t2")}</h4>
              <div className="date">2026 · 04 · 28</div>
            </div>
            <div className="news-card">
              <div className="pic"><div className="pic-label">FIG. 03 · CASE STUDY</div></div>
              <span className="tag">{t("news.tag_case")}</span>
              <h4>{t("news.t3")}</h4>
              <div className="date">2026 · 04 · 02</div>
            </div>
          </div>
        </div>
      </section>

      {/* Downloads */}
      <section className="downloads">
        <div className="wrap-wide">
          <div className="sect-head" style={{ marginBottom: 32 }}>
            <div className="num">§ 08</div>
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>{t("sec.dl_eyebrow")}</div>
              <h2>{t("sec.dl_title")}</h2>
            </div>
            <div className="sub">{t("sec.dl_sub_a")}<br />{t("sec.dl_sub_b")}</div>
          </div>

          <div className="dl-grid">
            {DOWNLOADS.map((d) => (
              <div
                key={d.name}
                className="dl-card"
                onClick={() => { if (d.openCert) setCertOpen(true); }}
                style={d.openCert ? { borderColor: "var(--accent)" } : null}
              >
                <div className="ic"></div>
                <div className="meta">{d.kind} · {d.size}</div>
                <div className="name">{d.name}</div>
                <div className="arr"><IconDownload /></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section className="cta-strip">
        <div className="wrap-wide cta-strip-inner">
          <div>
            <div className="meta" style={{ color: "rgba(255,255,255,.7)", marginBottom: 12 }}>{t("cta.eyebrow")}</div>
            <h2 className="display-2" style={{ marginBottom: 18, maxWidth: "14ch" }}>{t("cta.title")}</h2>
            <p className="lede">{t("cta.lede")}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
              <a href="#" className="btn"><IconQuote size={14} /> {t("cta.btn")}</a>
              <a href="#" className="btn btn--ghost">{t("cta.btn2")} <IconArrow /></a>
            </div>
          </div>
          <div className="panel">
            <div className="meta" style={{ color: "rgba(255,255,255,.7)", marginBottom: 12 }}>{t("cta.live")}</div>
            <div className="row"><span className="k">{t("cta.k_time")}</span><span className="v">14:42 CST</span></div>
            <div className="row"><span className="k">{t("cta.k_reps")}</span><span className="v">7 / 9</span></div>
            <div className="row"><span className="k">{t("cta.k_turn")}</span><span className="v">2 h 14 min</span></div>
            <div className="row"><span className="k">{t("cta.k_stock")}</span><span className="v">12,847</span></div>
            <div className="row"><span className="k">{t("cta.k_freight")}</span><span className="v">CW 22 · MAY 30</span></div>
          </div>
        </div>
      </section>
      {/* Certificate lightbox */}
      {certOpen && (
        <div className="cert-modal" onClick={() => setCertOpen(false)}>
          <div className="meta-bar">
            HDTD · QMS · ISO 9001:2015 · 53826Q00156R010
          </div>
          <button className="close" onClick={(e) => { e.stopPropagation(); setCertOpen(false); }} aria-label="Close">✕</button>
          <img
            src={CERT_IMG}
            alt="ISO 9001:2015 Quality Management System Certificate"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}
    </>
  );
}

const INDUSTRY_META = {
  HY: "PN 250 · HFC media",
  OG: "NORSOK M-630 · API 6A",
  MR: "316L · salt spray",
  CM: "Vibration · IP67",
  MN: "Abrasion · 6g shock",
  RL: "EN 45545 · fire",
  PC: "PP / PVDF · acid",
  RE: "UV · −40 °C ambient",
};

const DOWNLOADS = [
  { name: "Master catalog (EN) 2026", kind: "Catalog · 286 pp", size: "48 MB" },
  { name: "STEP / IGES CAD library", kind: "ZIP archive", size: "112 MB" },
  { name: "Installation torque charts", kind: "Datasheet", size: "1.4 MB" },
  { name: "Chemical compatibility matrix", kind: "Reference", size: "3.2 MB" },
  { name: "ISO 9001 certificate", kind: "Cert (2026)", size: "View", openCert: true },
  { name: "Marine type approval", kind: "Cert · DNV", size: "0.8 MB" },
  { name: "RoHS / REACH statement", kind: "Compliance", size: "0.4 MB" },
  { name: "Burst test report — Heavy 04", kind: "Test report", size: "2.1 MB" },
];

// ─────────────────────────────────────────────────────────
// Hero variants
// ─────────────────────────────────────────────────────────
function HeroSplit({ go }) {
  const t = useT();
  return (
    <section className="hero">
      <div className="wrap-wide hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="chip chip--accent"><span className="dot"></span> {t("hero.eyebrow")}</span>
            <span className="meta">§ {t("hero.standard")}</span>
          </div>
          <h1 className="display-1">
            {t("hero.h1_a")}<br />{t("hero.h1_b")} <em>{t("hero.h1_c")}</em>{t("hero.h1_dot")}
          </h1>
          <p className="lede">{t("hero.lede")}</p>
          <div className="ctas">
            <button className="btn btn--accent" onClick={() => go("catalog")}>{t("hero.cta_browse")} <IconArrow /></button>
            <button className="btn btn--ghost" onClick={() => go("home")}><IconDownload size={14} /> {t("hero.cta_pdf")}</button>
          </div>

          <div className="hero-specs">
            <div className="item"><div className="k">{t("hero.k_od")}</div><div className="v">{t("hero.k_od_v")}<sup>mm</sup></div></div>
            <div className="item"><div className="k">{t("hero.k_press")}</div><div className="v">{t("hero.k_press_v")}<sup>bar</sup></div></div>
            <div className="item"><div className="k">{t("hero.k_skus_lbl")}</div><div className="v">{t("hero.k_skus_v")}</div></div>
            <div className="item"><div className="k">{t("hero.k_temp_lbl")}</div><div className="v">{t("hero.k_temp_v")}<sup>°C</sup></div></div>
          </div>
        </div>

        <div className="hero-viz">
          <div className="blueprint"></div>
          <div className="corner-meta">
            {t("hero.viz_fig")}<br />
            {t("hero.viz_pn")}<br />
            {t("hero.viz_label")}
          </div>
          <ClampArt kind="heavy" showDims />
          <div className="callout-list">
            <div>{t("hero.viz_callout_1")}</div>
            <div>{t("hero.viz_callout_2")}</div>
            <div>{t("hero.viz_callout_3")}</div>
            <div>{t("hero.viz_callout_4")}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroSpecs({ go }) {
  const t = useT();
  return (
    <section className="hero">
      <div className="wrap-wide" style={{ padding: "80px 0" }}>
        <div className="row between center" style={{ marginBottom: 32 }}>
          <span className="meta">{t("heroS.featured")}</span>
          <span className="meta">{t("heroS.date")}</span>
        </div>
        <h1 className="display-1" style={{ maxWidth: "20ch", marginBottom: 32 }}>
          {t("heroS.h1_a")} <em>{t("heroS.h1_b")}</em> {t("heroS.h1_c")}
        </h1>
        <div className="row between" style={{ alignItems: "flex-end", gap: 60 }}>
          <p className="lede" style={{ maxWidth: "44ch" }}>{t("heroS.lede")}</p>
          <div style={{ display: "flex", gap: 12 }}>
            <button className="btn btn--accent" onClick={() => go("catalog")}>{t("heroS.cta")} <IconArrow /></button>
            <button className="btn btn--ghost"><IconDownload size={14} /> {t("heroS.cta2")}</button>
          </div>
        </div>

        <div className="hero-specs" style={{ marginTop: 56, gridTemplateColumns: "repeat(6, 1fr)" }}>
          <div className="item"><div className="k">OD min</div><div className="v">6<sup>mm</sup></div></div>
          <div className="item"><div className="k">OD max</div><div className="v">508<sup>mm</sup></div></div>
          <div className="item"><div className="k">{t("hero.k_press")}</div><div className="v">PN 80</div></div>
          <div className="item"><div className="k">{t("hero.k_skus_lbl")}</div><div className="v">12</div></div>
          <div className="item"><div className="k">{t("hero.k_temp_lbl")}</div><div className="v">− 80 / + 500<sup>°C</sup></div></div>
          <div className="item"><div className="k">CAD</div><div className="v">STEP</div></div>
        </div>
      </div>
    </section>
  );
}

function HeroHeadline({ go }) {
  const t = useT();
  return (
    <section className="hero" style={{ background: "var(--ink)", color: "var(--paper)", borderBottom: "none" }}>
      <div className="wrap-wide" style={{ padding: "120px 0 96px", position: "relative" }}>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 80px 100%, linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 80px", pointerEvents: "none" }}></div>
        <div className="hero-eyebrow" style={{ position: "relative" }}>
          <span className="chip chip--accent"><span className="dot"></span> {t("hero.eyebrow")}</span>
          <span className="meta" style={{ color: "rgba(255,255,255,.5)" }}>§ {t("hero.standard")}</span>
        </div>
        <h1 className="display-1" style={{ position: "relative", maxWidth: "18ch", color: "var(--paper)", fontSize: "clamp(56px, 8vw, 128px)" }}>
          {t("hero.h1_a")}<br />{t("hero.h1_b")} <em style={{ color: "var(--accent)" }}>{t("hero.h1_c")}</em>{t("hero.h1_dot")}
        </h1>
        <p className="lede" style={{ color: "rgba(255,255,255,.75)", maxWidth: "52ch", margin: "32px 0 40px", position: "relative" }}>{t("hero.lede")}</p>
        <div style={{ display: "flex", gap: 12, position: "relative" }}>
          <button className="btn btn--accent" onClick={() => go("catalog")}>{t("hero.cta_browse")} <IconArrow /></button>
          <button className="btn btn--ghost" style={{ color: "var(--paper)", borderColor: "rgba(255,255,255,.3)" }}>
            <IconDownload size={14} /> {t("hero.cta_pdf")}
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });